JS完整案例之文字抖动效果

S文字抖动效果，重点是DIV、数组、定时器的应用。

思路

将文字放于显示的层上，组成数组，用setTimeOut()函数来操纵。

页头

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS文字抖动效果</title>
</head>
<body>
<script language="javascript">

将字符串放置于层上

var strname="欢迎观看钱庄王员外制作的文字抖动效果";
var strlen=strname.length;
var dstr="";
var ssize=50;
function fdiv(){
for (i=0;i<strlen;++i){
dstr=dstr+'<div id=aa'+i+' style="font-size:20px; top:200px; left:'+ssize+'px; position:absolute;">'+strname.charAt(i)+'</div>';
ssize=ssize+22;
}
document.write(dstr);
}
fdiv();

对字符串进行抖动，setTimeOut()的应用

var sumstr=new Array(-1,-6,-10,-15,-10,-6,-1);
var sublen=sumstr.length;
var i=1;
function dmove(){
var s="";
if (i!=1){Parray(i);}
Larray(i);
++i;
if (i==strlen) i=0;
setTimeout("dmove()",100);
}

文字抖动时，将前面的文字至于水平状态

function Parray(n){
for (i1=1;i1<n;++i1){
ob=document.all("aa"+(i1));
ob.style.top=200+"px";
}
}

通过sumstr数组来设置文字的位置高度，出现抖动的效果

function Larray(n){
for (i2=0;i2<sublen;++i2){
if ((n+i2)<strlen){
ob=document.all("aa"+(n+i2));
ob.style.top=((200+sumstr[i2])+"px");
}
}
}

页尾，dmove()是页面加载时执行

dmove();
</script>
</body>
</html>

代码是完整的，copy下来测试一下即可。

看演示及效果视频，请点击下面链接：

JS制作文字抖动效果演示

(科技自媒体原创作者：钱庄王员外)

么是js防抖动?

我是这样理解的，限制某个事件（函数）在指定时间内不重复触发。比如有一个输入框，当用户输入后进行远程搜索，如果不限制频次，用户每输入一个字符就会发起网络请求，但请求的很大可能不是用户想要的，这时候就可以用防抖动机制，规定用户在500ms内没有新的输入才发起网络请求。

一个简单的防抖实现

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>debouce-每天一个知识点</title>

  </head>

  <body>

    <input type="text" id="name" />

  </body>

  <script>

    //防抖函数

    function debounce(fn, wait = 500) {

      var timer;

      return function() {

        clearTimeout(timer);

        timer = setTimeout(fn, wait);

      };

    }

    //自己业务函数

    function yourFunction() {

      var value = document.querySelector("#name").value;

      console.log(value);

    }

    //使用

    document

      .querySelector("#name")

      .addEventListener("input", debounce(yourFunction, 500));

  </script>

</html>

这是没有防抖动的效果

这是加了防抖函数的效果

者： ConardLi

转发链接：https://mp.weixin.qq.com/s/IG9xt25Jj_KHkYnUNZsXdw

在线咨询

上一篇：HTML表格制作
下一篇：HTML5简介

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商