abstract：通过简单实用的实例实现了JavaScript的元素获取，事件的触发，还有元素的赋值等。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>微博输入数字</title><style> .
通过简单实用的实例实现了JavaScript的元素获取，事件的触发，还有元素的赋值等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微博输入数字</title>
<style>
.box {width: 600px;height: 170px;border: 8px solid pink; margin: 0 auto;padding: 10px;}
.box0 {float: left;width: 200px;height: 24px;}
.box1 {float: right; width: 150px; height: 24px;text-align: right;margin-right: 20px;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;}
#btn {float:right; width: 80px;height: 30px; border: none; background: #ffc09f;color: #fff;border-radius: 5px;}
</style>
</head>
<body>
<div>
<div>有什么新鲜事可以告诉大家</div>
<div>还可以输入<span id="number"></span>字</div>
<textarea name="" id="text" cols="30" rows="10"></textarea>
<button id="btn">发布</button>
</div>
<script>
var text,number,m
window.onload=function (){
text = document.getElementById('text')
number = document.getElementById('number')
btn = document.getElementById('btn')
text.onkeyup=function aa(){
m=140-text.value.length //微博限制字数是140个
if(m<0){
number.style.color="red"
}else {
number.style.color="#888"
}
number.innerHTML=m
}
btn.onclick=function(){
if (m==140) {
alert("你还没有输入内容");
text.focus();
} else if(m<0){
alert("你输入的字数超限，不能发布");
text.focus();
} else {
alert("发布成功");
}
}
aa();
}
</script>
</body>
</html>
Correcting teacher：韦小宝Correction time：2019-02-19 11:04:05
Teacher's summary：这一节主要就是把前面学习过的js再拿到案例中来练习练习 可以帮助我们掌握js中很多函数的各种作用！