返回微博输入字数...登陆

微博输入字数

Kevin King2019-06-11 11:27:21118

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>微博输入</title>

<style type="text/css">

.inbox{width: 600px;height: 160px;border: 10px pink solid;padding: 10px;margin: 0 auto;}

.inp{float: left;}

.box1{float: left;margin-left: 235px;width: 150px;height: 24px;text-align: right;font-size: 14px;color: #888;}

.box1 span{font-size: 16px;font-weight: bold;}

textarea{width: 600px;height: 100px;border: 1px solid #888;margin-top: 5px;}

.b1{width: 48px;height: 32px;float: left;line-height: 32px;margin-left: 6px;}

#bt{float: left;width: 80px;height: 30px;border: none;background-color: #ffc09f;color: #fff;border-radius: 2px;margin-left: 240px;}

</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

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 class="inbox">

<div class="inp">有什么新鲜事想告诉大家</div>

<div class="box1">还可以输入<span id="number"></span>字</div>

<textarea id="text"></textarea>

<span class="b1">表情</span>

<span class="b1">图片</span>

<span class="b1">视频</span>

<span class="b1">话题</span>

<span class="b1">长微博</span>

<button id="bt">发布</button>

</div>

</body>

</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网