要求：qq空间发表状态页面（在页面右上角显示你好，xxx用户）
1)状态页有若干条状态（样式内容自己随意发挥）
2)在输入框输入状态后，点击发表按钮，在所有说说最前面插入本条最新状态
3)每条状态下都有编辑按钮，点击后本条说说内容可被修改
4)每条状态下都有删除按钮，点击后弹框提示确定要删除本条说说吗，确定就删除，取消就不删除
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{width: 900px;height: 20px;background: red;}
h1{position: absolute;right: 0;top: 0;}
</style>
</head>
<body>
<input>
<button>发表</button>
<h1>你好，欢迎</h1>
<script>
onload = function(evt){
var e = evt || event;
//获取文本框和发表按钮
var txt = document.getElementsByTagName("input")[0];
var btn1 = document.getElementsByTagName("button")[0];
//设置btn的单击事件，即将弹文本框中的内容追加到div中，并把div追加到docu
btn1.onclick = function(evt){
var e = evt || event;
//创建元素
var div = document.createElement('div');
var btn2 = document.createElement("button")
var btn3 = btn2.cloneNode(false);
//追加元素
document.body.appendChild(div);
div.innerHTML = txt.value;
div.appendChild(btn2);
div.appendChild(btn3);
btn2.innerHTML = "编辑"
btn3.innerHTML = "删除"
//编辑按钮
btn2.onclick = function(){
var divs = document.getElementsByTagName("div");
txt.value = "";
div.innerHTML = prompt("修改我吧：")
div.appendChild(btn2);
div.appendChild(btn3);
btn2.innerHTML = "编辑"
btn3.innerHTML = "删除"
}
//删除按钮
btn3.onclick = function(evt){
var e = evt || event;
if(confirm("您真的不要我了吗？")){
document.body.removeChild(div);
}
}
}
}
</script>
</body>
</html>
网友评论