js教程

js執行緒的案例— —實現隨機速度的打字機效果

php是最好的语言

Aug 02, 2018 am 09:29 AM

打字機效果

#目錄
隨機速度的打字機效果

效果

##引用到的知識點
利用定時器觸發線程
#利用事件觸發線程

快速連結

js執行緒的案例— —實現隨機速度的打字機效果

##隨機速度的打字機效果

效果

程式碼

html部分

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>typeWriter</title>
    <style type="text/css">
        h2,h5,#tooltipMsg,p{            white-space: nowrap;        }
        td{            border: 1px solid #ccc;            height: 50px;            text-align: center;            font-size: 10pt;            padding: 2px;        }
    </style></head><body>
    <h2 id="实现打字机效果">实现打字机效果</h2>
    <p id="typeWriterEffect"></p>
    <p id="typeWriterEffect2"></p>
    <script type="text/javascript" src="typeWriter.js"></script></body></html>

js部分<pre class='brush:php;toolbar:false;'>window.onload=function(){ var twArr = [],//打字的数据库队列 twing = false,//用于判断打字机的线程是否开启 twID = [],//打字机线程ID twTime = 10,//用于定时调用的时间 obj1 = document.getElementById("typeWriterEffect"), obj2 = document.getElementById("typeWriterEffect2"), twEffect = function(e,str){//添加显示的元素 twArr.push({ "context":e,//目标元素上下文 "str":str,//显示的元素 "lening":0,//截取的进度 "maxL":str.length//最大的进度 }) }, closeTw = function(){//关闭定时调用 clearTimeout(twID);//关闭线程 twing = true; }, twUi = function(){//定时调用 var i = 0, L = twArr.length, eing = null; for (var i = 0; i < L; i++) { eing = twArr[i]//效果同时加载多对象数组 eing.lening++; if (eing.lening>eing.maxL) {//不设置关闭线程则打字效果循环 eing.lening = 0; } eing.context.innerHTML = eing.str.substring(0,eing.lening)+"_"; } var num = Math.floor(Math.random()*50+1);//1-50个随机数 console.log(num); twID = setTimeout(twUi,num*twTime);//开启线程 if(twID==eing.maxL){//到达最后关闭线程 closeTw(); } }, //开启定时调用，参数为设置定时调用的时间 startTw = function (twTime) { if (!twing) {//如果没有开启才开启 twTime = twTime; twUi();//开始定时调用 } }; //设置内容对象数组 twEffect(obj1,"这就是打字机效果,打字速度随机哦！！！！！"); //开始调用线程 startTw(twTime); }</pre>引用到的知識點
線程js的單一線程（single threaded）和非同步（asynchronous）的，但並不互相矛盾，js的宿主環境（例如瀏覽器，Node）是多執行緒的，宿主環境透過某種方式使得js具備了非同步的屬性。

setTimeout(function(){
    console.log(time is out);
}，50）;

有的人就會問到定時器setTimeout

和

setinterval

的區別：

setTimeout(表延時時間)在執行時,是在載入後延遲指定時間後

只去執行一次表達式,

而setInterval(表交互時間)則不一樣,它從載入後,

每隔指定的時間就執行一次表達式

利用定時器觸發執行緒

（缺點：耦合度高）

function f1(callback){setTimeout(function(){
    // f1 的代码
    callback();
},0);
}
f1(f2);

利用事件觸發執行緒

（缺點：可以透過綁定不同的事件，實現不同的回呼函數，如果應用此方法過多，不利於閱讀程式）

$f1.on(&#39;custom&#39;,f2);  //这里绑定事件以jQuery写法为例function f1(){setTimeout(function(){
    // f1的代码
    $f1.trigger(&#39;custom&#39;);
},0);
}

隨機數字
##Math.random() 取0-1隨機數

同理拓展範例：

Math.random()*10取0-10隨機數（包含一大堆小數點）

Math.random()*10 1取1-10隨機數

Math.random()*10 2取2-10隨機數Math.random()*899 100取100-999隨機數其中常用：
Math.floor(）

只取隨機數整數部分

JS實作的打字機效果完整實例

JS實作的打字機效果範例程式碼#########相關影片：##########實作全螢幕切換效果實戰影片教學#######

以上是js執行緒的案例— —實現隨機速度的打字機效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Java vs JavaScript：開發人員的詳細比較May 16, 2025 am 12:01 AM

javaandjavascriptaredistinctlanguages：javaisusedforenterpriseandmobileapps，while javascriptifforInteractiveWebpages.1）JavaisComcompoppored，statieldinglationallyTypted，statilly tater astrunsonjvm.2）

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。