<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> </Head> <Linkrel= "stylesheet"type= "Text/css"href= "Css/reply.css"/> <Body> <DivID= "logo"> <textareaID= ' DT '></textarea> <PID= "PL">Comments (0)</P> </Div> </Body> <Scripttype= "Text/javascript"src= "Js/reply.js"></Script></HTML>
Above is the homepage code below is JS
varPl=document.getelementbyid (' pl ');varDt=document.getelementbyid (' DT ');varFlag=0//Number of messagesvarSTR =date ();//Current Timepl.onclick=function(){ if(dt.value!= "") {//determine if the user is entering contentflag++; Pl.innerhtml= "Message (" +flag+ ")";//message +1 varLog=document.createelement (' div ');//Create DivDocument.body.appendChild (log);//body to add the node varBuilding=document.createelement (' span ');//Create a show floor nodeLog.appendchild (building); varDate=document.createelement (' span ');//Show user Nodeslog.appendchild (date); varMatter=document.createelement (' span ');//Show message Content nodeLog.appendchild (matter); varDel=document.createelement (' span ');//Show Delete nodeLog.appendchild (del); Model (Log,building,date,matter,dt,del); //Show div StyleDt.value= "";//clear Last Message content } Else{alert ("Please enter the content!"); } }functionModel (Log,buiding,date,matter,dt,del) {//style of the new nodeDel.style.width= "35px"; Del.style.height= "30px"; Del.style.background=""; Del.style.float= "Left"; Del.style.marginTop= "15px"; Del.innerhtml= "Delete"Del.style.color= "#888888"; Del.style.cursor= "Pointer"; Del.onclick=function(){//Add an event for delete if(Confirm ("OK to delete this message? ") {document.body.removeChild ( This. parentnode);//This.parennode: Navigates to the parent node of the node divflag--; Pl.innerhtml= "Message (" +flag+ ")";//Message-- varDiv=document.body.children;//the number of all nodes in the body for(vari=div.length-1;i>0;i--)//Change the first child node of all children (show the node of the floor) style{div[i].firstchild.innerhtml=i-1+ "Building"; } }; } matter.style.width= "150px"; Matter.style.height= "100px"; Matter.style.background=""; Matter.style.float= "Left"; Matter.style.fontSize= "15px"matter.innerhtml= "&NBSP&NBSP" +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+ "Building"; 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>" + "       user" +Flag Log.style.width= "400px"; Log.style.height= "100px"; Log.style.background=""; Log.style.marginTop= "20px";}functionDate () {//Gets the current month-date return varData=NewDate (); varStr=data.getfullyear () + "-" +number (Data.getmonth () +1) Str+ = "-" +data.getdate () + "<br>      " +data.getHours () + ":" +data.getminutes (); returnstr; }
*{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; }
Run
JS Simple Message Board