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

  • 相关阅读:
    CentOS7搭建FastDFS V5.11分布式文件系统(二)
    CentOS7搭建FastDFS V5.11分布式文件系统(一)
    JRebel最新破解激活版(IDEA自动部署插件)
    idea常用插件
    idea安装完成后要做的几件事(设置字体、编码、行号)
    IDEA修改Maven全局配置
    IDEA打开光标是粗黑色,backspace键、insert键点击无效的解决办法
    Hadoop build error java.lang.NoClassDefFoundError: org/sonatype/aether/graph/DependencyFilter
    Golang项目目录结构组织
    再看GOPATH
  • 原文地址:https://www.cnblogs.com/taoda/p/9371390.html
Copyright © 2011-2022 走看看