js窗口震动小程序分享


Posted in Javascript onNovember 28, 2016

前言:窗口震动的应用是很常见的,比如最常用的聊天软件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变量设置一次抖动的次数。自己可以根据实际需求来设置抖动的频率,范围,和次数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
详解vue 组件注册
Nov 20 Vue.js
JS获取年月日时分秒的方法分析
Nov 28 #Javascript
js中string和number类型互转换技巧(分享)
Nov 28 #Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 #Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 #Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 #Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 #Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 #Javascript
You might like
php echo 输出字符串函数详解
2010/05/13 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Django缓存系统实现过程解析
2019/08/02 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
英文留学推荐信范文
2014/01/25 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
安全保证书格式
2015/02/28 职场文书
详解python的内存分配机制
2021/05/10 Python
Java Spring读取和存储详细操作
2022/08/05 Java/Android
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android