javascriptに基づいてミニブログを作成し、投稿欄の効果を発表します.
3764 ワード
この記事では、マイクロブログの投稿欄の効果を共有する過程について、以下のような知識点が含まれています.
1.IEを判断する方法:直接使用 var ie=!-[1];すぐできます
2.連続発生事件の使い方:
IE下:トリガー対象.onpropertychange
標準下:トリガーオブジェクト.oninput
3.焦点の集中と移動.onfocusとonblur
4.単バイト(0-255間)と双子節を判断する:正則式:/[^\x 00-\xff]/g
コードは上記の通りです
1.IEを判断する方法:直接使用 var ie=!-[1];すぐできます
2.連続発生事件の使い方:
IE下:トリガー対象.onpropertychange
標準下:トリガーオブジェクト.oninput
3.焦点の集中と移動.onfocusとonblur
4.単バイト(0-255間)と双子節を判断する:正則式:/[^\x 00-\xff]/g
コードは上記の通りです
<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>
<div id="div1">
<p> </p>
<textarea/>
<a href="#" class="dis"> </a>
</div>
</code></pre>
</div>
<p> ， 。</p>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div>