js窗口震动小程序分享
更新时间：2016年11月28日 10:19:48 作者：塞上江南果
这篇文章主要为大家分享了js窗口震动小程序,可设置抖动的频率，范围，和次数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言：窗口震动的应用是很常见的，比如最常用的聊天软件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; //统计震动次数
var timer; //定时器引用
var offx; //水平偏移量
var offy; //垂直偏移量
var dir; //控制震动方向
timer = setInterval(function(){
var win = document.getElementById("win");
if (loop > 100)
{
clearInterval(timer); //震动次数超过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>
在代码中主要就是利用随机数来控制抖动的方向和范围，还有用setInterval函数来设置抖动的频率，以及loop变量设置一次抖动的次数。自己可以根据实际需求来设置抖动的频率，范围，和次数。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JS promise 的回调和 setTimeout 的回调到底谁先执行
本文主要介绍了JS promise 的回调和 setTimeout 的回调到底谁先执行，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
Javascript showModalDialog两个窗体之间传值
前一篇文章Javascript怎么在两个窗体之间传值中讲到了如何利用window.open()方法打开新窗体，并在两个窗体之间传值的方法。2009-09-09
这篇文章主要介绍了js核心基础之构造函数constructor用法,结合具体实例形式分析了javascript构造函数constructor概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下2019-05-05
在本篇文章里小编给大家分享了关于js删除数组中某一项或几项的几种方法内容，有需要的朋友们学习下。2019-01-01
最近公司有个需求,第一次遇到,把原生的微信小程序代码转换为uni-app项目,下面这篇文章主要给大家介绍了关于微信小程序转换uniapp的迁移步骤以及遇到问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
本篇文章主要是对js中浮点型运算的问题进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
教你JavaScript利用charAt()统计出现次数最多的字符和次数
这篇文章主要介绍了JavaScript利用charAt()统计出现次数最多的字符和次数的操作方法，本文以判断一个字符串'aabcdobdackoppz'中出现次数最多的字符，并统计其次数为例，通过实例代码给大家详细介绍，需要的朋友参考下吧2021-08-08
这篇文章主要介绍了JavaScript异步forEach的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
本文主要介绍了JavaScript中数组Array方法的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了详解JavaScript 浮点数运算的精度问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
最新评论