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小時內與您取得聯系。

整合營銷服務商