<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>窗口震動(dòng)</title>

</head>

<body>
<div style="background:#ff0; width:200px; height:200px; margin-top:200px; margin-left:600px" id="win"></div>

<script type="text/javascript">
 var loop = 0; //統(tǒng)計(jì)震動(dòng)次數(shù)
 var timer; //定時(shí)器引用
 var offx; //水平偏移量
 var offy; //垂直偏移量
 var dir; //控制震動(dòng)方向

 timer = setInterval(function(){
  var win = document.getElementById("win");
  if (loop > 100)
  {
   clearInterval(timer); //震動(dòng)次數(shù)超過(guò)100就停止定時(shí)器
  }
  dir = Math.random()*10 > 5 ? 1 : -1; //獲得震動(dòng)方向
  offx = Math.random()*20*dir;
  offy = Math.random()*20*dir;
  win.style.marginTop = 200+offx+"px";
  win.style.marginLeft = 600+offy+"px";
  loop++;
 },10) //每隔10毫秒震動(dòng)一次 
</script>
</body>
</html>

在代碼中主要就是利用隨機(jī)數(shù)來(lái)控制抖動(dòng)的方向和范圍，還有用setInterval函數(shù)來(lái)設(shè)置抖動(dòng)的頻率，以及l(fā)oop變量設(shè)置一次抖動(dòng)的次數(shù)。自己可以根據(jù)實(shí)際需求來(lái)設(shè)置抖動(dòng)的頻率，范圍，和次數(shù)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS promise 的回調(diào)和 setTimeout 的回調(diào)到底誰(shuí)先執(zhí)行
本文主要介紹了JS promise 的回調(diào)和 setTimeout 的回調(diào)到底誰(shuí)先執(zhí)行，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
Javascript showModalDialog兩個(gè)窗體之間傳值
前一篇文章Javascript怎么在兩個(gè)窗體之間傳值中講到了如何利用window.open()方法打開(kāi)新窗體，并在兩個(gè)窗體之間傳值的方法。
2009-09-09
js核心基礎(chǔ)之構(gòu)造函數(shù)constructor用法實(shí)例分析
這篇文章主要介紹了js核心基礎(chǔ)之構(gòu)造函數(shù)constructor用法,結(jié)合具體實(shí)例形式分析了javascript構(gòu)造函數(shù)constructor概念、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-05-05
js刪除數(shù)組中某幾項(xiàng)的方法總結(jié)
在本篇文章里小編給大家分享了關(guān)于js刪除數(shù)組中某一項(xiàng)或幾項(xiàng)的幾種方法內(nèi)容，有需要的朋友們學(xué)習(xí)下。
2019-01-01
微信小程序轉(zhuǎn)換uniapp的遷移步驟以及遇到的問(wèn)題總結(jié)
最近公司有個(gè)需求,第一次遇到,把原生的微信小程序代碼轉(zhuǎn)換為uni-app項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于微信小程序轉(zhuǎn)換uniapp的遷移步驟以及遇到問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
淺析js中的浮點(diǎn)型運(yùn)算問(wèn)題
本篇文章主要是對(duì)js中浮點(diǎn)型運(yùn)算的問(wèn)題進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
教你JavaScript利用charAt()統(tǒng)計(jì)出現(xiàn)次數(shù)最多的字符和次數(shù)
這篇文章主要介紹了JavaScript利用charAt()統(tǒng)計(jì)出現(xiàn)次數(shù)最多的字符和次數(shù)的操作方法，本文以判斷一個(gè)字符串'aabcdobdackoppz'中出現(xiàn)次數(shù)最多的字符，并統(tǒng)計(jì)其次數(shù)為例，通過(guò)實(shí)例代碼給大家詳細(xì)介紹，需要的朋友參考下吧
2021-08-08
JavaScript?中的異步?forEach
這篇文章主要介紹了JavaScript異步forEach的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07
JavaScript中數(shù)組Array方法詳解
本文主要介紹了JavaScript中數(shù)組Array方法的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
詳解JavaScript 浮點(diǎn)數(shù)運(yùn)算的精度問(wèn)題
這篇文章主要介紹了詳解JavaScript 浮點(diǎn)數(shù)運(yùn)算的精度問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07