微博输入作业
7202019-04-15 17:02:35244<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width: 500px; background: #eee; padding:5px 20px; margin: 0px auto;}
p{text-align: right; color: #666;}
span{}
textarea{border: 1px solid #ddd; text-align: left; background: #fff; width: 500px; height: 120px; padding: 10px; font-size: 14px; box-sizing: border-box;}
button{border: none; background: #ffa200; color: #fff; width: 120px; height: 40px;}
</style>
</head>
<body>
<div>
<p>您还可以输入<span id="number">140</span>个字</p>
<textarea id="text"></textarea>
<p><button id="btn">确认提交</button></p>
</div>
<script type="text/javascript">
var number,text,btn,surplus
window.onload=function(){
number = document.getElementById('number');
text = document.getElementById('text');
btn = document.getElementById('btn');
surplus = 140;
text.onkeyup=function (){
surplus =140 - text.value.length;
number.innerHTML=surplus;
if(surplus<=0){
number.style.color="#f00";
}else{
number.style.color="#666";
}
}
btn.onclick=function(){
if(surplus==140){
alert("您还没有输入内容");
text.focus();
}else if(surplus<0){
alert("您输入的内容已超出限定字数");
text.focus();
}
else{
alert("您已发布成功");
text.value="";
number.innerHTML=140;
}
}
}
</script>
</body>
</html>