实现功能
一、点击发布框,右上角公告会变成输入字数限制的提示。
二、随着字符的输入,数字提醒会动态改变。数字、字母按半个处理,汉字按一个处理。
三、未输入数字或者字数超过140字后,发布按钮不可以点击发布,并且发布框会有颜色闪现。
JavaScript部分代码
<script language="javascript">
//onchange 当光标消失的时候 只能触发一次
//ie 下 onpropertychange 输入连续触发
// 标准 oninput
window.οnlοad=function(){
var odiv=document.getElementById('div1');
var op=odiv.getElementsByTagName('p')[0];
var ot=odiv.getElementsByTagName('textarea')[0];
var oa=odiv.getElementsByTagName('a')[0];
var ie=!-[1,];//判断是否为ie浏览器
var bbtn=true;
var timer=null;
var nnn=0;
ot.οnfοcus=function(){
if(bbtn){
op.innerHTML='发言请遵守社区公约,还可以输入<span>140</span>字';
bbtn=false;
}
};
ot.οnblur=function(){
if(ot.value==''){
op.innerHTML='郑爽公开承认和张翰恋情,网友送祝福 热门微博';
bbtn=true;
}
};
if(ie){
ot.onpropertychange=toChange;
}else{
ot.οninput=toChange;
}
function toChange(){
var num=Math.ceil(getLength(ot.value)/2);
var oSpan=odiv.getElementsByTagName('span')[0];
if(num<=140){
oSpan.innerHTML=140-num;
oSpan.style.color='';
}else{
oSpan.innerHTML=num-140;
oSpan.style.color='red';
}
if(ot.value==''||num>140){
oa.className='dis';
}else{
oa.className='';
}
}
function getLength(str){
return String(str).replace(/[^\x00-\xff]/g,'aa').length;
}
oa.οnclick=function(){
if(this.className=='dis'){
clearInterval(timer);
timer=setInterval(function(){
if(nnn==5){
clearInterval(timer);
nnn=0;
}else{
nnn++;
}
if(nnn%2){
ot.style.background='red';
}else{
ot.style.background='';
}
},100);
}else{
alert('发布成功');
}
}
}
</script>
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新浪微博</title>
<style>
body{ font-size:12px;}
#div1{ width:400px; margin:20px auto;}
#div1 p{ float:right; margin:0;}
#div1 textarea{ width:400px; height:100px;}
#div1 a{ width:50px; height:30px; font-size:16px; line-height:30px; text-align:center; float:right; background:#0033FF; color:#FFFFFF;}
#div1 a.dis{ background:#CCCCCC; color:#666666;}
</style>
<script language="javascript">
//onchange 当光标消失的时候 只能触发一次
//ie 下 onpropertychange 输入连续触发
// 标准 oninput
window.οnlοad=function(){
var odiv=document.getElementById('div1');
var op=odiv.getElementsByTagName('p')[0];
var ot=odiv.getElementsByTagName('textarea')[0];
var oa=odiv.getElementsByTagName('a')[0];
var ie=!-[1,];//判断是否为ie浏览器
var bbtn=true;
var timer=null;
var nnn=0;
ot.οnfοcus=function(){
if(bbtn){
op.innerHTML='发言请遵守社区公约,还可以输入<span>140</span>字';
bbtn=false;
}
};
ot.οnblur=function(){
if(ot.value==''){
op.innerHTML='郑爽公开承认和张翰恋情,网友送祝福 热门微博';
bbtn=true;
}
};
if(ie){
ot.onpropertychange=toChange;
}else{
ot.οninput=toChange;
}
function toChange(){
var num=Math.ceil(getLength(ot.value)/2);
var oSpan=odiv.getElementsByTagName('span')[0];
if(num<=140){
oSpan.innerHTML=140-num;
oSpan.style.color='';
}else{
oSpan.innerHTML=num-140;
oSpan.style.color='red';
}
if(ot.value==''||num>140){
oa.className='dis';
}else{
oa.className='';
}
}
function getLength(str){
return String(str).replace(/[^\x00-\xff]/g,'aa').length;
}
oa.οnclick=function(){
if(this.className=='dis'){
clearInterval(timer);
timer=setInterval(function(){
if(nnn==5){
clearInterval(timer);
nnn=0;
}else{
nnn++;
}
if(nnn%2){
ot.style.background='red';
}else{
ot.style.background='';
}
},100);
}else{
alert('发布成功');
}
}
}
</script>
</head>
<body>
<div id="div1">
<p>郑爽公开承认和张翰恋情,网友送祝福 热门微博</p>
<textarea></textarea>
<a class="dis" href="javascript:;">发布</a>
</div>
</body>
</html>
效果图