<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>document</title> | |
<style type="text/css"> | |
.wrap { | |
width: 400px; | |
margin: 30px auto; | |
} | |
textarea { | |
display: block; | |
width: 100%; | |
height: 60px; | |
} | |
input { | |
display: block; | |
width: 60%; | |
margin: 15px auto; | |
} | |
li { | |
padding: 5px 10px; | |
position: relative; | |
word-break: break-all; | |
} | |
.red { | |
color: #000; | |
background: #f1f1f1; | |
} | |
.pink { | |
color: #000; | |
background: #ccc; | |
} | |
a { | |
position: absolute; | |
right: 0; | |
top: -20px; | |
background: yellow; | |
color: #fff; | |
} | |
#list { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
font: 14px/26px "宋体"; | |
} | |
.clos { | |
position: absolute; | |
top: 0; | |
right: -50px; | |
width: 50px; | |
color: #fff; | |
background: #000; | |
padding: 5px 0; | |
text-decoration: none; | |
text-align: center; | |
} | |
.clos:hover { | |
} | |
</style> | |
<script type="text/javascript"> | |
window.onload = function(){ | |
var btn = document.queryselector('input'); | |
var text = document.queryselector('textarea'); | |
var list = document.queryselector('#list'); | |
var colors = ["red","pink"]; | |
var nub = 0; | |
btn.onclick = function(){ | |
if(text.value.trim() == ""){ | |
alert("输入内容不能为空"); | |
return false; | |
} | |
var li = document.createelement("li"); | |
li.innerhtml = text.value; | |
// li.classname = colors[nub%colors.length]; | |
/* 判断a标签已经被添加,就让a标签显示出来,否则就添加 */ | |
if(list.children[0]&&list.children[0].classname=="red"){ | |
li.classname = "pink"; | |
} else { | |
li.classname = "red"; | |
} | |
var a = null; | |
li.onmouseover = function(){ | |
if(a) { | |
a.style.display = "block"; | |
} else { | |
a = document.createelement("a"); | |
a.href = "javascript:;"; | |
a.classname = "clos"; | |
a.innerhtml = "删除"; | |
a.onclick = function (){ | |
list.removechild(this.parentnode); | |
}; | |
this.appendchild(a); | |
} | |
}; | |
li.onmouseout = function(){ | |
a.style.display = "none"; | |
}; | |
list.insertbefore(li,list.children[0]); | |
text.value = ""; | |
nub++; | |
}; | |
}; | |
</script> | |
</head> | |
<body> | |
<div> | |
<div class="wrap"> | |
<textarea id="text"></textarea> | |
<input type="button" value="留言"> | |
<ul id="list"></ul> | |
</div> | |
</body> | |
</html> | |
如对本文有疑问, 点击进行留言回复!!
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论