js窗口震动小程序分享
前言:窗口震动的应用是很常见的,比如最常用的聊天软件qq,就有一个窗口抖动,还有在填表单时的出错提醒,所以自己也写了个很简单的示例,以下是具体的代码
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>窗口震动</title> </head> <body> <divstyle="background:#ff0;width:200px;height:200px;margin-top:200px;margin-left:600px"id="win"></div> <scripttype="text/javascript"> varloop=0;//统计震动次数 vartimer;//定时器引用 varoffx;//水平偏移量 varoffy;//垂直偏移量 vardir;//控制震动方向 timer=setInterval(function(){ varwin=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变量设置一次抖动的次数。自己可以根据实际需求来设置抖动的频率,范围,和次数。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。