abstract：一、基本思路：1.寫好基本樣式后，通過id或標(biāo)簽名獲取到數(shù)字、文本框及按鈕2.聲明一個(gè)變量n，通過length方法獲取到當(dāng)前文本框字?jǐn)?shù)，n=總字?jǐn)?shù)-文本框字?jǐn)?shù)3.用n的值進(jìn)行判斷，若n>0,文本顏色不變，并用innerHTML方法將數(shù)字改為當(dāng)前n的值，反之則變紅色。4.用n的值判斷是否可以發(fā)布，大于總字?jǐn)?shù)，彈出框提示減少字?jǐn)?shù)后發(fā)布，小于則發(fā)布，當(dāng)n=總字?jǐn)?shù)時(shí)說明沒有內(nèi)容，提示用戶寫內(nèi)容，并獲
一、基本思路：
1.寫好基本樣式后，通過id或標(biāo)簽名獲取到數(shù)字、文本框及按鈕
2.聲明一個(gè)變量n，通過length方法獲取到當(dāng)前文本框字?jǐn)?shù)，n=總字?jǐn)?shù)-文本框字?jǐn)?shù)
3.用n的值進(jìn)行判斷，若n>0,文本顏色不變，并用innerHTML方法將數(shù)字改為當(dāng)前n的值，反之則變紅色。
4.用n的值判斷是否可以發(fā)布，大于總字?jǐn)?shù)，彈出框提示減少字?jǐn)?shù)后發(fā)布，小于則發(fā)布，當(dāng)n=總字?jǐn)?shù)時(shí)說明沒有內(nèi)容，提示用戶寫內(nèi)容，并獲取文本框焦點(diǎn)
二、運(yùn)行結(jié)果及代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微博輸入框</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body{
background-color: #6aafd8;
}
.con{
width: 580px;
height: 21px;
overflow: hidden;
}
.box{
width: 580px;
height: 140px;
padding: 15px 10px 10px;
background-color: #fff;
border-radius: 6px;
margin:50px auto;
overflow: hidden;
}
#font{
color:#1b7fb6;
font-size: 18px;
font-family: "WBswficon";
float: left;
line-height: 21px;
}
.right{
font-size: 14px;
line-height: 21px;
float:right;
color: #888;
}
#zi{
font-size: 16px;
font-weight: bold;
}
#text{
width: 568px;
height: 68px;
padding: 5px;
margin-top: 4px;
}
.icon{
width: 400px;
height: 24px;
padding-top: 10px;
color: #373737;
float: left;
}
.icon span{
font-size:12px;
line-height: 24px;
margin-right: 18px;
}
.func{
width: 160px;
height: 30px;
padding: 5px 0 0;
float: right;
font-size: 12px;
line-height: 30px;
color: #373737;
overflow: hidden;
}
.func span{
height: 30px;
margin-left:50px;
}
button{
width: 60px;
height: 30px;
border:none;
border-radius:3px;
background-color: #ffc09f;
color: #fff;
float: right;
padding: 0 10px;
}
.sp1,.sp2,.sp3,.sp4,.sp5,.sp6{
font-size: 12px;
line-height:24px;
cursor: pointer;
color: #373737;
}
#fa{
margin-right:5px;
font-size: 16px;
}
.sp #fa{
color:green;
}
</style>
<script>
window.onload=function() {
var text = document.getElementById('text');
var zi = document.getElementById('zi');
var but = document.getElementById('but');
text.onkeyup=function aa() {
var n = 140-text.value.length;
if(n<0){
zi.style.color = 'red';
}else{
zi.style.color = '#888';
}
zi.innerHTML = n;
}
but.onclick=function(){
var n = 140-text.value.length;
if (n==140) {
alert("請(qǐng)輸入內(nèi)容后發(fā)布");
text.focus();
}else if(n<0){
alert("減少字?jǐn)?shù)后再發(fā)布哦");
text.focus();
}else{
alert("發(fā)布成功");
}
}
}
</script>
</head>
<body>
<div>
<div>
<span id="font">有什么新鮮事想告訴大家?</span>
<div>還可以輸入<span id="zi">140</span>字</div>
</div>
<textarea id="text"></textarea>
<div>
<span><i id="fa" class="fa fa-frown-o"></i>表情</span>
<span><i id="fa" class="fa fa-image"></i>圖片</span>
<span><i id="fa" class="fa fa-youtube-play"></i>視頻</span>
<span><i id="fa" class="fa fa-paperclip"></i>話題</span>
<span><i id="fa" class="fa fa-file-text"></i>頭條文章</span>
<span><i id="fa" class="fa fa-ellipsis-h"></i></span>
</div>
<div>
<span>公開</span>
<button id="but">發(fā)布</button>
</div>
</div>
</body>
</html>
Correcting teacher：查無此人Correction time：2019-07-16 13:15:17
Teacher's summary：完成的不錯(cuò)，常用的css樣式可以寫到公用文件里，每個(gè)項(xiàng)目都可以加載這一個(gè)公用文件。繼續(xù)加油。