<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 580px;
height: 200px;
border: 10px solid rgb(238, 170, 170);
margin: 0 auto;
box-shadow: 6px 5px 3px #cccc;
}
.box img{
margin: 8px 0px 0px 6px;
}
.box_right{
float: right;
height: 24px;
margin: 8px 15px 0px 0px;
font-size:15px; color: rgb(131, 122, 122);
}
.box_right b{
font-size: 10px;
}
#text{
height: 110px;
width: 550px;
margin: 0px 12px;
}
.box #foot_1, #foot_2 , #foot_3 ,#foot_4, #foot_5,#foot_6{
float: left;
width: 40px;
height: 20px;
padding-left: 25px;
font-size: 12px;
line-height: 20px;
padding-top:5px;
}
#foot_1{
background: url(/xuexi/static/images/images1/an5.png) no-repeat left center;
}
#foot_2{
background: url(/xuexi/static/images/images1/an4.png) no-repeat left center;
}
#foot_3{
background: url(/xuexi/static/images/images1/an3.png) no-repeat left center;
}
#foot_4{
background: url(/xuexi/static/images/images1/an2.png) no-repeat left center;
}
#foot_5{
background: url(/xuexi/static/images/images1/an1.png) no-repeat left center;
}
#foot_6{
padding-left: 130px;
}
#foot_7{
float: left;
background-color:darkorange;
width: 60px;
height: 25px;
color: aliceblue;
font-weight: bold;
border:none;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="box">
<img src="/xuexi/static/images/images1/12.png" />
<div class="box_right"> 还可以<b>输入</b><span id="number"></span><b>字</b></div>
<textarea id="text"></textarea>
<span id="foot_1">表情</span>
<span id="foot_2">图片</span>
<span id="foot_3">视频</span>
<span id="foot_4">话题</span>
<span id="foot_5">长微博</span>
<span id="foot_6">公开</span>
<input type="submit" value="提交" id="foot_7">
</div>
<script type="text/javascript">
var a,b,m //a 为文本框变量，b显示字数变量，m为实时字数
window.onload=function (){ //window.onload是所有页面内容加载完成执行的事件函数
a=document.getElementById('text') //通过id的方式获得文本框并赋值给变量a
b=document.getElementById('number') // 通过id的方式获得到span并赋值给变量b；
bt=document.getElementById('foot_7') // 通过id的方式获得提交框并复制给bt
a.onkeyup=function aa(){ //onkeyup按键被松开事件,a已经是文本框了，此时就是文本框内按键被松开时计算字数；
//如果使用onkeydown就是按下时才会计算字数，字数在下一次按键时才会生效
m=140-a.value.length //a.value.length可以获得文本框内文字长度， m值就是140减去a.value.length的值，超过后就是负数。
if(m<0){ // 判断d的数字是否小于零
b.style.color="red" //小于0则在b(span)样式为红色
}else{
b.style.color="#888" //否则大于0为灰色
}
b.innerHTML=m; // 把m实时字数赋值给b(span)html增加改写。
} //此时在文本框内输入文字，右上角显示m的实时字数，并且超过140之后显示红色
bt.onclick=function(){ //直接把if判断语句复制给id点击事件
if (m==140) { //这个地方使用等于或者小于都有可以
alert("你还没有输入")
a.focus() //获得文本框内焦点
}else if(m<0){
alert("字数太多，不可以发布")
a.focus()
}else{
alert("发布成功")
}
aa() // a()可以调用也可以不用调
}
}
//方法2：需要在html提交按钮增加点击事件
// function d(){
// if (m==140) {
// alert("你还没有输入")
// a.focus()
// }else if(m<0){
// alert("字数太多，不可以发布")
// a.focus()
// }else{
// alert("发布成功")
// }
// }
</script>
</body>
</html>