js窗口震動小程序分享
更新時間：2016年11月28日 10:19:48 作者：塞上江南果
這篇文章主要為大家分享了js窗口震動小程序,可設(shè)置抖動的頻率，范圍，和次數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言：窗口震動的應(yīng)用是很常見的，比如最常用的聊天軟件qq，就有一個窗口抖動，還有在填表單時的出錯提醒，所以自己也寫了個很簡單的示例，以下是具體的代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>窗口震動</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)計震動次數(shù)
var timer; //定時器引用
var offx; //水平偏移量
var offy; //垂直偏移量
var dir; //控制震動方向
timer = setInterval(function(){
var win = document.getElementById("win");
if (loop > 100)
{
clearInterval(timer); //震動次數(shù)超過100就停止定時器
}
dir = Math.random()*10 > 5 ? 1 : -1; //獲得震動方向
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毫秒震動一次
</script>
</body>
</html>
在代碼中主要就是利用隨機數(shù)來控制抖動的方向和范圍，還有用setInterval函數(shù)來設(shè)置抖動的頻率，以及l(fā)oop變量設(shè)置一次抖動的次數(shù)。自己可以根據(jù)實際需求來設(shè)置抖動的頻率，范圍，和次數(shù)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
對象是組成JavaScript的基本單元。本章將從JavaScript語言中最重要的幾個部分開始介紹：引用，函數(shù)重載，作用域，閉包和上下文。有了這些知識后，面向?qū)ο箝_發(fā)就將變得簡單。2009-09-09
從URL中提取參數(shù)與將對象轉(zhuǎn)換為URL查詢參數(shù)的實現(xiàn)代碼
這兩種主要是對《Prototype淺析》先前略過的Sring部分中toQueryParams和Object部分的toQueryString方法的補充2012-01-01
JavaScript實現(xiàn)列出數(shù)組中最長的連續(xù)數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)列出數(shù)組中最長的連續(xù)數(shù)的方法及使用,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細介紹了js canvas實現(xiàn)寫字動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章給大家介紹了bootstrap table支持高度百分比的實例代碼，通過更改BootstrapTable.prototype.resetView 方法，以支持高度百分比定義，適應(yīng)不同高度屏幕，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
JS判斷輸入字符串長度實例代碼(漢字算兩個字符,字母數(shù)字算一個)
下面小編就為大家?guī)硪黄狫S判斷輸入字符串長度實例代碼(漢字算兩個字符,字母數(shù)字算一個)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
Echarts非常強大，配置也非常的多，有很多細節(jié)需要深入研究。這篇文章主要介紹了Echarts之懸浮框中的數(shù)據(jù)排序問題,需要的朋友可以參考下2018-11-11
在IE上直接編輯網(wǎng)頁內(nèi)容的js代碼(IE地址欄js)
在IE上直接編輯網(wǎng)頁內(nèi)容2009-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)輪播圖自動切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
在百度搜索結(jié)果中去除掉一些網(wǎng)站的資料(通過js控制不讓顯示)
這篇文章主要介紹了在百度搜索結(jié)果中去除掉一些網(wǎng)站的資料(通過js控制不讓顯示),需要的朋友可以參考下2017-05-05