サマリー：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/cs
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.weibo{width: 600px;height:190px; padding: 5px; margin:30px auto;border:10px solid darkkhaki}
.weibo img{float: left}
.shuru{float:right;color:#808080;font-size: 13px;height:25px;line-height: 25px;margin-right: 5px;}
.shuru span{font-size: 14px;font-weight: bold;}
.weibo textarea{border: 1px #ccc solid;width:98%;margin:10px auto;height: 106px;}
.clear{clear:both}
.ico{width: 98%;margin: 0 auto}
.ico ul{margin: 0;padding: 0}
.ico li{list-style: none;float: left;font-size:12px;line-height:25px;position:relative;min-width:55px; margin-right:3px;}
.ico li i{width:20px;height:25px;display:block;background-color:red;float:left;margin-right: 2px;}
.ico li:nth-child(1) i{background:url("images/an5.png") no-repeat center center}
.ico li:nth-child(2) i{background:url("images/an4.png") no-repeat center center}
.ico li:nth-child(3) i{background:url("images/an3.png") no-repeat center center}
.ico li:nth-child(4) i{background:url("images/an2.png") no-repeat center center}
.ico li:nth-child(5) i{background:url("images/an1.png") no-repeat center center}
.fabu{width:150px;margin-right: 5px;float: right}
.fabu input{width:80px;height:30px;border-radius:10px;background-color:#ffc09f;float:right;border: none;outline: none;color: white}
.fabu span{float:left;height:30px;line-height:30px;font-size:12px;color: #c8c9cd}
</style>
<script type="text/javascript">
var text,num,bt,m
window.onload=function(){
text=document.getElementById('text')//定位到文本輸入框
num=document.getElementById('number')//獲取字?jǐn)?shù)
bt=document.getElementById('bt')//發(fā)布按鈕的獲取
text.onkeyup=function aa(){//鍵盤輸入的時候開始執(zhí)行此函數(shù)
m=140-text.value.length//140字?jǐn)?shù)減掉文本輸入框里面的輸入字符數(shù)
if(m<0){//當(dāng)這個數(shù)字小于0的時候
num.style.color='red'//文字的顏色變紅
}else{
num.style.color='#888'//如果數(shù)字沒超過140個字的話 字體的顏色就是這樣。
}
num.innerHTML=m //顯示多少數(shù)字。
}
bt.onclick=function(){
if(m==140||m==null){
alert('請輸入內(nèi)容')
text.focus()
}else if(m<0){
alert('請刪減內(nèi)容')
text.focus()
}else{
alert('發(fā)布成功')
}
}
aa()
}
</script>
</head>
<body>
<div class="weibo">
<img src="images/12.png" alt=""/>
<div class="shuru">你還可以輸入<span id="number"></span>字</div>
<div class="clear"></div>
<textarea id="text"></textarea>
<div class="weibo_bottom">
<div class="ico">
<ul>
<li><i></i>表情</li>
<li><i></i>圖片</li>
<li><i></i>視頻</li>
<li><i></i>話題</li>
<li><i></i>長微博</li>
</ul>
</div>
<div class="fabu">
<span>公開</span>
<input type="button" id="bt" value="發(fā)布"/>
</div>
</div>
</div>
</body>
</html>
添削の先生：滅絕師太添削時間：2019-01-06 16:23:24
先生のまとめ：完成的不錯，注意一點：老師代碼中的aa()這個函數(shù)名可以去掉，這里text.onkeyup=function創(chuàng)建是是一個匿名函數(shù)，所以不需要調(diào)用也可以，你可以試試奧！