标签：
<!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 #CCCCCC;
border-radius: 5px;
margin: 0 auto;
}
.top {
width: 100%;
height: 40px;
overflow: hidden;
}
.top-left {
float: left;
width: 80px;
height: 100%;
line-height: 40px;
text-indent: 2rem;
font-size: 20px;
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 #CCCCCC;
resize: none;
}
.bottom {
width: 100%;
height: 60px;
overflow: hidden;
}
.bottom-left {
float: left;
height: 100%;
width: 350px;
}
.bottom-left div {
float: left;
text-align: center;
line-height: 50px;
width: 70px;
}
.bottom-left div:hover {
color: orange;
}
.bottom-right {
float: right;
width: 80px;
height: 40px;
background-color: orange;
color: white;
border-radius: 5px;
line-height: 40px;
text-align: center;
margin-right: 13px;
font-size: 20px;
margin-top: 8px;
}
.message {
width: 600px;
height: 1000px;
border: 1px solid #CCCCCC;
border-radius: 5px;
margin: 0 auto;
}
.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;
top: 10px;
right: -20px;
}
.close:hover{
color: orange;
}
</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 name="" rows="" cols=""></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" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//按钮的透明度
function opacityCtrl(){
if (textArea.value.length==0) {
publishBtn.style.opacity=0.4;
}
else{
publishBtn.style.opacity=1;
}
}
//创建div的函数
function createDiv(c){
var div=document.createElement("div");
//给div符属性
div.setAttribute("class",c);
//需要div的返回值
return div;
}
//获取一些标签
var massage =document.getElementsByClassName("message")[0];
// querySelector 方法返回文档中匹配指定 CSS 选择器的一个元素
var publishBtn=document.querySelector(".bottom-right");
var texArea=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(){
textLimit=140-textArea.value.length;
topRight.innerHTML="还可以输入"+textLimit+"字";
if (textLimit<0) {
topRight.innerHTML="超出"+(textArea.value.length-140)+"字,请修改";
}
opacityCtrl();
}
//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";
// },10)
// }
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;
// 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("超出字数");
}else{
fabu();
textArea.value=="";
textLimit=140;//每次发布完一条后，让textlimt为140
opacityCtrl();
}
opacityCtrl()
}
//onblur失去焦点
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/wenppl/p/5648070.html
