检测微博输入字数完成

原创 2019-03-09 17:05:30 340
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>#box{width: 600px;margin:10px auto;border:8px solid pink;padding:10px

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

#box{width: 600px;margin:10px auto;border:8px solid pink;padding:10px;overflow: hidden;}

.tell{float:left;}

.number{float:right;}

#content{width: 600px;display:block;margin:10px auto;clear:both;}

#sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float:left;height:32px;line-height: 32px;padding-left:28px;}

#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;float:left;}

#sp6{float:left;margin-left:120px;color:#888;font-size:13px;}

#sub{float:left;border-radius:10px;background: #ffc09f;border:none;color:#fff;text-align: center;width: 80px;height: 30px;margin-left:10px;cursor:pointer;}

</style>

<script>

window.onload=function(){

var num,content,sub;

num=document.getElementById('num');

content=document.getElementById('content');

sub=document.getElementById('sub');

content.onkeyup=function(){

var subcon=140-content.value.length;

if(subcon>=0){

num.style.color="#888";

}else{

num.style.color="red";

}

num.innerHTML=subcon;

}

sub.onclick=function(){

var subcon=140-content.value.length;

if(subcon==140){

alert('请输入一点内容');

content.focus();

}else if (subcon<0) {

alert('不能超过140个字符');

content.focus();

}else{

alert('发布成功');

}

}

}

</script>

</head>

<body>



<div id="box">

<img src="images/12.png" alt="">

<div>还可以输入<span id="num"></span></div>

<textarea name="content" id="content" cols="30" rows="10" ></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="sub">

</div>


</body>

</html>


批改老师:韦小宝批改时间:2019-03-09 17:28:18
老师总结:写的还算是很不错的 等有时间可以通过jQuery来改写一下哦 还可以把jQuery练习练习

发布手记

热门词条