suchen

Heim  >  Artikel  >  Web-Frontend  >  Erstellen Sie einen Weibo-Release-Spalteneffekt basierend auf Javascript_Javascript-Fähigkeiten

Erstellen Sie einen Weibo-Release-Spalteneffekt basierend auf Javascript_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:06:491285Durchsuche

In diesem Artikel erfahren Sie, wie Sie einen Weibo-Publikationsspalteneffekt erstellen. Zu den beteiligten Wissenspunkten gehören:

1. So beurteilen Sie IE: Verwenden Sie direkt var ie=!-[1,];

2. Nutzung kontinuierlicher Ereignisse:

Unter IE: Trigger object.onpropertychange

Unter Standard: Trigger object.oninput

3. Fokussammel- und Entfernungsveranstaltungen. onfocus und onblur

4. Bestimmen Sie Einzelbyte (zwischen 0-255) und Doppelbyte: regulärer Ausdruck:/[^x00-xff]/g

Der Code ist wie oben: 


<!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>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementierungsmethode für den einfachen JS-Zahlengenerator (mit Download des Demo-Quellcodes)_Javascript-KenntnisseNächster Artikel：Implementierungsmethode für den einfachen JS-Zahlengenerator (mit Download des Demo-Quellcodes)_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen