zoukankan      html  css  js  c++  java
  • html,css,js,简单的网页留言板

    效果如图:

    实现代码如下:

    html代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>简单的网页留言板</title>
    <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
    <h1>简单的网页留言板</h1>
    <textarea id="dome" cols="60" rows="10"></textarea>
    <br/>
    <input type="button" value="保存" onclick="saveStorage('dome');">
    <input type="button" value="清空" onclick="clearStorage('msg');">
    <input type="button" value="读取" onclick="loadStorage('msg');">
    <hr>
    <p id="msg"></p>
    </body>
    </html>

    index.js代码:

    ///**
    // * Created by Administrator on 2014/11/27.
    // */
    //function saveStorage(id){
    // var data = document.getElementById(id).value;
    // var time = new Date().getTime();
    // localStorage.setItem(time,data);
    // alert("数据已经被保存!");
    // loadStorage('msg');
    //}
    //function loadStorage(id){
    // var reselt = '<table border="1">';
    // for(var i=0;i<localStorage.length;i++)
    // {
    // var key = localStorage.key(i);
    // var value = localStorage.getItem(key);
    // var date = new Date();
    // date.setTime(key);
    // var datestr = date.toGMTString();
    // reselt += '<tr><td>'+'这是第'+i+'条数据</td><td>'+value+'</td><td>'+datestr+'</td></tr>';
    // }
    // reselt += '</table>';
    // var target = document.getElementById(id);
    // target.innerHTML = reselt;
    //}
    //function clearStorage(id){
    // localStorage.clear();
    // alert("数据已经被成功删除!");
    // loadStorage('msg');
    //}
    /**
    * Created by Administrator on 2014/11/27.
    */
    function saveStorage(id){
    var data = document.getElementById(id).value;
    var time = new Date().getTime();
    localStorage.setItem(time,data);
    alert("数据已经被保存!");
    loadStorage('msg');
    }
    function loadStorage(id){
    var reselt = '<table border="1">';
    for(var i=0;i<localStorage.length;i++)
    {
    var value = localStorage.getItem( localStorage.key(i));
    var date = new Date();
    date.setTime( localStorage.key(i));
    var datestr = date.toGMTString();
    reselt += '<tr><td>'+'这是第'+i+'条数据</td><td>'+ localStorage.getItem( localStorage.key(i))+'</td><td>'+datestr+'</td></tr>';
    }
    reselt += '</table>';
    var target = document.getElementById(id);
    target.innerHTML = reselt;
    }
    function clearStorage(id){
    localStorage.clear();
    alert("数据已经被成功删除!");
    loadStorage('msg');
    }

  • 相关阅读:
    Windows CMD中 find命令(字符串查找)
    网络地址转换静态NAT
    网络地址转换静态NAT
    Android 的暗示 hint 用法
    Android 的暗示 hint 用法
    SQL Server 扩展事件
    SQL Server 扩展事件
    SqlServer中Exists的使用
    SqlServer中Exists的使用
    数据库还原,System.Data.SqlClient.SqlError: 因为数据库正在使用,所以无法获得对数据库的独占访问权。
  • 原文地址:https://www.cnblogs.com/taoda/p/9371390.html
Copyright © 2011-2022 走看看