留言板的简单写法

css代码
html,body,h2,ul,li,div,input{margin:0px;padding:0}
li{list-style:none;}
h2{text-align:center;}
#username{
width:600px;
height:50px;
margin:10px auto;
display: block;
}
#message{
width:600px;
height:100px;
margin:10px auto;
display: block;
}
#btn{
display: block;
width:100px;
height:40px;
text-align:center;
line-height:30px;
margin:10px auto;
}
li{display: flex;justify-content:space-between;align-items: center;
height:60px;
border-top:1px dashed #ccc;
}
html代码

留言板

• 
  
• 
  
  用户名1
  
  
  留言内容
  
  
  2017-21-12 43:34:22
  
  
• 
  
  用户名2
  
  
  留言内容
  
  
  2017-21-12 43:34:22
  
  
• 
  
  用户名3
  
  
  留言内容
  
  
  2017-21-12 43:34:22
  
  
• 
  
  用户名4
  
  
  留言内容
  
  
  2017-21-12 43:34:22
  
  

js代码
//获取Id函数的封装
function $(id){ return document.getElementById(id); } //获取事件源 var oUserName=$(‘username’);
var oMessage= $(‘message’); var oBtn=$(‘btn’);
var oList=$(‘list’);
//绑定事件
oBtn.οnclick=function(){
var sUserName=oUserName.value;
var sMessage=oMessage.value;
if(sUserName===”){
alert(“请留下你的名字”);
}else if(sMessage===”){
alert(‘请留下你 的脚步’);
}else{
sUserName=sUserName.replace(‘sb’,”丁一”);
while(sMessage.search(‘sb’)!=-1){
sMessage=sMessage.replace(‘sb’,”你很帅”);
}
}
var oLi=document.createElement(‘li’);
oLi.innerHTML=’

‘+sUserName+’

‘+’

‘+sMessage+’

‘+
‘

‘+formatDateToString()+’

‘;
oList.appendChild(oLi);
oMessage.value=”;
oUserName.value=”;

};
//将日期格式改为字符串
function formatDateToString(){
    var date=new Date();
    var iYear=date.getFullYear();
    var iMonth=date.getMonth()+1;
    var iDate=date.getDate();
    var iHours=date.getHours();
    var iMinutes=date.getMinutes();
    var iSeconds=date.getSeconds();
    return iYear+'-'+iMonth+'-'+iDate+'  '+iHours+':'+iMinutes+':'+iSeconds;
}