jquery利用substr简单实现打字机效果

作者: pengpeng 分类: 所有文章 发布时间: 2017-11-03 11:00

本篇标题:jquery利用substr简单实现打字机效果
由于jquery方便,所以在写一些小案例的时候,也比较习惯了调用jquery。这个打字机效果很简单,JavaScript完全也可以简单实现。
原理:先获取要打印的字符串总长度以及内容进行赋值,再把内容设置为空,然后定时器,每200毫秒截取一个长度,递增。

上图:
jquery利用substr简单实现打字机效果
代码:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<title>jquery利用substr简单实现打字机效果</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.cs {
margin: 0 auto;
min-width: 100px;
max-width: 800px;
min-height: 100px;
border:1px solid #000;
padding:15px;
border-radius:10px;
}
.cs p {
text-indent:2em;
}
</style>
</head>
<body>
<div class="cs">
<p>时间,带不走真正的朋友;岁月,留不住虚幻的拥有。时光转换,体会到缘分善变;平淡无语,感受了人情冷暖。有心的人,不管你在与不在,都会惦念;无心的情,无论你好与不好,只是漠然。走过一段路,总能有一次领悟;经历一些事,才能看清一些人。不离不弃的,才是真朋友;不见不散的,才是真守候。</p>
</div>
<script type="text/javascript">
$(function(){
var ys = $('.cs p');
var te = ys.html();
ys.html('');
var yslen = ys.html().length;
var index = 0;
var ik = '_';
function play(n){
var ht = ys.html();
var tec = te.substr(n,1);
var gy =   ht + tec ;
ys.html(gy);
}
var ds = setInterval(function(){
play(index);
index++;
if(index == yslen){
clearInterval(ds);
}
},200);
})
</script>
</body>
</html>

在线预览:点我预览

文件下载:

  jquery利用substr简单实现打字机效果.html (1.4 KB, 5 次)

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注