实现微博发布框布局
微博发布框布局，实现的功能有:
右上角的字数统计（keyup事件和innerHTML配合适用）。
浮动和定位。
超出后数字颜色变化并弹窗提醒。
if else的嵌套使用。
点击发布按钮控制发布成功图片的显示（display：display/block）。
还用到一个this.focus()用来实现弹出未输入任何字符后将焦点移到输入框里的作练习了函数的声明和用事件来调用。函数调用的时候需要注意函数变量的作用域，避免出现“未定义”的等提示。if else使用时应考虑好所有可能出现的情况
实现结果：
代码：
<!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="微博发布框布局，js实现:
右上角的字数统计（keyup事件和innerHTML配合适用）。
超出后数字。
颜色变化弹窗提醒。
点击发布按钮控制发布成功图片的显示（display：block）。
还用到一个this.focus()用来实现弹出未输入任何字符后将焦点移到输入框里的作用">
</textarea>
<img id="pub" src="images/b1.PNG"><br>
<button id="btn">发布</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>