如何在网页中实现打字效果

  如何在网页中实现打字效果
解决思路
所谓打字效果,就是让预定文字逐个显示出来。主要还是字符串的一些方法的运用。
具体步骤

1.先插入要显示打字效果的容器。

<span id="demo"></span>

2.加入脚本。

<script defer>
var text="JavaScript实现的打字效果"
var delay=200
var i=0
function scrollit(){
demo.innerText=text.slice(0,i++)+"_"         
if(i>text.length){
    i=0
    setTimeout("scrollit()",delay*10)       
}
else setTimeout("scrollit()",delay)             
}
scrollit()
</script>

3.完整代码。

<span id="demo"></span>
<script defer>
var text="JavaScript实现的打字效果"    //预定文字
var delay=200                         //文字出现的时间间隔
var i=0                               //初始化变量 i
function scrollit(){
//设置 id 为 demo 的对象内的文字为从变量 text 的 0 开始到 i 间的文字加"_"
demo.innerText=text.slice(0,i++)+"_"   
if(i>text.length){              //当 i 大于 text 的文本长度时
    i=0                           //重设 i 为 0,使文字重新从第一个文字出现
//延时执行scrollit()函数,delay*10是为了让显示完整文字的时间长一点
    setTimeout("scrollit()",delay*10)  
}
    //否则在delay毫秒后再次执行scrollit()函数
else setTimeout("scrollit()",delay)             
}
scrollit() //调用scrollit()函数
</script>

特别提示
代码运行后的效果如图 3.49所示。

图 3.49 JavaScript实现的打字效果

特别说明


JavaScript 中经常需要用到字符串的处理方法,方法不多,主要是要有良好的创意,才能用现有的方法来实现创造性的新效果。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值