与山鬼为敌 2021-03-31 12:00 采纳率: 62.5%
浏览 34
已采纳

JS的简单评论功能 初学

老师留的 跟讲的完全没关系啊 求大神解答一下

  • 写回答

2条回答 默认 最新

  • wanmeikakaxi 2021-03-31 13:42
    关注

    采纳吧

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>评论留言</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:black;}
#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:300px; height:300px; 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;}
#comment{overflow:hidden;}
#comment p{margin-bottom:10px; padding:10px; border-radius:5px;}
#comment p:nth-child(odd){border:1px solid #cd723c; background:#fddbdb;}
#comment p:nth-child(even){border:1px solid #cd723c; background:#fddbdb;}
#comment p .right{text-align:right;}
#comment p .msg{width:738px;}
#comment p .datetime{width:200px; color:#999; text-align:right;}



</style>
<script type="text/javascript">
 var named;
 function delete1(id)
 {
	 localStorage.removeItem(id);
	 this.Storage.writeData();
 }
 function prom() {

	 var name = prompt("请输入您的名字", "");
	 named = name;
	 if (named)

	 {

		 alert("欢迎您：" + name);
		 document.getElementById("shangtian").style.display = "none";
		 document.getElementById("ritian").value = named;

	 }
	 else {
		 document.getElementById("ritian").value = "匿名发言者";
	 }

 }
var Storage =
{
  saveData:function()
  {

		  var data = document.querySelector("#post textarea");
	  if(data.value != "")
	  {
		  var time = new Date().getTime() + Math.random() * 5;
		  if (named) {
			  localStorage.setItem(time, data.value + "|" + named + "|" + this.getDateTime());
		  }
		  else
		  {
			  localStorage.setItem(time, data.value + "|" + "匿名发言者" + "|" + this.getDateTime());
		  }

		  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 += "<span style=>" + data[1] + "<span style=\"float:right\">" + data[2] + "</span><p><span class=\"msg\">" + data[0] + "<input style=\"float:right;border:none;border-radius:5px;padding:3px;\" id=\"clearBt\" type=\"button\" onclick=\"delete1(" + localStorage.key(i) + ");\" value=\"删除\"/>" + "</span></p>";
	  }
	  document.getElementById("comment").innerHTML = dataHtml;
  },
  clearData:function()
  {
	  if(localStorage.length > 0)
	  {
		  if(window.confirm("清空后不可恢复，是否确认清空？"))
		  {
			  localStorage.clear();
			  this.writeData();
		  }
	  }
	  else
	 {
		 alert("没有需要清空的数据！");
	  }
  },
  getDateTime:function()
  {
	  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();
  document.getElementById("postBt").onclick = function(){Storage.saveData();}
  document.getElementById("clearBt").onclick = function(){Storage.clearData();}
}





</script>
</head>

<body>

<h1>评论留言</h1>

<div id="content">
	<div id="post">
		<div>
			昵称：<input type="submit" id="shangtian" name="Submit3" style="border:none; background-color:#fff;" value="匿名" onClick="prom()" />
			<input type="text" id="ritian" style="border:none;"   onclick="prom()"/>
		</div>
		<div>
			<textarea class="transition"></textarea>
		</div>
		<input id="postBt" type="button" style="border:none; background-color:#3EADC5; color:white;border-radius:5px; width:80px; height:30px;" value="发表留言"/>
		<input id="clearBt" type="button" style="border:none; background-color:#3EADC5; color:white;border-radius:5px; width:80px; height:30px;" value="清空"/>
	</div>
	<div id="comment"></div>
</div>
  
  
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 两台交换机分别是trunk接口和access接口为何无法通信，通信过程是如何？
  • ¥15 C语言使用vscode编码错误
  • ¥15 用KSV5转成本时，如何不生成那笔中间凭证
  • ¥20 ensp怎么配置让PC1和PC2通讯上
  • ¥50 有没有适合匹配类似图中的运动规律的图像处理算法
  • ¥15 dnat基础问题,本机发出,别人返回的包,不能命中
  • ¥15 请各位帮我看看是哪里出了问题
  • ¥15 vs2019的js智能提示
  • ¥15 关于#开发语言#的问题：FDTD建模问题图中代码没有报错，但是模型却变透明了
  • ¥15 uniapp的h5项目写一个抽奖动画