<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div >
<ul><li>信息<span id="msg_num"></span>条</li></ul>
<ul id="msg"></ul>
</div>
<textarea rows='10' cols="40" id="user_input"></textarea>
<input type="submit" id="user_submit" name="user_submit" value="提交">
<script language="javascript">
var Observer=(function(){
var _message={};
return {
regist:function(type,fn){
if(typeof _message[type]==='undefined'){
_message[type]=[fn];
}else{
_message[type].push(fn);
}
},
fire:function(type,args){
if(!_message[type])
return;
var events={
type:type,
args:args||{}
},i=0,len=_message[type].length;
for(;i<len;i++){
_message[type][i].call(this,events);
}
},
remove:function(type,fn){
if(_message[type] instanceof Array){
var i=_message[type].length-1;
for(;i>=0;i--){
_message[type][i]===fn && _message[type].splice(i,1);
}
}
}
}
})();
function $(id){
return document.getElementById(id);
}
(function(){
function addMsgItem(e){
var text=e.args.text,
ul=$('msg'),
li=document.createElement('li'),
span=document.createElement('span');
li.innerHTML=text;
span.innerHTML='<input type="button" value="删除">';
span.onclick=function(){
ul.removeChild(li);
Observer.fire('removeCommentMessage',{
num:-1
});
};
li.appendChild(span);
ul.appendChild(li);
}
Observer.regist('addCommentMessage',addMsgItem);
})();
(function(){
$('msg_num').innerHTML=0;
function changeMsgNum(e){
var num=parseInt(e.args.num);
$('msg_num').innerHTML=parseInt($('msg_num').innerHTML)+num;
}
Observer.regist('addCommentMessage',changeMsgNum);
Observer.regist('removeCommentMessage',changeMsgNum);
})();
(function(){
$('user_submit').onclick=function(){
var text=$('user_input');
if(text.value===''){
return;
}
Observer.fire('addCommentMessage',{
text:text.value,
num:1
});
text.value='';
};
})();
</script>
</body>
</html>
|