武陆柒
2021-05-10 12:47
采纳率: 71.4%
浏览 15
已采纳

请大神指教,为什么web sql打不开,是哪有问题

<!doctype html>
<html>
<head>
    <style>
    body {
        color: #333;
        font-size: 12px;
        font-family: Tahoma, Verdana, sans-serif;
    }
    div,tbody,tr,td,input,ul,li,p {  margin: 0; padding: 0; }
    table {
        width:100%;
        border-collapse: collapse;
        border-spacing: 0;
        border-color: gray;
    }
    li { list-style: none; }
    a { color: #005eac; text-decoration: none; }
    img { border: none; }
    .clearfix { display: block; }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .comment-box{
        width:500px;
        border:1px solid #3879D9;
        border-radius:5px;
        padding:2px;
        box-shadow: 0 0 5px #3879D9 inset;
    }
    .comment-box_2 {
        padding: 10px 10px 5px;
        background: #f0f5f8;
    }
    textarea {
        width: 98%;
        height: 23px;
        padding: 3px;
        border: 1px solid #bcc7d8;
        margin-bottom: 5px;
        overflow: auto;
        font-size: 12px;
    }
    .input-button, .input-submit {
        background-color: #005eac;
        border-width: 1px;
        border-style: solid;
        border-color: #b8d4e8 #124680 #124680 #b8d4e8;
        color: #fff;
        cursor: pointer;
        font-size: 12px;
        padding: 2px 15px;
        overflow: visible;
        float:right;
    }
    .comment-box .content { padding: 0 10px; }
    .comment-list .comment { word-wrap: break-word; }
    .comment-list .avatar { float: left; } 
    .comment-list li {
        padding: 5px 0;
        border-bottom: 1px solid #ddd;
        vertical-align: top;
    }
    .content .s_3 { margin: 0 40px 0 60px; }
    .comment-list .p_1 { margin-bottom: 5px; }
    .comment-list .date { color: #999; margin-left: 10px; }
    .content .s_4 {
        float: right;
        color: #999;
        margin-left: 10px;
    }
    span.tip{color:Red;display:none;}
    </style>
</head>
<body>
    <header><h2>开发一个离线留言网页</h2></header>
    <div class="comment-box">
        <div class="comment-box_2 clearfix">
            <table>
                <tr>
                    <td style="width: 60px;vertical-align: top;">
                        <img height="50" width="50" src="../images/comment/men_tiny.gif">
                    </td>
                    <td>
                        <textarea placeholder="请输入留言"></textarea>
                        <div>
                            <span class="tip">请填写留言内容</span>
                            <input type="button" value="留  言" class="input-button">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="content">
            <ul class="comment-list">
                <script id="J_item"  type="text/x-html5-tmpl">
                <img class="avatar" height="50" width="50" src="../images/comment/{img}.jpg">
                <a class="s_4" href="#">举报</a>
                <div class="s_3">
                    <p class="p_1"><a class="user" target="blank">{name}</a><span class="date">{date}</span></p>
                    <p class="comment"><span>{content}</span></p>
                </div>
                </script>
            </ul>
        </div>
    </div>
</body>
<script>
    var DB_NAME = 'html5_storage_form_comment';                         // 数据库和表名
    var substitute = function (str, sub) {                          // 字符串格式化函数
        return str.replace(/\{(.+?)\}/g, function ($0, $1) {
            return $1 in sub ? sub[$1] : $0;
        });
    };
    var comment_list = document.querySelector('ul.comment-list'),
        first_item_el = document.getElementById('J_item'),
        item_tpl = first_item_el.innerHTML,
        submit_btn = document.querySelector('input[type="button"]'),
        textarea_el = document.querySelector('textarea'),
        tip_el = document.querySelector('span.tip'),
        storageDriver = window.openDatabase(DB_NAME, '1.0', 'html5 storage comment', 1048576);

    function build_item(data) {
        var li = document.createElement('li');
        li.className = 'clearfix';
        li.innerHTML = substitute(item_tpl, data);
        li.setAttribute('data-id', data.id);
        comment_list.insertBefore(li, first_item_el);
        first_item_el = li;
    };

    function store_data(data) {
        storageDriver.transaction(function (t) {                // 往数据库插入一条数据
            t.executeSql("INSERT INTO " + DB_NAME + " (img,name,date,content) VALUES (?,?,?,?);",
                [data.img, data.name, data.date, data.content],                // 传入保存数据
                function (transaction, resultSet) {
                    data.id = resultSet.insertId;               // 获取数据库返回的自增ID
                    build_item(data);
                    textarea_el.value = '';
                }, function (transaction, error) { show_error_tip(error.message); });         // 错误回调函数
        });
    };

    function show_error_tip(msg) {
        tip_el.style.display = 'inline';
        tip_el.innerHTML = msg;
        setTimeout(function () {
            tip_el.style.display = 'none';
        }, 1500);
    };

    submit_btn.addEventListener('click', function (e) {
        e.preventDefault();
        var content = textarea_el.value.trim();
        if (content.length) {
            store_data({
                img: (new Date().getTime()) % 5,
                name: '陌生人' + (new Date().getTime()) % 5,
                date: new Date().toLocaleString(),
                content: content
            });
        } else {
            show_error_tip('请填写留言内容');
        };
    }, false);

    storageDriver.transaction(function (t) {                        // 启动一个事务生成列表
        t.executeSql("CREATE TABLE IF NOT EXISTS " + DB_NAME +      // 创建数据表
                    "(id INTEGER PRIMARY KEY AUTOINCREMENT, " +     // 自增字段
                    "name TEXT NOT NULL, " +                       // 姓名字段
                    "date TEXT NOT NULL, " +                        // 时间字段
                    "content TEXT NOT NULL, " +                        // 内容字段
                    "img INTEGER DEFAULT 1)");                     // 照片字段
        t.executeSql("SELECT * FROM " + DB_NAME, [],                // 读物数据表
        function (t, results) {
            for (var i = 0, l = results.rows.length; i < l; i++) {
                build_item(results.rows.item(i));
            };
        });

        // t.executeSql("drop table " + DB_NAME);
    });
</script>
</html>

 

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 已采纳

    切换到console,看是不是出错了。。我这里测试正常

     

    已采纳该答案
    评论
    解决 1 无用
    打赏 举报

相关推荐 更多相似问题