JS實(shí)現(xiàn)的打字機(jī)效果完整實(shí)例
更新時(shí)間：2016年06月20日 15:16:12 作者：cherry
這篇文章主要介紹了JS實(shí)現(xiàn)的打字機(jī)效果,結(jié)合完整實(shí)例形式分析了javascript定時(shí)觸發(fā)自定義函數(shù)模擬打字輸出效果的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)的打字機(jī)效果。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>JS打字機(jī)效果</title>
<meta name="description" content="">
<meta name="author" content="Administrator">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<style type = "text/css">
#main {
width: 80%;
height: 750px;
margin: auto;
padding: 10px;
background: #cfe1ca;
border: 10px outset #f9c6aa;
line-height: 30px;
color: #9f3c61;
font-size: 18px;
}
p {
text-indent: 30px;
}
</style>
<script type = "text/javascript">
var typeWriter = {
msg: function(msg){
return msg;
},
len: function(){
return this.msg.length;
},
seq: 0,
speed: 150,//打字時(shí)間(ms)
type: function(){
var _this = this;
document.getElementById("main").innerHTML = _this.msg.substring(0, _this.seq);
if (_this.seq == _this.len()) {
_this.seq = 0;
clearTimeout(t);
}
else {
_this.seq++;
var t = setTimeout(function(){_this.type()}, this.speed);
}
}
}
window.onload = function(){
alert("welcome to http://m.fzitv.net")
var msg = "JS打字機(jī)效果 ，原理很簡(jiǎn)單：每次多獲取一個(gè)待打出的字符串的值，輸出，覆蓋原來(lái)輸出的內(nèi)容即可";
function getMsg(){
return msg;
}
typeWriter.msg = getMsg(msg);
typeWriter.type();
}
</script>
</head>
<body>
<div id = "main"> </div>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript replace()正則替換實(shí)現(xiàn)代碼
javascript-replace()基礎(chǔ)，一次完成將"<,>"替換"<>"實(shí)例2010-02-02
解決canvas畫(huà)布使用fillRect()時(shí)高度出現(xiàn)雙倍效果的問(wèn)題
下面小編就為大家?guī)?lái)一篇解決canvas畫(huà)布使用fillRect()時(shí)高度出現(xiàn)雙倍效果的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
大家都知道JS在很多情況下會(huì)進(jìn)行強(qiáng)制類型轉(zhuǎn)換，最常見(jiàn)的方式有兩種，在文章均給大家提到，下面小編給大家?guī)?lái)了JS在if中的強(qiáng)制類型轉(zhuǎn)換，感興趣的朋友一起看看吧2018-07-07
JS實(shí)現(xiàn)圖片平面旋轉(zhuǎn)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)圖片平面旋轉(zhuǎn)的方法,涉及JavaScript操作頁(yè)面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,需要的朋友可以參考下2016-03-03
js實(shí)現(xiàn)一個(gè)簡(jiǎn)易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)一個(gè)簡(jiǎn)易計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
js中 某個(gè)函數(shù)的內(nèi)部函數(shù)在該函數(shù)執(zhí)行結(jié)束后仍然可以訪問(wèn)這個(gè)函數(shù)中定義的變量，這稱為閉包(Closure)2008-11-11
詳解CommonJS和ES6模塊循環(huán)加載處理的區(qū)別
這篇文章主要介紹了詳解CommonJS和ES6模塊循環(huán)加載處理的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
你在?JavaScript?代碼編寫(xiě)中有遇到過(guò)一個(gè)你需要比較或操作處理字符串,但是在開(kāi)始或者結(jié)尾有額外空格的情況嗎？在這篇博客中,我將給你展示如何使用不同的方法在?JavaScript?中修剪字符串,需要的朋友可以參考下2024-02-02
JavaScript實(shí)現(xiàn)五子棋游戲的方法詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)五子棋游戲的方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)五子棋游戲的具體步驟、原理與相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
JS打印gridview實(shí)現(xiàn)原理及代碼
打印gridview對(duì)于一些童鞋們真的是很陌生啊,不過(guò)沒(méi)有關(guān)系，因?yàn)楸疚牡某霈F(xiàn)，或讓你茅塞頓開(kāi)，好了話不多說(shuō)，感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)js高級(jí)知識(shí)有所幫助2013-02-02