javascript - 使用 javascript 在一天中的某些时间调整动画
问题描述
我正在尝试使用 Javascript 来更改 div 的移动量,具体取决于一天中的时间。
以下是我正在使用的代码:
<style>
.whiterose-w{
animation-duration: 0.05s;
animation-iteration-count: infinite;
position:absolute;
}
/* BETWEEN MIDNIGHT AND MIDDAY */
.whiterose07 {
animation-name: shake2;
}
@keyframes shake2 {
0% { transform: translate(0px); visibility: hidden; }
1% { visibility: visible;}
50% { transform: translate(0.7px);}
100% { transform: translate(0px); }
}
/* BETWEEN MIDDAY AND MIDNIGHT */
.whiterose56 {
animation-name: shake5;
}
@keyframes shake5 {
0% { transform: translate(0px); visibility: hidden; }
1% { visibility: visible;}
50% { transform: translate(5.6px);}
100% { transform: translate(0px); }
}
</style>
<script>
// WHITEROSE SPEEDING UP TOWARDS MIDNIGHT !
var currentTime = new Date().getHours();
if (0 <= currentTime && currentTime < 12) {
document.getElementsByClassName('whiterose-w').classList.add("whiterose07");
}
else if (12 <= currentTime && currentTime < 24) {
document.getElementsByClassName('whiterose-w').classList.add("whiterose56");
}
</script>
所以在中午和午夜之间 div 应该移动 5.6px ,在午夜和中午之间应该移动 0.7px ..但是我哪里出错了?
解决方案
推荐阅读
- spring - 无法创建简单的spring Boot Gateway api
- angular - 找出 Angular 项目中使用的更改事件的 Typescript 类型
- javascript - 如何用 Jest Javascript React Native 模拟“替换”功能?
- php - 如何使用 PHP 或 JavaScript 获取特定条件的当前 URL?
- delphi - Delphi 无效的类类型转换
- java - 哪种数据类型可用于在 Hibernate/jpa 中创建主键变量?
- java - 如何将输出从 java 到 .txt 文件。?JAVA
- filter - 如何在球拍中定义我自己的过滤程序版本?
- mysql - 行大小太大 - MySQL sequelize
- python - 我现在面临的货币转换问题