<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<title></title>
<style type="text/css">
body{
padding: 100px;
font: 16px/30px "微软雅黑";
color: #f60;
}
#demo,#text {
height: 30px;
}
</style>
</head>
<body>
<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>
</body>
</html>
javascript 实现打字机效果
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前言 在做splash界面的时候，需要做类似于打字机打字的效果，字一个一个地蹦出来，显示每一个字都带有打字的声...
