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变量设置一次抖动的次数。自己可以根据实际需求来设置抖动的频率,范围,和次数。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。