<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function ()
{
var otext = document.getElementById('text1');
var obtn1 = document.getElementsByTagName('input')[1];
var obtn2 = document.getElementsByTagName('input')[2];
var oul = document.getElementById('ul1');
var flag = 1;
obtn1.onclick = function ()
{
if(!otext.value)
{
return ;
}
var oli = document.createElement('li');
oli.innerHTML = otext.value;
if(oul.children[0])
{
oul.insertBefore(oli,oul.children[0]);
}
else
{
oul.appendChild(oli);
}
otext.value = '';
for( var i = 0 ;i < oul.children.length; i++)
{
oul.children[i].onclick = function ()
{
if(flag)
{
this.mark = '1';
this.style.background = 'yellow';
}
else
{
this.mark = '';
this.style.background = '';
}
flag = !flag;
}
}
};
obtn2.onclick = function ()
{
for(var i = 0; i < oul.children.length; i++)
{
if(oul.children[i].mark)
{
oul.removeChild(oul.children[i]);
i--;
}
}
}
};
</script>
</head>
<body>
<input type="text" id="text1">
<input type="button" value="留言">
<input type="button" value="批量删除">
<ul id="ul1">
</ul>
</body>
</html>
