js实例：留言板

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{margin: 0;padding: 0;text-decoration: none;}
body{background: #c4e8ff;}
#box{width: 600px;height: 180px;background: greenyellow;margin: 50px auto;margin-bottom: 0;}
textarea{display: block;width: 600px;height: 150px;border-radius: 5px;outline: none;font-size: 24px;font-family: "微软雅黑";font-weight: bold;text-indent: 3px;padding: 5px;box-sizing: border-box;}
buttom{display:block;width: 100px;height: 30px;background: #5ccee6;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;cursor: pointer;float: right;}

#box1{width: 600px;min-height: 500px;background: orange;margin: 0 auto;}
#sp{height: 38px;width: 600px;font-weight: bold;background: #fff;line-height: 38px;margin: 0 auto;}
#box1>div{width: 600px;height: 100px;display: flex;justify-content: space-around;margin-top: 10px;background: #fff;}
#box1>div>p{width: 500px;height: 100px;padding: 5px;box-sizing: border-box;overflow: hidden;font-family: "微软雅黑";font-weight: bold;position: relative;}
#box1>div>div{display: block;width: 100px;height: 100px;box-sizing: border-box;text-align: center;color: red;line-height: 100px;}
#box1 span{display:block;font-size: 12px;width: 200px;height: 20px;color: gray;position: absolute;top: 80px;}

</style>
<script>

var btn= document.getElementById("btn");

function add(){

var box1 = document.getElementById("box1");
var tea = document.getElementById("tear");
//console.log(tea)

var Div = document.createElement("div");
var p = document.createElement("p");
var a = document.createElement("div");
var span = document.createElement("span");

var today = new Date();
var year = today.getFullYear();
var month = today.getMonth()+1;
var day = today.getDate();
var hours = today.getHours();
var minute = today.getMinutes();
var time = "发布时间："+year+"年"+month+"月"+day+"日"+hours+":"+minute
console.log(today.toLocaleString())

console.log(year,month,day,hours,minute,time)
p.innerHTML = tea.value;
console.log(tea.value)
tea.value = "";
a.innerHTML = "<a href='javascript:;' onclick='delate(this)'> 删除 </a>";
span.innerHTML = time

box1.insertBefore(Div,box1.children[0]);
Div.appendChild(p);
Div.appendChild(a);
p.appendChild(span)

}

document.onkeydown = function (e) {//按键信息对象以函数参数的形式传递进来了，就是那个e
var code = e.charCode || e.keyCode; //取出按键信息中的按键代码(大部分浏览器通过keyCode属性获取按键代码，但少部分浏览器使用的却是charCode)
// console.log(code)
// var aaa= event||e
// var code = aaa.keyCode;
console.log(code)
if(code == 13 || code == 17){

add()

}

}

function delate(nodes){

var a = nodes.parentNode.parentNode;
a.parentNode.removeChild(a);
}

</script>
<body>
<form id="box">
<textarea name="" rows="" cols="" id="tear"></textarea>
<buttom id="btn" onclick="add()">发表</buttom>
</form>

<div id="sp">全部动态</div>

<div id="box1">



</div>

</body>
</html>

猜你喜欢