微博输入布局、字数控制
<!DOCTYPE html>
<html>
<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>微博输入</title>
<style type="text/css">
/* 设置body标签内部的字体大小 */
body {
font-size: 12px;
}
/* 设置整个区域的宽度为600px,高度为160px,边框厚度为10px、实线、加粗，
上外边距和下外边距是0px、右外边距和左外边距为自动，内部为10px */
.box {
width: 600px;
height: 160px;
border: 10px solid pink;
margin: 0px auto;
padding: 10px;
}
/* 设置图片向左浮动 */
img {
float: left;
}
/* 设置"还可以输入*字"这一区域向左浮动，左外边距255像素，宽度为150像素,高度为24像素,
向右对齐，字体大小为14像素，颜色为#888 */
.box1 {
float: left;
margin-left: 255px;
width: 150px;
height: 24px;
text-align: right;
font-size: 14px;
color: #888;
}
/* 设置"还可以输入*字"这一区域中的"*" 的字体大小，并且加粗*/
.box1 span {
font-size: 16px;
font-weight: bold;
}
/* 设置文本输入框内的宽度为600像素，高度为100像素，边框大小为1像素、实线、颜色为#ccc
，距离上部为5像素 */
#text {
width: 600px;
height: 100px;
border: 1px solid #ccc;
margin-top: 5px;
}
/* 设置六个图片向左浮动，宽度为30像素，高度为32像素，行高为32像素，内左边距为26像素 */
.box #sp1,
#sp2,
#sp3,
#sp4,
#sp5,
#sp6 {
float: left;
width: 30px;
height: 32px;
line-height: 32px;
padding-left: 26px;
}
#sp1 {
background: url(images/an5.png) no-repeat left center;
}
#sp2 {
background: url(images/an4.png) no-repeat left center;
}
#sp3 {
background: url(images/an3.png) no-repeat left center;
}
#sp4 {
background: url(images/an2.png) no-repeat left center;
}
#sp5 {
background: url(images/an1.png) no-repeat left center;
width: 40px;
}
#sp6 {
margin-left: 100px;
margin-right: 15px;
color: #888;
}
/* 设置发布按钮向左浮动，宽度为80像素，高度为30像素，没有变款线，背景颜色为#ffc09f
字体颜色为#fff，圆滑程度为5px */
#bt {
float: left;
width: 80px;
height: 30px;
border: none;
background: #ffc09f;
color: #fff;
border-radius: 5px;
}
</style>
<script type="text/javascript">
var text,number,m;
window.onload=function (){
text=document.getElementById('text');
number=document.getElementById('number');
bt=document.getElementById('bt');
text.onkeyup=function aa(){
m=140-text.value.length;//微博限制字数是140
if(m<0){
number.style.color="red";
}else{
number.style.color="#888";
}
number.innerHTML=m;
}
bt.onclick=function(){//对用户输入的字数进行限制
if(m==140){
alert("你还没有输入！");
text.focus();
}
else if(m<0){
alert("字数过多！");
text.focus();
}
else{
alert("发布成功！");
}
}
aa();
}
</script>
</head>
<body>
<div >
<img src="images/12.png">
<div>
还可以输入<span id="number"></span>字</div>
<textarea id="text"></textarea>
<span id="sp1">表情</span>
<span id="sp2">图片</span>
<span id="sp3">视频</span>
<span id="sp4">话题</span>
<span id="sp5">长微博</span>
<span id="sp6">公开</span>
<input type="button" value="发布" id="bt">
</div>
</body>
</html>