欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 前端技术 > HTML >内容正文

HTML

html,css,js,简单的网页留言板

发布时间:2022/11/16 HTML 28 老码农
如意编程网 收集整理的这篇文章主要介绍了 html,css,js,简单的网页留言板 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

效果如图:

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

 

总结

以上是如意编程网为你收集整理的html,css,js,简单的网页留言板的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。