您的位置：首页 > Web前端

小白练习打字机效果

2016-11-26 18:47 113 查看

用js写了一个打字机效果，

其实并不是一个字一个字显示，

而是利用了interval，每隔300ms显示一次，造成视觉上的错觉。

虽然写的很辣鸡，但是还是很有意思哒！~~~

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<title>打字机效果练习</title>

</head>

<body>

<div id="mytext" style="font-size: 30px"></div>

<script type="text/javascript">

var myt="js is amazing! let's do it!";
//输入文字
var mj=document.getElementById("mytext");
//定义要显示的文字
var i=0;
function change(){ //每隔0.3s执行一次函数
if(i<=myt.length){
mj.innerHTML=myt.substring(0,i); //每次多获取一个字符
i++;
}else{
window.clearInterval(interval);//清除时间间隔调用
}
}
var interval=window.setInterval(change,300);

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端菜鸟跑马灯

相关文章推荐

新的分享

章节导航