用javaScript結(jié)合jQuey實(shí)現(xiàn)打字機(jī)打字的效果。
- 現(xiàn)在HTML里寫入需要顯示的文字，按標(biāo)簽分好類。
- 用CSS給不同的字體屬性類設(shè)置不同的顯示效果。
- 在javaScript里結(jié)合jQuey實(shí)現(xiàn)一個(gè)一個(gè)字符動(dòng)態(tài)顯示的效果。
效果圖：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打字機(jī)效果</title>
<style>
/*關(guān)鍵字*/
.keyword {
color: #7f0055;
font-weight: bold;
}
/*行縮進(jìn)*/
.placeholder {
margin-left: 15px;
}
/*空格*/
.apace {
margin-left: 7px;
}
/*注釋*/
.comments {
color: #3f7f5f;
}
</style>
<script src="./jquery.js"></script>
</head>
<body>
<div class="typewriter">
<span class="comments">/**</span><br />
<span class="space"><span class="comments">* 這是注釋</span><br/>
<span class="space"><span class="comments">* /</span><br/>
<span class="keyword">var</span> str = "hello world".<span class="keyword">substr</span>(6)<br />
<span class="keyword">console.log</span>(str);<br />
<span class="comments">// world</span><br/>
<span class="keyword">if</span>(1===1) {<br />
<span class="placeholder" >str = "你好 世界"<br />
}<br/>
</div>
</body>
</html>
<script>
var element=$(".typewriter"); //類數(shù)組
//console.log(element)
var str=element.html();
//console.log(str)
element.html("") //將element元素下的內(nèi)容替換為""
var progress=0;
var ticket=setInterval(function(){
var current=str.substr(progress,1);
if(current=="<"){
progress=str.indexOf(">",progress)+1;
}else{
progress=progress+1;
}
element.html(str.substring(0,progress) + (progress % 5 ? "_" :""));
if(progress>=str.length-1){
//element. html(str.substring(0 , progress));
clearInterval(ticket);
}
},70);
</script>
