<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
width: 100%;
height: 100%;
background-image: url("img/la.jpg");
/*background-repeat: no-repeat;*/
}
a {
text-decoration: none;
}
.wrap {
width: 600px;
height: 200px;
border: 1px solid black;
border-radius: 5px;
margin: 0 auto;
}
.top {
height: 40px;
width: 100%;
overflow: hidden;
}
.top-left {
float: left;
width: 80px;
height: 100%;
line-height: 40px;
text-indent: 2em;
color: orange;
}
.top-right {
float: right;
width: 60%;
height: 100%;
text-align: right;
padding-right: 20px;
line-height: 40px;
}
.middle {
width: 100%;
height: 100px;
}
.middle>textarea {
width: 570px;
height: 90px;
margin-left: 13px;
border: 1px solid darkgray;
resize: none;
}
.bottom {
width: 100%;
height: 60px;
overflow: hidden;
}
.bottom-left {
height: 100%;
width: 350px;
float: left;
}
.bottom-left>div {
float: left;
width: 70px;
line-height: 50px;
text-align: center;
}
.bottom-left>div:hover {
color: orange;
}
.bottom-right {
float: right;
width: 80px;
height: 40px;
background-color: orange;
color: white;
border-radius: 5px;
margin-right: 10px;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-top: 6px;
}
.message {
width: 600px;
height: 1000px;
border: 1px solid darkgray;
margin: 0 auto;
border-radius: 5px;
}
h1 {
/* 200px;*/
/*margin: 0 auto;*/
text-align: center;
}
.big {
width: 580px;
border: 1px solid #CCCCCC;
border-radius: 5px;
margin-left: 9px;
margin-top: 10px;
position: relative;
}
.name {
width: 100px;
height: 30px;
line-height: 30px;
padding-left: 10px;
font-weight: bold;
}
.mes {
width: 560px;
padding-left: 10px;
padding-right: 10px;
line-height: 20px;
}
.date {
width: 200px;
height: 30px;
line-height: 30px;
padding-left: 10px;
color: gainsboro;
}
.close {
width: 30px;
height: 30px;
position: absolute;
top: 10px;
right: -10px;
}
</style>
</head>
<body>
<h1>简易留言板</h1>
<div class="wrap">
<div class="top">
<div class="top-left">
LOGO
</div>
<div class="top-right">
<a href="####" id="a">点击领取红包</a>
</div>
</div>
<div class="middle">
<textarea></textarea>
</div>
<div class="bottom">
<div class="bottom-left">
<div>表情</div>
<div>图片</div>
<div>视频</div>
<div>话题</div>
<div>文章</div>
</div>
<div class="bottom-right" onclick="func()">
发布
</div>
</div>
</div>
<div class="message">
</div>
<script type="text/javascript">
// 创建div的函数
function createDiv(c) {
var div = document.createElement("div");
div.setAttribute("class", c);
return div;
}
var message = document.getElementsByClassName("message")[0];
var textValue = document.querySelector(".middle>textarea");
var topRight = document.querySelector(".top-right");
var textLimit = 140;
textValue.onfocus = function() {
topRight.innerHTML = "还可以输入" + textLimit + "字";
topRight.style.color = "#cccccc";
}
textValue.onkeyup = function() {
textLimit = 140 - textValue.value.length;
topRight.innerHTML = "还可以输入" + textLimit + "字";
if (textLimit < 0) {
topRight.innerHTML = "超出" + (textValue.value.length - 140) + "字，请修改";
}
}
function fadu() {
var big = createDiv("big");
var name1 = createDiv("name");
name1.innerHTML = "发布者";
var mes = createDiv("mes");
mes.innerHTML = textValue.value;
var now = new Date();
var month = now.getMonth() + 1;
var day = now.getDate();
var hour = now.getHours();
var mins = now.getMinutes();
var second = now.getSeconds();
var date1 = createDiv("date");
if (mins < 10) {
mins = "0" + mins;
}
if (second < 10) {
second = "0" + second;
}
date1.innerHTML = month + "月" + day + "日" + hour + ":" + mins + ":" + second + "发布";
var close = createDiv("close");
close.innerHTML = "x";
// 删除
close.onclick = function() {
message.removeChild(big);
}
big.appendChild(name1);
big.appendChild(mes);
big.appendChild(date1);
big.appendChild(close);
message.insertBefore(big, message.firstElementChild);
}
var oA = document.getElementById("a");
function func() {
topRight.innerHTML = "点击领取红包";
topRight.style.color = "blue";
if (textValue.value == "") {
alert("发布内容为空，请重新输入");
}else if(textLimit < 0){
alert("内容已超出，请检查一下。");
}else {
fadu();
textValue.value = "";
textLimit = 140; // 每次发布完一条
}
}
</script>
</body>
</html>