js簡易留言板
阿新 • • 發佈：2017-12-13
() != date() turn eth create rip eply doc
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" type="text/css" href="css/reply.css"/> <body> <div id="logo"> <textarea id=‘dt‘></textarea> <p id="pl">留言(0)</p> </div> </body> <script type="text/javascript" src="js/reply.js"></script> </html>
上面是主頁代碼下面是js
var pl=document.getElementById(‘pl‘); var dt=document.getElementById(‘dt‘); varflag=0//留言個數 var str =date();//當前時間 pl.onclick=function(){ if(dt.value!=""){ //判斷用戶是否輸入內容 flag++; pl.innerHTML="留言("+flag+")"; //留言+1 var log=document.createElement(‘div‘);// 創建div document.body.appendChild(log);// body添加該節點 var building=document.createElement(‘span‘);//創建顯示樓層節點 log.appendChild(building); var date=document.createElement(‘span‘);//顯示用戶節點 log.appendChild(date); var matter=document.createElement(‘span‘);//顯示留言內容節點 log.appendChild(matter); var del=document.createElement(‘span‘);//顯示刪除節點 log.appendChild(del); model(log,building,date,matter,dt,del); //顯示div樣式 dt.value="";//清空上次留言內容 } else { alert("請輸入內容!"); } } function model(log,buiding,date,matter,dt,del){ //新節點的樣式 del.style.width="35px"; del.style.height="30px"; del.style.background=""; del.style.float="left"; del.style.marginTop="15px"; del.innerHTML="刪除" del.style.color="#888888"; del.style.cursor="pointer"; del.onclick=function(){ //為刪除添加事件 if (confirm("確定刪除此留言？")){ document.body.removeChild(this.parentNode);//this.parenNode:定位到該節點的父節點div flag--; pl.innerHTML="留言("+flag+")";//留言-- var div=document.body.children; //body的所有節點數 for(var i=div.length-1;i>0;i--)//改變所有孩子節點的第一個子節點的（顯示樓層的節點）樣式 { div[i].firstChild.innerHTML=i-1+"樓"; } }; } matter.style.width="150px"; matter.style.height="100px"; matter.style.background=""; matter.style.float="left"; matter.style.fontSize="15px" matter.innerHTML="  "+dt.value; buiding.style.width="100px"; buiding.style.height="100px"; buiding.style.background=""; buiding.style.float="left"; buiding.style.fontSize="40px"; buiding.style.fontFamily="DFKai-SB" buiding.style.color="#DDAA00" buiding.style.textAlign="center" buiding.innerHTML=flag+"樓"; buiding.style.fontWeight="bold"; date.style.color="#444444" date.style.width="100px"; date.style.height="100px"; date.style.float="left"; date.style.fontWeight="bold" date.style.background=""; date.innerHTML=str+"<br>"+"      用戶"+flag log.style.width="400px"; log.style.height="100px"; log.style.background=""; log.style.marginTop="20px"; } function date(){ //獲取當前的年月日返回 var data=new Date(); var str=data.getFullYear()+"-"+Number(data.getMonth()+1) str+="-"+data.getDate()+"<br>      "+data.getHours()+":"+data.getMinutes(); return str; }
*{ margin: 0 auto; background: #FFEE99; } #dt{ border: double 1px#000000; size: a3; width:298px ; height: 98px; color: #000000; } #logo{ background: red; height: 100px; width: 300px; align="center"; margin-top: 20px; } #pl{ float: right; color: #888888; font-size: 12px; cursor:pointer; }
運行截圖
js簡易留言板