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

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

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

效果：每個(gè)字逐個(gè)顯示出來(lái)，并且每個(gè)字都有隨機(jī)顏色

 

$(function(){
  var str="早起的鳥兒有蟲吃，早起的蟲兒被鳥吃！由此天賦+勤奮=成功;先天不足+同等勤奮=還是失敗！天賦的重要性可見一斑！";
  //產(chǎn)生一個(gè)0-255的隨機(jī)整數(shù)
  function s(){
   return parseInt((Math.random()*255)+1);
  };
  var j=1,i=0;
  var p="";
  //打開一個(gè)每個(gè)100毫秒執(zhí)行一次的定時(shí)器
  var k=setInterval(function(){
   if(j<=str.length){
    //從第一個(gè)字開始截取，通過(guò)定時(shí)器循環(huán)遍歷字符串的每一個(gè)字
    var n=str.substring(i,j);
    j++;
    i++;
    //為單個(gè)字添加樣式
    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)閉定時(shí)器
    clearInterval(k);
   }
  },100);
 });
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>顏色打字機(jī)</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="早起的鳥兒有蟲吃，早起的蟲兒被鳥吃！由此天賦+勤奮=成功;先天不足+同等勤奮=還是失??！天賦的重要性可見一斑！";
  //產(chǎn)生一個(gè)0-255的隨機(jī)整數(shù)
  function s(){
   return parseInt((Math.random()*255)+1);
  };
  var j=1,i=0;
  var p="";
  //打開一個(gè)每個(gè)100毫秒執(zhí)行一次的定時(shí)器
  var k=setInterval(function(){
   if(j<=str.length){
    //從第一個(gè)字開始截取，通過(guò)定時(shí)器循環(huán)遍歷字符串的每一個(gè)字
    var n=str.substring(i,j);
    j++;
    i++;
    //為單個(gè)字添加樣式
    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)閉定時(shí)器
    clearInterval(k);
   }
  },100);
 });
</script>
</head>

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

  整個(gè)HTML源代碼

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

  需要用的CSS樣式

總結(jié)

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

相關(guān)文章

最新評(píng)論