Question

我正在使用Javascript，Css和HTML创建一个简单的游戏。我创建了一个JavaScript函数，该函数从3到15生成随机数，然后添加一个s以使结果像（15s）一样，像在css中的动画持续时间一样使用。

我已经用谷歌搜索了，但是没有找到示例。

Js代码：

function rand() {
   var min=3; 
   var max=15;  
   var random = Math.random() * (+max - +min) + +min;
   var time = random+'s';
   return time;
}

Css代码：

.enemy {
 position: relative;
 right:300px;
 animation-name:move;
 animation-duration:(the rand() function here);
}

Answer 1

IE曾经支持CSS表达式，但是很早以前就已弃用它们，并且其他浏览器也不支持它们。您可以通过JS这样设置值：

document.querySelector('.enemy').style.animationDuration = rand() + 's';

当然，每次内容更改时都必须执行此操作（即，在与敌人的类一起添加元素时），您可能想使用querySelectorAll()对所有可能的元素执行此操作，并且遍历它们，处理不存在此类元素（因此返回null）等的情况。

基于https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3

的简短示例

function rand() {
   var min=3; 
   var max=15;  
   var random = Math.random() * (+max - +min) + +min;
   var time = random+'s';
   return time;
}
var randomDuration = rand();
console.log('animation duration: ' + randomDuration);
document.querySelector('.enemy').style.animationDuration = randomDuration;

.enemy {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

<div class="enemy"></div>

我想在CSS属性中使用Javascript函数

1 个答案: