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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
js计算精度问题小结
Apr 22 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
图文详解vue框架安装步骤
Feb 12 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
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
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
python3.6的venv模块使用详解
2018/08/01 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
python 如何在测试中使用 Mock
2021/03/01 Python
护士演讲稿范文
2014/01/05 职场文书
好家长事迹材料
2014/01/23 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
校长寄语大全
2014/04/09 职场文书
基层党员对照检查材料
2014/09/24 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
计算机教师工作总结
2015/08/13 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android