• 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');
    }

  • 相关阅读:
    添加linux alias
    vs2019 switch语句快捷键列出枚举 及常用快捷键
    generic 泛型使用
    华为云 安装centos8.2
    linux 安装redis,mysql,netcore
    react按需加载
    工具类注册基本写法
    vue项目使用深拷贝
    react+less+antd 复习搭建(一)
    python 1 cmd进入工作
  • 原文地址:https://www.cnblogs.com/taoda/p/9371390.html
Copyright © 2020-2023  润新知