摘要： 微博發(fā)布框布局，實現(xiàn)的功能有: &nbs
微博發(fā)布框布局，實現(xiàn)的功能有:
右上角的字數統(tǒng)計（keyup事件和innerHTML配合適用）。
浮動和定位。
超出后數字顏色變化并彈窗提醒。
if else的嵌套使用。
點擊發(fā)布按鈕控制發(fā)布成功圖片的顯示（display：display/block）。
還用到一個this.focus()用來實現(xiàn)彈出未輸入任何字符后將焦點移到輸入框里的作練習了函數的聲明和用事件來調用。函數調用的時候需要注意函數變量的作用域，避免出現(xiàn)“未定義”的等提示。if else使用時應考慮好所有可能出現(xiàn)的情況
實現(xiàn)結果：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
background: url(images/body_bg.jpg) no-repeat center;
}
.box {
background: #FFFFFF;
margin: 50px auto;
width: 600px;
height: 150px;
padding: 10px 10px 10px 10px;
border: 1px solid #808080;
border-radius: 5px;
}
#box {
font-size: 12px;
display: none;
width: 160px;
height: 20px;
float: right;
margin-bottom: 10px;
color: #808080;
}
#ipt {
resize: none;
display: block;
width: 595px;
height: 80px;
margin: 2px auto;
border: 1px solid #CCCCCC;
box-shadow: 0px 0px 5px #CCCCCC;
}
#pub {
position: relative;
margin: 0 auto;
top: -70px;
margin-bottom: -60px;
display: none;
width: 300px;
height: 60px;
}
#input:hover {
border-color: orange;
}
#num {
color: #808080;
font-size: 18px;
}
#btn {
font-size: 15px;
width: 85px;
height: 30px;
margin-top: -16px;
margin-right: 3px;
color: white;
float: right;
background: #FEBF9F;
border-style: none;
border-radius: 3px;
}
#emoji {
margin-top: -20px;
}
.pic {
display: inline-block;
color: #454545;
margin-right: 15px;
font-size: 13px;
}
#emoji img {
width: 25px;
height: 25px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box"><img src="images/12.png">
<div id="box">還可以輸入<i><b><span id="num"></span><b></i>個字。</div>
<textarea id="ipt" placeholder="微博發(fā)布框布局，js實現(xiàn):
右上角的字數統(tǒng)計（keyup事件和innerHTML配合適用）。
超出后數字。
顏色變化彈窗提醒。
點擊發(fā)布按鈕控制發(fā)布成功圖片的顯示（display：block）。
還用到一個this.focus()用來實現(xiàn)彈出未輸入任何字符后將焦點移到輸入框里的作用">
</textarea>
<img id="pub" src="images/b1.PNG"><br>
<button id="btn">發(fā)布</button>
<div id="emoji">
<img src="images/an5.png">
<p class="pic">表情</p>
<img src="images/an4.png">
<p class="pic">圖片</p>
<img src="images/an3.png">
<p class="pic">視頻</p>
<img src="images/an2.png">
<p class="pic">話題</p>
</div>
</div>
<script>
var oipt = document.getElementById("ipt");
var onum = document.getElementById("num");
var obtn = document.getElementById("btn");
var opub = document.getElementById("pub");
var obox = document.getElementById("box");
onum.innerHTML = 140;
oipt.onkeyup = function count() {
var countnum = (oipt.value).length;
onum.innerHTML = 140 - countnum;
if (countnum > 140) {
onum.style.color = "red";
} else if (countnum > 0) {
obox.style.display = "block";
onum.style.color = "#808080";
} else {
obox.style.display = "none";
}
}
obtn.onclick = function () {
var countnum = (oipt.value).length;
if (countnum == 0) {
alert("您還沒有輸入內容");
oipt.focus();
} else if (countnum > 140) {
alert("已超出" + (140 - countnum) + "個字");
} else {
opub.style.display = "block";
}
}
</script>
</script>
</body>
</html>
批改老師：天蓬老師批改時間：2018-12-07 23:28:59
老師總結：布局不錯,很好看, 不過, 微博早已取消字數限制N年了