我想在一个页面上用HTML代码添加一个小小留言板,能够告诉我怎么做么...

发布网友发布时间：2022-05-02 20:11

共3个回答

懂视网时间：2022-04-20 06:49

html5实现留言板的代码实例分享

<!DOCTYPE HTML>
<html>
 <head>
 <meta charset="gb2312">
 <title>HTML5--JS API-本地存储 Web留言板</title>
 <style type="text/css">
 *{margin:0; padding:0;}
 body,input{font-size:14px; line-height:24px; color:#333; font-family:Microsoft yahei, Song, Arial, Helvetica, Tahoma, Geneva;}
 h1{margin-bottom:15px; height:100px; line-height:100px; text-align:center; font-size:24px; color:#fff; background:#0051a1;}
 #content #post,#comment p{zoom:1;}
 #content #post:after,#comment p:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';}
 .transition{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; 
 -o-transition:all 0.5s linear; -ms-transition:all 0.5s linear; transition:all 0.5s linear;}
 #content{margin:0 auto; width:960px; overflow:hidden;}
 #content #post{margin-bottom:15px; padding-bottom:15px; border-bottom:1px #d4d4d4 dashed;}
 #content #post textarea{display:block; margin-bottom:10px; padding:5px; width:948px; height:390px; 
 border:1px #d1d1d1 solid; border-radius:5px; resize:none; outline:none;}
 #content #post textarea:hover{border:1px #9bdf70 solid; background:#f0fbeb;}
 #content #post #postBt,#content #post #clearBt{margin-left:5px; padding:3px; float:right;}
 #comment{overflow:hidden;}
 #comment p{margin-bottom:10px; padding:10px; border-radius:5px;}
 #comment p:nth-child(odd){border:1px solid #e3e197; background:#ffd;}
 #comment p:nth-child(even){border:1px solid #adcd3c; background:#f2fddb;}
 #comment p span{display:inline; float:left;}
 #comment p .msg{width:738px;}
 #comment p .datetime{width:200px; color:#999; text-align:right;}
 </style>
 <script type="text/javascript">
 var Storage =
 {
  saveData:function()//保存数据
  {
  var data = document.querySelector("#post textarea");
  if(data.value != "")
  {
   var time = new Date().getTime() + Math.random() * 5;//getTime是Date对象中的方法，作用是返回 1970年01月01日至今的毫秒数
   localStorage.setItem(time, data.value + "|" + this.getDateTime());//将毫秒数存入Key值中，可以降低Key值重复率
   data.value = "";
   this.writeData();
  }
  else
  {
   alert("请填写您的留言！");
  }
  },
  writeData:function()//

输出数据 { var dataHtml = "", data = ""; for(var i = localStorage.length-1; i >= 0; i--)//效率更高的循环方法 { data = localStorage.getItem(localStorage.key(i)).split("|"); dataHtml += "<p><span class="msg">" + data[0] + "</span><span class="datetime">" + data[1] + "</span></p>"; } document.getElementById("comment").innerHTML = dataHtml; }, clearData:function()//清空数据 { if(localStorage.length > 0) { if(window.confirm("清空后不可恢复，是否确认清空？")) { localStorage.clear(); this.writeData(); } } else { alert("没有需要清空的数据！"); } }, getDateTime:function()//获取日期时间，例如 2012-03-08 12:58:58 { var isZero = function(num)//私有方法，自动补零 { if(num < 10) { num = "0" + num; } return num; } var d = new Date(); return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + " " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds()); } } window.onload = function() { Storage.writeData();//当打开页面的时候，先将localStorage中的数据输出一边，如果没有数据，则输出空 document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件，作用是将localStorage中的数据输出 document.getElementById("clearBt").onclick = function(){Storage.clearData();}//清空所有已保存的数据 } </script> </head> <body> <h1>HTML5--JS API-本地存储 Web留言板</h1> <div id="content"> <div id="post"> <textarea class="transition"></textarea> <input id="postBt" type="button" value="发表评论"/> <input id="clearBt" type="button" value="清空所有已保存的数据"/> </div> <div id="comment"></div> </div> </body> </html>

热心网友时间：2022-04-20 03:57

HTML 代码留言板一个超简陋的留言版免费留言板 //评论内容不能保存因为涉及到数据库
<script>
function Ok_OnClick(event)
{
if(document.getElementsByName("textName")[0].value == ""){
alert("请输入内容");
return;
}//getElementById
var table;
var tableList = document.getElementsByTagName("TABLE");
for(var i = 0 ; i < tableList.length ; i++) {
if(tableList[i].name == "tableName") {
table = tableList[i]
break;
}
}
var value = document.getElementsByName("textName")[0].value;
var index = table.rows.length;
table.insertRow(index);
table.rows(index).insertCell(0);
table.rows(index).cells(0).innerText = value;
document.getElementsByName("textName")[0].value = "";
}
</script>

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>留言版</TITLE>
<STYLE>
td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
div{font-size:13px;}
th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;background-color:#CCCCCC}
table{border:1px solid black;font-size:13px;}
</STYLE>
</HEAD>

<BODY oncontextmenu="return false;"">
<TABLE name="tableName" width="70%" align="center" cellpadding="0" cellspacing="0">
<TR>
<TH colspan="4" style="">留言版</TH>
</TR>
<TR>
<TD>呵呵，一个超简陋的留言版 ^_^</TD>
</TR>
</TABLE>
<BR>
<div align="center">

<textarea rows="2" name="textName" id="textId" cols="20"
style="width: 70%; clip: rect(0pt, 47pt, 18pt, 0pt); font-family: 宋体; font-size: 10pt; font-weight: normal; font-style: normal;text-align: left; vertical-align: middle; text-indent: 0; color: #000000; background-attachment: fixed; background-color: #EEEEEE; border: 1px solid #0xf8f8f8">
</textarea>

</div>
<BR>
<div align="center">
<input type="button" value="提交" onclick="return Ok_OnClick(window.event);"
style="align:center ; width:60 ; height: 21; clip: rect(0pt, 47pt, 18pt, 0pt); font-family: 宋体; font-size: 10pt; font-weight: normal; font-style: normal; cursor: hand; text-align: center; vertical-align: middle; text-indent: 0; color: #000000; background-attachment: fixed; background-color: #d8d8d8; border: 1px solid #59b4f7">

</div>
</BODY>
</HTML>

热心网友时间：2022-04-20 05:15

用google搜一下CBox或者shootmix（百度无效），试一下这两个网络留言板