abstrak：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>微博發(fā)布</title>
<link rel="stylesheet" href="layui/css/layui.css" type="text/css">
<style>
#text1{width:492px;height:100px;border:2px solic gray;display:block;margin:0px auto;}
.b1 span{float:left;width:52px;}
.layui-icon{font-size:14px;padding-right:2px;font-weight: bold;}
</style>
</head>
<body>
<div class="box" style="width:500px;height:160px;border:4px solid pink;padding:10px;">
<img src="images/12.png" alt="有什么新鮮事想告訴大家？">
<span style="color:#ccc;float:right;">還可以輸入<i id="nn"></i>字</span>
<textarea id="text1" ></textarea>
<div class="b1" style="width:492px;height:40px;text-align: center;line-height: 40px;">
<span><i class="layui-icon layui-icon-face-smile" style="color:#ff6500;"></i>表情</span>
<span><i class="layui-icon layui-icon-picture" style="color:lightgreen;"></i>圖片</span>
<span><i class="layui-icon layui-icon-video" style="color:lightskyblue;"></i>視頻</span>
<span><i class="layui-icon layui-icon-theme" style="color:plum;"></i>話題</span>
<span style="width:75px;"><i class="layui-icon layui-icon-top" style="color:#ff6500;"></i>頭條文章</span>
<span><i class="layui-icon layui-icon-more"></i></span>
<span style="padding:0px 10px;">公開<i class="layui-icon layui-icon-down" style="float:none;"></i></span>
<button style="width:80px;height:30px;color:white;background-color: #ff6500;border:none;border-radius:3px;">發(fā)布</button>
</div>
</div>
<script>
window.onload=function(){
var txt1=document.getElementById('text1')
var s1=document.getElementById('nn')
var bt1=document.getElementsByTagName('button')[0]
var n
txt1.oninput=function(){ //onkeyup不如oninput
n=145-txt1.value.length; //單詞千萬不能拼錯
if (n>=0){
s1.style.color='black';
}else{
s1.style.color='red';
}
s1.innerHTML=n;
}
bt1.onclick=function(){
if(n<0){
alert('字?jǐn)?shù)超了');
txt1.focus();
}else if(n==145){
alert('沒有輸入');
}else{
alert('發(fā)布成功');
}
}
}
</script>
</body>
</html>
onkeyup不如oninput，譬如按住一個鍵不松時用oninput才有效果。注意關(guān)鍵詞不能拼錯，onload函數(shù)的花括號的位置要注意。
Guru membetulkan：天蓬老師Masa pembetulan：2019-02-01 16:25:12
Rumusan guru：編輯器通常會提供語法提示的, 如果擔(dān)心寫錯, 可以安裝一些語法提示插件, 或者使用智能IDE: webstorm , 不要太委屈自己啦