サマリー：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>weibo</title><style>*{font-size: 14px;color: #ccc;}.box{width: 620px;height: 180px;border: 5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>weibo</title>
<style>
*{
font-size: 14px;
color: #ccc;
}
.box{
width: 620px;
height: 180px;
border: 5px solid pink;
margin:30px auto;
background: url(images/body_bg.jpg) no-repeat;
}
img{
float: left;
margin-top:5px;
margin-left:5px;
}
.box1{
float: right;
margin-right:20px;
margin-top:5px;
}
.box2 span{
width: 30px;
height: 32px;
line-height: 32px;
float: left;
padding-left: 30px;
margin-left: 10px;
}
#text{
width: 600px;
height: 110px;
margin-left: 6px;
background:transparent;/*文本域背景透明*/
}
#sp1{
background: url(images/an5.png) left center no-repeat;
}
#sp2{
background: url(images/an4.png) left center no-repeat;
/* width: 30px;
height: 32px;
line-height: 32px;
float: left;
padding-left: 30px;*/
}
#sp3{
background: url(images/an3.png) left center no-repeat;
}
#sp4{
background: url(images/an2.png) left center no-repeat;
}
#sp5{
background: url(images/an1.png) left center no-repeat;
width: 50px;
}
#sp1 img{
}
.box2{
margin-left:10px;
}
.box2 input{
width: 65px;
height: 26px;
float: right;
margin-right: 25px;
background-color: red;
border: none;
color: green;
}
/*#text{
margin-top: 5px;
}*/
</style>
<script>
var txt,number,zi
window.onload=function(){
txt=document.getElementById('text') //獲取id
number=document.getElementById('inp')//獲取id
txt.onkeyup=function t(){
zi=140-txt.value.length//140為限制字?jǐn)?shù),減去文本框內(nèi)輸入的文字為實(shí)際輸入文字
if(zi<0){
number.style.color="red"//<0 意味著超出140的限制
}else{
number.style.color="#ccc"
}
number.innerHTML=zi;
}
fb.onclick=function(){
if(m=140){
alert("請(qǐng)輸入微博內(nèi)容")
txt.focus()//彈出警告框后，焦距到文字框中，默認(rèn)彈出后不會(huì)跳到文字框中
}else if(m<0){
alert("字?jǐn)?shù)超過限制,請(qǐng)重新修改")
txt.focus()
}else{
alert("發(fā)布成功")
}
}
// t()
}
</script>
</head>
<body>
<div>
<img src="images/12.png" alt="">
<div>還可以輸入<span id="inp"></span>zi</div>
<textarea name="" id="text"></textarea>
<div>
<span id="sp1">表情</span>
<span id="sp2">圖片</span>
<span id="sp3">視頻</span>
<span id="sp4">話題</span>
<span id="sp5">長微博</span>
<input type="button" value="submit" id="fb">
</div>
</div>
</body>
</html>
