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="保存" οnclick="saveStorage('dome');">
<input type="button" value="清空" οnclick="clearStorage('msg');">
<input type="button" value="读取" οnclick="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');
}
转载于:https://www.cnblogs.com/taoda/p/9371390.html
html,css,js,简单的网页留言板相关推荐
- 学校留言板网页html和css,html,css,js,简单的网页留言板
效果如图: 实现代码如下: html代码: 简单的网页留言板 简单的网页留言板 index.js代码: ///** // * Created by Administrator on 2014/11/2 ...
- 简单的’网页留言板‘案列
简单的网页留言板,显示实时时间,内容为空禁止发布 成品如下 代码如下: <!DOCTYPE html> <html lang="en"><head&g ...
- HTML5期末大作业:网站——美丽家乡(南京介绍7个页面) 家乡文化介绍 学生DW网页设计作业源码(HTML+CSS+JS) ~学生dreamweaver网页设计作业成品
HTML期末大作业~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到 ...
- 第一次预习作业(html,css,js简单介绍,HTML常用标签)
目录 一.HTML,CSS,JS,简单介绍 1.HTML 2.CSS 3.JS 二.HTML常用标签 一.HTML,CSS,JS,简单介绍 1.HTML HTML 是用来描述网页的一种语言. HTML ...
- 用php制作网页留言板的分页
1.用php做一个简单的留言板 用php做一个简单的留言板 2.用php制作网页留言板的分页 效果图 核心步骤: 使用limit限制从数据库查询条数: 根据页面a标签中的href?page在使用预定义 ...
- html语言制作留言条,利用DIV+CSS制作右下角弹出留言板
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 利用DIV+CSS制作右下角弹出留言板 a ...
- table固定列html5,css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...
- 使用html和css制作简单的网页
使用html和css制作简单的网页 创作不易,可否给作者点个赞再走 html部分: /** * author 阿木木 * date 09/26 10:23 * / <html><he ...
- php简易留言板功能,简单实现PHP留言板功能
这篇文章主要介绍了简单实现PHP留言板功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 这篇文章主要教大家如何简单实现PHP留言板功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一 ...
最新文章
- 脊回归(Ridge Regression) 岭回归
- oracle 一个实例创建多个数据库_oracle 一个实例创建多个数据库
- mysql存储netcdf数据_关于NetCDF与HDF5存储科学数据的观点?
- 二十五、数据挖掘之离群点检测
- nginx php mysql 部署_Linux+Nginx+Mysql+Php运维部署
- 固体加热_干货分享| |固体氧化物燃料电池
- 培智计算机教学论文,【培智数学论文】_培智数学教学论文
- Unity中的场景切换
- 卡莱特led显示屏调试教程_镇康室内LED显示屏型号
- cpu开机就是60℃_注意,制冷机组开机前这些检查很重要
- [原创]python MySQLdb在windows环境下的安装、出错问题以及解决办法
- 刷爆抖音,4万好评!这本 Python 3.6 的书又断货了...
- import pandas as pd什么意思_【医学名词】多发性骨髓瘤MR、SD、PD分别是什么意思?...
- 【AlphaGo之后会是什么】一文读懂人工智能打德扑
- 2022.7-8文献笔记
- e4a 安卓获取ROOT权限的方法思路 转载
- 11.1 身在大学,不追浮云——《逆袭大学》连载
- STM32Cube程序使用 DFU 烧写后Leave DFUMode无法运行程序
- WAP版手机外卖订餐系统设计与实现(含论文)SSM
- java 环境变量的设置