欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實現(xiàn)顏色打字機的完整代碼

 更新時間：2020年03月19日 09:53:56   作者：麥葉  
這篇文章主要介紹了jQuery實現(xiàn)顏色打字機的完整代碼，代碼簡單易懂，非常不錯，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

效果：每個字逐個顯示出來，并且每個字都有隨機顏色

 

$(function(){
  var str="早起的鳥兒有蟲吃，早起的蟲兒被鳥吃！由此天賦+勤奮=成功;先天不足+同等勤奮=還是失?。√熨x的重要性可見一斑！";
  //產(chǎn)生一個0-255的隨機整數(shù)
  function s(){
   return parseInt((Math.random()*255)+1);
  };
  var j=1,i=0;
  var p="";
  //打開一個每個100毫秒執(zhí)行一次的定時器
  var k=setInterval(function(){
   if(j<=str.length){
    //從第一個字開始截取，通過定時器循環(huán)遍歷字符串的每一個字
    var n=str.substring(i,j);
    j++;
    i++;
    //為單個字添加樣式
    var html='<span style="color:rgb('+s()+','+s()+','+s()+');font-size: 35px;">'+n+'</span>';
    //字符串累加
    p=p+html;
    //html()設(shè)置元素中的HTML內(nèi)容
    $(".mybox").html(p);
   }else{//遍歷完成關(guān)閉定時器
    clearInterval(k);
   }
  },100);
 });
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>顏色打字機</title>
<link rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" />
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
 $(function(){
  var str="早起的鳥兒有蟲吃，早起的蟲兒被鳥吃！由此天賦+勤奮=成功;先天不足+同等勤奮=還是失?。√熨x的重要性可見一斑！";
  //產(chǎn)生一個0-255的隨機整數(shù)
  function s(){
   return parseInt((Math.random()*255)+1);
  };
  var j=1,i=0;
  var p="";
  //打開一個每個100毫秒執(zhí)行一次的定時器
  var k=setInterval(function(){
   if(j<=str.length){
    //從第一個字開始截取，通過定時器循環(huán)遍歷字符串的每一個字
    var n=str.substring(i,j);
    j++;
    i++;
    //為單個字添加樣式
    var html='<span style="color:rgb('+s()+','+s()+','+s()+');font-size: 35px;">'+n+'</span>';
    //字符串累加
    p=p+html;
    //html()設(shè)置元素中的HTML內(nèi)容
    $(".mybox").html(p);
   }else{//遍歷完成關(guān)閉定時器
    clearInterval(k);
   }
  },100);
 });
</script>
</head>

<body>
<div class="mybox">
</div>
</body>
</html>

  整個HTML源代碼

@charset "utf-8";
/* CSS Document */
.mybox {
 height:200px;
 border:5px solid #ddd;
 font-size:25px;
}

  需要用的CSS樣式

總結(jié)

到此這篇關(guān)于jQuery實現(xiàn)顏色打字機的完整代碼的文章就介紹到這了,更多相關(guān)jquery 顏色打字機內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論