时间戳

首页 > 解决方案 > 检测系统时间并在浏览器中设置css动画开始时间

javascript - 检测系统时间并在浏览器中设置css动画开始时间

问题描述

我有一个 html 页面，它有一个简单的 CSS 动画，没有什么特别的，只是两种颜色之间的背景过渡。

目前我似乎无法弄清楚如何获取系统时间并在指定时间触发动画触发器

我想在几个移动设备上用 chrome 加载它。获取系统时间，然后在达到预设时间时循环播放动画。

标签： javascriptjquerycss

解决方案

我animation-play-state根据第二个使用了一个例子。这适用于任何特定时间。

const div = document.querySelector("div");

function getTime(){
  let date = new Date();
  let second = date.getSeconds();
  console.log(second);
  
  if(second == 10){
    div.style.animationPlayState = "running";
  }
}
setInterval(function(){
  getTime();
},1);
div {
  width: 300px;
  height: 100px;
  background-color: red;
  animation:animate 2s linear infinite;
  animation-play-state:paused;
}

@keyframes animate {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}
<div></div>

推荐阅读