目錄
#目錄
隨機速度的打字機效果
效果
利用定時器觸發線程
#利用事件觸發線程
##隨機速度的打字機效果
效果
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>实现打字机效果</h2>
<p id="typeWriterEffect"></p>
<p id="typeWriterEffect2"></p>
<script type="text/javascript" src="typeWriter.js"></script></body></html>js部分 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;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><div class="contentsignin">登入後複製</div></div>引用到的知識點
線程js的單一線程（single threaded）和非同步（asynchronous）的，但並不互相矛盾，js的宿主環境（例如瀏覽器，Node）是多執行緒的，宿主環境透過某種方式使得js具備了非同步的屬性。
setTimeout(function(){
console.log(time is out);
}，50）;setTimeout(表延時時間)在執行時,是在載入後延遲指定時間後
只去執行一次表達式,每隔指定的時間就執行一次表達式
利用定時器觸發執行緒（缺點：耦合度高）
function f1(callback){setTimeout(function(){
// f1 的代码
callback();
},0);
}
f1(f2);$f1.on('custom',f2); //这里绑定事件以jQuery写法为例function f1(){setTimeout(function(){
// f1的代码
$f1.trigger('custom');
},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中文網其他相關文章！
