HTML5本地数据库写留言版功能

来源：互联网发布：ireport和java 编辑：程序博客网时间：2024/05/29 07:46
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            #box{                width:300px;                height:200px;                border:1px solid #000;            }            .text{                width:100%;                height:20px;                border:1px dashed #ccc;            }            .time{                width:60px;                height:20px;                float: right;                background:#ccc;            }        </style>    </head>    <body>        <textarea name="" id="" cols="30" rows="10"></textarea>        <input type="button"  value="发布" id="block"/>        <input type="button" value="删除" id="delete"/>        <div id="box">            <!--<p class="text">雨天</p>            <p class="time">04.21</p>-->        </div>    </body>    <script type="text/javascript">        var oTxt=document.getElementsByTagName('textarea')[0];        var oBox=document.getElementById('box');        var oBK=document.getElementById('block');        var oDE=document.getElementById('delete');        var arr=[];        var db=openDatabase('mydb','1.0','textlyb',1024*1024);        db.transaction(function (contex){            contex.executeSql('create table if not exists liuyanban(content)');        })        //页面加载完后显示所有数据        db.transaction(function (contex){            contex.executeSql('select * from liuyanban',[],function(con,data){                var len=data.rows.length,i;                for(var i=0;i<len;i++){                    arr.push(data.rows.item(i).content);                }                for(var i=0;i<len;i++){                    var aP=document.createElement('p');                    aP.innerHTML=data.rows.item(i).content;                    oBox.appendChild(aP);                }            })        })        oBK.onclick=function(){            //判断当输入框不为空时，插入数据            if(oTxt.value){                db.transaction(function (contex){                    contex.executeSql('insert into liuyanban(content) values("'+oTxt.value+'")');                    //每次输入之后清空                    oTxt.value='';                })                //逐条添加数据                db.transaction(function (contex){                    contex.executeSql('select * from liuyanban',[],function(con,data){                        var len=data.rows.length,i;                        arr.push(data.rows.item(len-1).content);                        var aP=document.createElement('p');                        aP.innerHTML=data.rows.item(len-1).content;                        oBox.appendChild(aP);                    })                })            }        }        //删除数据        oDE.onclick=function(){            db.transaction(function (contex){                contex.executeSql('delete from liuyanban');                location.reload();            })        }    </script></html>
阅读全文
0 0