<!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: 1pxsolid #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>