*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: orange;
}
.wrap{
width: 600px;
height: 200px;
border: 1px solid gainsboro;
border-radius: 5px;
margin: 0 auto;
}
.top{
height: 40px;
width: 100%;
overflow: hidden;
}
.top-left{
width: 80px;
height: 100%;
line-height: 40px;
font-size: 20px;
color: orange;
float: left;
margin-left: 20px;
}
.top-right{
float: right;
width: 60%;
height: 100%;
line-height: 40px;
padding-right: 20px;
text-align: right;
}
.middle{
width: 100px;
height: 100px;
}
.middle textarea{
width: 570px;
height: 90px;
margin-left: 15px;
border: 1px solid gainsboro;
resize: none;
outline: none;
}
.bottom{
height: 60px;
width: 100%;
overflow: hidden;
}
.bottom-left{
height: 100%;
width: 350px;
float: left;
}
.bottom-left div{
height: 100%;
width: 70px;
text-align: center;
line-height: 50px;
float: left;
}
.bottom-left div span:hover{
color: orange;
}
.bottom-right{
float: right;
width: 80px;
height: 40px;
background-color: orange;
color: white;
text-align: center;
line-height: 40px;
margin-right: 11px;
font-size: 20px;
border-radius: 5px;
}
.message{
width: 600px;
min-height: 650px;
border: 1px solid gainsboro;
border-radius: 5px;
margin: 0 auto;
}
/*为js准备的样式*/
.big{
width: 580px;
/*height: 100px;*/
border: 1px solid gray;
margin-left: 9px;
margin-top: 10px;
position: relative;
top: -75px;
opacity: 0.1;
}
.name{
width: 100px;
height: 30px;
line-height: 30px;
padding-left: 10px;
font-weight: bold;
}
.mes{
width: 100%;
line-height: 30px;
padding-left: 10px;
word-wrap: break-word;
}
.date{
width: 200px;
height: 30px;
line-height: 30px;
padding-left: 10px;
color: gray;
}
.close{
width: 20px;
height: 20px;
position: absolute;
right: 10px;
top: 10px;
}
//第一步取东西
//带()方法
//这两个方法返回值是一个数组
var message = document.getElementsByClassName("message")[0];
var txt = document.getElementsByTagName("textarea")[0];
//拿出a标签
var topRight = document.getElementsByTagName("a")[0];
//字数
var txtlimit = 140;
//点击发布会响应的函数
function addRow(){
if(!txt.value.length){
alert("sp,没文字发什么发!");
}else{
alert("dsp,发布成功");
//创建bigDiv
var bigDiv = createDiv("","big");
//创建昵称div{
var nickDiv = createDiv("dsp","name");
bigDiv.appendChild(nickDiv);
//创建文本div
var contentDiv = createDiv(txt.value,"mes")
bigDiv.appendChild(contentDiv);
//创建时间div
//函数参数带有函数,带有的函数会先执行,视为返回值的结果
var timeDiv = createDiv(createDate(),"date")
bigDiv.appendChild(timeDiv);
//删除div
var closeDiv = createDiv("×","close");
closeDiv.onclick = function(){
message.removeChild(bigDiv);
}
bigDiv.appendChild(closeDiv);
message.insertBefore(bigDiv,message.firstElementChild);
// textlimit = 140;
txt.value= "";
}
startMove(bigDiv,{top:0,opacity:1});
}
function createDiv(txt,className){
var div = document.createElement("div");
div.innerHTML = txt;
div.setAttribute("class",className);
return div;
}
function createDate(){
var myDate =new Date();
var momth = myDate.getMonth()+1;
var day = myDate.getDate();
var hour = myDate.getHours();
var minute = myDate.getMinutes();
return momth+"月"+day+"日"+hour+"时"+minute+"分"+"发布";
}
//当手指离开键盘的时候出发
txt.onkeyup = function(){
textlimit = 140 - txt.value.length;
topRight.innerHTML = "还可以输入"+textlimit+"字";
if (textlimit<0) {
// alert("请手下留情哦");
topRight.innerHTML = "超过"+(txt.value.length-140)+"字";
// alert(topRight.innerHTML);
}
}
//失去焦点的时候会触发
txt.onblur = function(){
topRight.innerHTML = "点击领取红包";
topRight.style.color = "";
}
//获得焦点的时候会触发
txt.onfocus = function(){
//当前剩余字数
textlimit = 140 - txt.value.length;
topRight.innerHTML = "还可以输入"+textlimit+"字";
topRight.style.color = "grey";
if (textlimit<0) {
topRight.innerHTML = "超过"+(txt.value.length-140)+"字";
}
}
// 完美运动框架(在前面已上传)