定时器和动画效果实现的JavaScript技巧

翻滚的胖子
2023-06-13 17:48:41
前端技术
JavaScript 图片处理

本文将教你如何使用JavaScript定时器和动画效果来实现网站上的动态效果。

JavaScript定时器

JavaScript定时器可以用来在指定的时间间隔内重复执行某个函数，或者在指定的时间间隔后执行某个函数。

下面是一个例子，说明如何使用JavaScript定时器来每隔一秒钟输出一次当前时间：

function showTime() {
  var now = new Date();
  var h = now.getHours();
  var m = now.getMinutes();
  var s = now.getSeconds();
  console.log(h + ":" + m + ":" + s);
}

setInterval(showTime, 1000);

在上面的例子中，我们使用了setInterval函数来每隔一秒钟调用一次showTime函数。

JavaScript动画效果

JavaScript动画效果可以用来实现网站上的一些动态效果，比如淡入淡出、滑动等效果。

下面是一个例子，说明如何使用JavaScript动画效果来实现一个元素的淡入效果：

function fadeIn(elem) {
  elem.style.opacity = 0;

  var tick = function() {
    elem.style.opacity = +elem.style.opacity + 0.01;
    if (+elem.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

在上面的例子中，我们定义了一个fadeIn函数，传入一个元素作为参数，然后在函数内部使用tick函数来实现元素的淡入效果。