JavaScript制作微博发布栏效果

最新推荐文章于 2019-12-21 15:52:28 发布

周杰伦演唱会

最新推荐文章于 2019-12-21 15:52:28 发布

阅读量321

点赞数

分类专栏：微博发布系统

微博发布系统专栏收录该内容

11 篇文章 0 订阅

订阅专栏

知识点包括以下：

1.判断IE的方法：直接用 var ie=!-[1,];即可

2.连续发生事件的用法：

IE下：触发对象.onpropertychange

标准下：触发对象.oninput

3.焦点聚集和移开事件。onfocus和onblur

4.判断单字节（0-255之间）与双子节：正则表达式:/[^\x00-\xff]/g

 
  <!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 
  > 
 
  < 
  style 
  > 
 
  #div1{width: 400px;margin: 20px auto;border: 1px solid #ccc} 
 
  #div1 p{float: right;margin: 0;font-size: 13px;} 
 
  #div1 textarea{width: 400px;height: 280px;} 
 
  #div1 a{background: #ccc;float: right;color: #FFFFFF;text-align: center;background: #00FF00;width: 50px;height: 30px} 
 
  #div1 a.dis{background: #ccc;color: black;} 
 
  </ 
  style 
  > 
 
  < 
  meta 
  http-equiv 
  = 
  "Content-Type" 
  content 
  = 
  "text/html; charset=utf-8" 
  /> 
 
  < 
  title 
  ></ 
  title 
  > 
 
  < 
  script 
  type 
  = 
  "text/javascript" 
  > 
 
  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 bool=true; 
 
  var ie=!-[1,]; 
 
  var timer=null; 
 
  var num=0; 
 
  //给文本框加聚焦事件 
 
  oT.onfocus=function() 
 
  { 
 
  if(bool) 
 
  { 
 
  oP.innerHTML='你还可以输入< 
  span 
  >90</ 
  span 
  >字'; 
 
  bool=false; 
 
  }  
 
  } 
 
  oT.onblur=function() 
 
  { 
 
  if(oT.value=='') 
 
  { 
 
  oP.innerHTML='请输入你的留言'; 
 
  bool=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<=90) 
 
  { 
 
  oSpan.innerHTML=90-num; 
 
  oSpan.style.color=''; 
 
  } 
 
  else 
 
  { 
 
  oSpan.innerHTML=num-90; 
 
  oSpan.style.color='red'; 
 
  } 
 
  if(oT.value==''||num>90) 
 
  { 
 
  oA.className='dis'; 
 
  } 
 
  else 
 
  { 
 
  oA.className=''; 
 
  } 
 
  } 
 
  function getLength(str) 
 
  { 
 
  return String(str).replace(/[^\x00-\xff]/,'aa').length;//不是单双节的将其变为两个单双节的 
 
  } 
 
  //点击按钮，变色 
 
  oA.onclick=function() 
 
  { 
 
  if(this.className=='dis') 
 
  { 
 
  clearInterval(timer); 
 
  timer=setInterval(function(){ 
 
  if(num>5){clearInterval(timer);num=0;} 
 
  else{ 
 
  num++; 
 
  } 
 
  if(num%2) 
 
  { 
 
  oT.style.background='red'; 
 
  } 
 
  else 
 
  { 
 
  oT.style.background=''; 
 
  } 
 
  },100) 
 
  } 
 
  else 
 
  { 
 
  alert('发布成功'); 
 
  } 
 
  } 
 
  } 
 
  </ 
  script 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  div 
  id 
  = 
  'div1' 
  > 
 
  < 
  p 
  >请输入你的留言</ 
  p 
  > 
 
  < 
  textarea 
  ></ 
  textarea 
  > 
 
  < 
  a 
  href 
  = 
  "#" 
  class 
  = 
  "dis" 
  >发布</ 
  a 
  > 
 
  </ 
  div 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >