cari

Rumah >hujung hadapan web >tutorial js >JS menyedari kesan kemahiran menaip_javascript papan kekunci mudah

JS menyedari kesan kemahiran menaip_javascript papan kekunci mudah

WBOY
WBOYasal
2016-05-16 16:02:401093semak imbas

Analisis proses sebagai kod: 

<html>
<head>
<title>打字效果</title>
<meta http-equiv="Content-Type" Content="text/html;charset=gb2312" />
<style type="text/css">
body{
  font-size:14px;
  font-color:#purple;
  font-weight:bolder;
}
</style>
</head>
<body>
最新内容: <a id = "Hotnews" href="" target="_blank"> </a>  
<script language="javascript">
  var NewsTime = 2000;    //每条信息完整出现后停留时间
  var TextTime = 100;    //每条信息中的字出现的间隔时间
  
  var newsi = 0;
  var txti = 0;
  var txttimer;   //调用setInterval的返回值，用于取消对函数的周期性执行
  var newstimer;
  
  var newstitle = new Array();    //以数组形式保存每个信息的标题
  var newshref = new Array();   //以数组形式保存信息标题的链接
  
  newstitle[0] = "欢迎来到我的博客";   //显示在网页上的文字内容和对应的链接
  newshref[0] = "http://www.jb51.net/guihailiuli/";
  
  newstitle[1] = "http://www.jb51.net/guihailiuli/";
  newshref[1] = "http://www.jb51.net/guihailiuli/";
  
  newstitle[2] = "博客园欢迎你哦";
  newshref[2] = "http://www.jb51.net";
  
  newstitle[3] = "ByeBye~~";
  newshref[3] = "http://www.jb51.net";
  
  function shownew(){
    hwnewstr=newstitle[newsi];    //通过newsi传递，依次显示数组中的内容
    newslink=newshref[newsi];     //依次显示文字对应的链接
     
    if(txti>=hwnewstr.length){
      clearInterval(txttimer);  //一旦超过要显示的文字长度，清除对shownew()的周期性调用
      clearInterval(newstimer); 
      newsi++;   //显示数组中的下一个
      
      if(newsi>=newstitle.length){
        newsi = 0;  //当newsi大于信息标题的数量时，把newsi清零，重新从第一个显示
      }
      newstimer = setInterval("shownew()",NewsTime);   //间隔2000ms后重新调用shownew()
      txti = 0;  
      return;
    }
    clearInterval(txttimer);  
    document.getElementById("Hotnews").href = newslink;  
    document.getElementById("Hotnews").innerHTML = hwnewstr.substring(0,txti+1);   //截取字符，从第一个字符到txti+1个字符
    
    txti++;  //文字一个个出现
    txttimer = setInterval("shownew()",TextTime);   
  }
  shownew();

</script>
</body>
</html>

Di atas adalah keseluruhan kandungan artikel ini saya harap ia dapat membantu semua orang dalam mempelajari javascript.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js menyelesaikan teknik bug_javascript IE6 tidak menyokong position:fixed dengan sempurnaArtikel seterusnya：js menyelesaikan teknik bug_javascript IE6 tidak menyokong position:fixed dengan sempurna

Artikel berkaitan

Lihat lagi