search

Home >Web Front-end >JS Tutorial >js window shaking applet sharing

js window shaking applet sharing

高洛峰
高洛峰Original
2016-12-03 16:47:581553browse

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.


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery extension implements method to prompt how many bytes can be input in textNext article：jQuery extension implements method to prompt how many bytes can be input in text

Related articles

See more