JAvascriptはタイプライター効果を実現
2499 ワード
<style type="text/css">
body{
padding: 100px;
font: 16px/30px " ";
color: #f60;
}
#demo,#text {
height: 30px;
}
</style>
<p id="demo"> javascript </p>
<p id="text"> javascript </p>
<script type="text/javascript">
var typing = {
arr : [],
init : function (ops){
this.arr[ops.id] = {
id : ops.id,
time : ops.time || 1000,
isLoop : ops.isLoop || "true"
}
this.show(this.arr[ops.id]);
},
show : function (obj){
obj.demo = document.getElementById(obj.id);
obj.html = obj.demo.innerHTML;
obj.demo.innerHTML = "";
this.createTimer(obj);
},
createTimer : function (obj){
obj.maxlength = obj.html.length;
// 0
obj.index = 0;
obj.timer = setInterval(function (){
// html , _ html
obj.demo.innerHTML = obj.demo.innerHTML.substring(0,obj.demo.innerHTML.length-1) + obj.html.charAt(obj.index) + "_";
obj.index ++;
if (obj.index > obj.maxlength) {
if (obj.isLoop == "true") {
obj.demo.innerHTML = "";
obj.index = 0;
}else{
clearInterval(obj.timer);
obj.demo.innerHTML = obj.html;
}
}
},obj.time)
}
}
window.onload = function (){
//
// id
// time / 1000 /
// isLoop , true 。
typing.init({id:"demo",time :200});
typing.init({id:"text",time:500,isLoop:"false"});
}
</script>
</code></pre>
</article>
</div>
</div>