【JavaScript】兑现新浪微博发布框的编写
日期：2014-05-16 浏览次数：20601 次
【JavaScript】实现新浪微博发布框的编写
实现功能
一、点击发布框，右上角公告会变成输入字数限制的提示。
二、随着字符的输入，数字提醒会动态改变。数字、字母按半个处理，汉字按一个处理。
三、未输入数字或者字数超过140字后，发布按钮不可以点击发布，并且发布框会有颜色闪现。
JavaScript部分代码
<script language="javascript">
//onchange 当光标消失的时候 只能触发一次
//ie 下 onpropertychange 输入连续触发
// 标准 oninput
window.onload=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.onfocus=function(){
if(bbtn){
op.innerHTML='发言请遵守社区公约，还可以输入<span>140</span>字';
bbtn=false;
}
};
ot.onblur=function(){
if(ot.value==''){
op.innerHTML='郑爽公开承认和张翰恋情，网友送祝福 热门微博';
bbtn=true;
}
};
if(ie){
ot.onpropertychange=toChange;
}else{
ot.oninput=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.onclick=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.onload=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.onfocus=function(){
if(bbtn){
op.innerHTML='发言请遵守社区公约，还可以输入<span>140</span>字';
bbtn=false;
}
};
ot.onblur=function(){
if(ot.value==''){
op.innerHTML='郑爽公开承认和张翰恋情，网友送祝福 热门微博';
bbtn=true;
}
};
if(ie){
ot.onpropertychange=toChange;
}else{
ot.oninput=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.onclick=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&g
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
