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

  • 相关阅读:
    BootStrap 智能表单系列 五 表单依赖插件处理
    BootStrap 智能表单系列 四 表单布局介绍
    BootStrap 智能表单系列 三 分块表单配置的介绍
    LinQ.OrderBy 多个字段排序
    ABP.NET CORE 遇到的小问题
    vs2017断点无效 当前不会命中断点 已设置断点单还未绑定
    DateTime 取年月日;字符串截取
    C# DateTime 多个时间段循环相加;两个时间段求差值
    ABP.Net Core 小白使用教程 附件:ABP.NET中文文档
    ASP.NET MVC+Easyui 后台管理系统的图片上传
  • 原文地址:https://www.cnblogs.com/taoda/p/9371390.html
Copyright © 2011-2022 走看看