<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
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;
font-size: 20px;
color: orange;
}
.top-right {
float: right;
width: 60%;
height: 40px;
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 #cccccc;
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;
color: white;
background-color: orange;
border-radius: 5px;
margin-right: 13px;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-top: 8px;
opacity: 0.3;
}
.message {
width: 600px;
height: 1000px;
border: 1px solid #cccccc;
margin: 0 auto;
border-radius: 5px;
}
.big {
width: 580px;
height: 100px;
border: 1px solid #cccccc;
border-radius: 5px;
margin-left: 9px;
margin-top: 10px;
position: relative;
overflow: hidden;
}
.name {
width: 100px;
height: 30px;
line-height: 30px;
padding-left: 10px;
font-weight: bold;
}
.mes {
width: 100%;
height: 30px;
line-height: 30px;
padding-left: 10px;
}
.date {
width: 200px;
height: 30px;
line-height: 30px;
padding-left: 10px;
color: #cccccc;
}
.close {
width: 50px;
height: 50px;
position: absolute;
right: -20px;
top: 10px;
}
.close:hover {
color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="top">
<div class="top-left">
LOGO
</div>
<div class="top-right">
<a href="####">点击领取红包</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">
发布
</div>
</div>
</div>
<div class="message">
</div>
<script src="../js/tween.js"></script>
<script>
//透明度设置
function opacityCtrl(){
if(textArea.value.length ==0){
publishBtn.style.opacity = 0.3;
}else{
publishBtn.style.opacity = 1;
}
}
//创建div的函数
function createDiv(c) {
var div = document.createElement("div");
div.setAttribute("class", c);
return div;
}
var message = document.getElementsByClassName("message")[0];
var publishBtn = document.querySelector(".bottom-right");
var textArea = document.querySelector(".middle>textarea");
var topRight = document.querySelector(".top-right>a");
var textLimit = 140;
var timer1 = null; //定义两个定时器，用于添加和删除时候的动画
var timer2 = null;
textArea.onfocus = function() {
topRight.innerHTML = "还可以输入" + textLimit + "字";
topRight.style.color = "#cccccc";
opacityCtrl();
}
textArea.onkeyup = function() {
opacityCtrl();
textLimit = 140 - textArea.value.length;
topRight.innerHTML = "还可以输入" + textLimit + "字";
if (textLimit < 0) {
topRight.innerHTML = "超出" + (textArea.value.length - 140) + "字，请修改";
}
}
//onblur事件是失去焦点时触发
textArea.onblur = function(){
topRight.innerHTML = "点击领取红包";
topRight.style.color = "";
opacityCtrl();
}
function fabu() {
var big = createDiv("big");
var name1 = createDiv("name");
name1.innerHTML = "发布者";
var mes = createDiv("mes");
mes.innerHTML = textArea.value;
var date1 = createDiv("date");
date1.innerHTML = publishTime();
var close = createDiv("close");
close.innerHTML = "X";
//删除
close.onclick = function() {
//删除的动画效果，要先动画后删除
var t = 0;
var bw = big.offsetWidth;
var cw = 0-bw;
var bh = big.offsetHeight;
var ch = 0 - bh;
var d = 50;
clearInterval(timer2);
timer2 = setInterval(function(){
t++;
if(t>=d){
message.removeChild(big);
clearInterval(timer2);
}
big.style.height = Tween.Linear(t,bh,ch,d)+"px";
big.style.width = Tween.Linear(t,bw,cw,d)+"px";
},20)
}
big.appendChild(name1);
big.appendChild(mes);
big.appendChild(date1);
big.appendChild(close);
message.insertBefore(big, message.firstElementChild);
//添加动画效果
var t = 0;
var b = -170;
var c = 0-b; //big div是relative定位，相对于父级big的top只能是0
var d = 50;
clearInterval(timer1);
timer1 =setInterval(function(){
t++;
if(t>=d){
clearInterval(timer1);
}
big.style.top = Tween.Back.easeOut(t,b,c,d)+"px";
},20)
}
//发布时间
function publishTime() {
var now = new Date();
var m = now.getMonth() + 1;
var d = now.getDate();
var h = now.getHours();
var fen = now.getMinutes();
return m + "月" + d + "日" + h + ":" + fen + "发布";
}
publishBtn.onclick = function() {
if (textArea.value == "") {
alert("发布内容不能为空，请重新输入！");
} else if (textLimit < 0) {
alert("发布内容过长，请小于140字");
} else {
fabu();
textArea.value = "";
textLimit = 140; //每次发布完一条后，让textLimit = 140
opacityCtrl(); //透明度控制，放在后面
}
}
</script>
</body>
</html>
3487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
