abstrak：通過簡單實用的實例實現(xiàn)了JavaScript的元素獲取，事件的觸發(fā)，還有元素的賦值等。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>微博輸入數(shù)字</title><style> .
通過簡單實用的實例實現(xiàn)了JavaScript的元素獲取，事件的觸發(fā)，還有元素的賦值等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微博輸入數(shù)字</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">發(fā)布</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 //微博限制字數(shù)是140個
if(m<0){
number.style.color="red"
}else {
number.style.color="#888"
}
number.innerHTML=m
}
btn.onclick=function(){
if (m==140) {
alert("你還沒有輸入內(nèi)容");
text.focus();
} else if(m<0){
alert("你輸入的字數(shù)超限，不能發(fā)布");
text.focus();
} else {
alert("發(fā)布成功");
}
}
aa();
}
</script>
</body>
</html>
Guru membetulkan：韋小寶Masa pembetulan：2019-02-19 11:04:05
Rumusan guru：這一節(jié)主要就是把前面學(xué)習(xí)過的js再拿到案例中來練習(xí)練習(xí) 可以幫助我們掌握js中很多函數(shù)的各種作用！