php实现计算输入文字个数,实现微博输入计算字数

摘要：html>

微博输入

body{font-size: 12px;}

.box{width: 600px;height: 160px;border: 8px solid pink;margin: 0px auto;padding: 10px}

img{float: left;}

.box1{float: left;margin-left: 255px;width: 150px;height: 24px;text-align: right;font-size: 14px;color: #888;}

.box1 span{font-size: 16px;font-weight: bold;}

#text{width: 600px;height: 100px;border: 1px solid #888;margin-top:5px; }

.box #sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float: left;width: 30px;height: 32px;line-height: 32px;padding-left: 26px;}

#sp1{background: url(images/an5.png) no-repeat left center;}

#sp2{background: url(images/an4.png) no-repeat left center;}

#sp3{background: url(images/an3.png) no-repeat left center;}

#sp4{background: url(images/an2.png) no-repeat left center;}

#sp5{background: url(images/an1.png) no-repeat left center;width: 40px;}

#sp6{margin-left: 150px;margin-right: 15px;color: #888;}

#bt{float: left;width: 80px;height: 30px;border: none;background: #ffc09f;color: #fff;border-radius: 5px}

var text,number,m

window.οnlοad=function(){

text=document.getElementById('text')

number=document.getElementById('number')

bt=document.getElementById('bt')

m=140;

number.innerHTML=m

text.οnkeyup=function aa(){

m=140-text.value.length

if (m<0) {

number.style.color='red'

}else{

number.style.color='#888'

}

number.innerHTML=m

}

bt.οnclick=function(){

if (m==140) {

alert("请输入内容！");

text.focus()

}else if(m<0){

alert("字数超过140个字");

text.focus()

}else{

alert("发布成功！")

}

}

aa()

}

还可以输入

字

表情

图片

视频

话题

长微博

公开

原来还可以通过window.οnlοad=function(){}的方式载入调用函数，我一直以为要写在html元素里面，老师给的案例有点小问题，如果载入页面，不操作输入框的话，直接点击发布也会发布成功，后来发现原因是因为m一开始没有赋值，所以在判断m==140的时候条件不成立，所以发布成功。在输入之前就对m进行赋值，发布按钮就可以正确判断字数了。

批改老师：天蓬老师批改时间：2019-01-17 09:06:05

老师总结：发现问题,并能按自己的想法去解决问题,这是一个程序员的必由之路, window.onload这个方法现在其实都不太常用了, 主要是用DOMContentLoaded, 在构建好DOM就触发, 不必像onload必须等外部资源(如图片,文件)加载完成再钥发, jQuery就是调用这个, 有空了解一下