js定时器+简单的动画效果实例(2)

日期：2020-05-11 栏目：程序人生 浏览：次

3.事件与动画结合

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件与动画结合</title>
  <style>
    body {
      margin: 0px;
    }
  </style>
</head>
<body>
<script>
  // 获取<body>元素
  var body = document.body;
  // 当页面加载完毕后，设置当前<body>元素的高度为当前浏览器窗口的高度
  window.onload = function(){
    setHeight(body);
  };
  // 当用户改变浏览器窗口的大小时，重新设置<body>元素的高度(等于当前窗口的高度)
  window.onresize = function(){
    setHeight(body);
  };
  // 定义函数 - 设置<body>元素的高度等于当前窗口的高度
  function setHeight(elem){
    elem.style.height = window.innerHeight + 'px';
  }

  var width = 100,height = 100;
  // 为<body>元素绑定click事件
  body.onclick = function(event){
    var x = event.clientX;
    var y = event.clientY;
    // 创建<div>元素，显示的位置在鼠标当前的坐标值
    var div = document.createElement('div');
    div.setAttribute('class','circle');
    body.appendChild(div);
    // rgb(0,0,0)格式 -> 颜色随机
    var r = parseInt(Math.random()*255);
    var g = parseInt(Math.random()*255);
    var b = parseInt(Math.random()*255);

    div.style.width = width + 'px';
    div.style.height = height + 'px';
    div.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
    div.style.borderRadius = '50%';
    div.style.opacity = 1;
    div.style.position = 'absolute';
    div.style.left = x - width/2 + 'px';
    div.style.top = y - height/2 + 'px';

    animate(div);
  }
  // 定义函数 -> 实现动画效果
  function animate(elem){
    var style = window.getComputedStyle(elem,null);
    /*var width = parseInt(style.width);
    var height = parseInt(style.height);
    var left = parseInt(style.left);
    var top = parseInt(style.top);
    width++;
    height++;
    elem.style.width = width + 'px';
    elem.style.height = height + 'px';
    elem.style.left = (left - 0.5) + 'px';
    elem.style.top = (top - 0.5) +'px';*/

    var opacity = style.opacity;

    if (opacity <= 0){
      clearTimeout(t);
      // 删除当前元素
    }

    opacity -= 0.01;
    elem.style.opacity = opacity;

    // 设定定时器
    var t = setTimeout(function(){
      animate(elem);
    },50);
  }

</script>
</body>
</html>

以上这篇js定时器+简单的动画效果实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持黑区网络。