Foreword: The application of window shaking is very common. For example, the most commonly used chat software QQ has a window shaking and an error reminder when filling in a form, so I also wrote a very simple example. The following are the details The code of
<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>
in the code mainly uses random numbers to control the direction and range of dithering, and also uses the setInterval function to set the frequency of dithering, and the loop variable to set the number of times of dithering. You can set the frequency, range, and number of dithers according to actual needs.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
