style.animationDuration不适用于javascript,尝试使用javascript添加css属性

vngu2lb8  于 2023-06-04  发布在  Java
关注(0)|答案(2)|浏览(171)

我真的卡住了
出于某种原因,每当我使用style.animatonDuration代码向div标记的what添加css属性时,它都不起作用。我想让正方形的持续时间为5秒,并向左移动。
下面是我的JavaScript代码

function Action(){
console.log("hello");
var age;
var name;
var time;
var have
age=document.getElementById("flo").value;
name=document.getElementById("coo").value;
time=document.getElementById("yo").value;
var danimation=document.querySelector("#yos");

var ac=0;
var a=0;
var b=0;
var c=0;
var d=0;

    if (isNaN(age))
    {

    a=1;

    }
    else
    {
    if (age<18)
    {


    b=1;
    ac=1;
    }

}



 if (isNaN(time))
 {
 c=1;


 }
 else {
    if (time>10 || time<1)
        d=1;


}

    if (a==1 && c==1){

    alert("Both variables for time and age are not numbers.  Please enter in a number");

}

else if (a==1 || c==1)
{
    alert("Please check your time and age input to see if they are both numbers!");

}

else {
        if (ac==1 && d==1)
        {
            alert("Not only are you not old enough, but you choose wrong time variables");

        }

        else if (ac==1)
            alert("You are not old enough");

        else if (d==1)
            alert("Please enter a number between 1 and 10");

    }



 if (a==0 && b==0 && c==0 && d==0)
{

console.log("Alright, this is correct");
document.getElementById("results").innerHTML="Alright  "+name+ ", this will 
run for "+time + " seconds";

(here is the problem.  I'm trying to add a css property that animations the yos div tag.  It works with someone like danimation.style.backgroundColor but it doesn't work for this one.)    
danimation.style.animationDuration="5s";
danimation.style.height="100px";
 }



   }

下面是我的css代码

#yos{

border-style:solid;
top:80%;
height: 50px;
width: 50px;
position: absolute;
animation name: example



  }

  @keyframes example{
0% {left: 0px;}
70%  {left: 200px;}

  }

  h1{

text-align: center;

}
 #identify{

text-align:center;
}

.container{

border-style: dotted;
width: 800px;
height: 400px;
position: absolute;
right: 550px;

}

.ind{
float:left;

position:relative;
top: 20%;
padding: 40px;
left:200px;
width: 60px;

}

 .ident{
 position:relative;
 display:inline;
 float: left;
 text-align:center;

 padding: 10px;

 }
 #one.ind{

  background-color:yellow;
  }
  #two.ind{
  background-color:blue;

 }

 #three.ind{
background-color:red;
 }
form {

position: absolute;
top: 60%;
right: 120px;

 }
button{

 position: absolute;
 top: 70%;
 right: 45%;

 }

 #results {
 top: 60%;
 right:50%;
position: absolute;

}

这是我的html

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="project" content="hello">
<title></title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="2css.css">
<h1>Set the distance!</h1>
<p id="identify">To play this game, you must be at least 18 years old.  You 
must also fill out some information.</p>

<div class="container">
<div class="ind" id="one"><p id="mee">Name</p></div>
<div class="ind" id="two"><p id="metoo">Age</p></div>
<div class="ind" id="three" ><p id="methree">Time(seconds)</p></div>

<form>
<input type="textbox" id="coo" class="texts">
<input type="textbox" id="flo" class="texts">
<input type="textbox" id="yo" class="texts">

</form>

<button onclick="Action();">Click to calculate</button>

</div>
<script type="text/javascript" src="Application.js"></script>
<p id="results" value="yo">Hey</p>

<div id="yos">
</div>

我正在尝试使id为yos的div标签向右移动大约5秒钟。当我做一些像style.backgroundcolor=“blue”这样的事情时,它就起作用了。但它不适用于动画。有人知道为什么吗?

ldxq2e6h

ldxq2e6h1#

div {
  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;
  animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {left:0%;}
  100% {left:100%;}
}

/* Standard syntax */
@keyframes example {
  0%   {left:0%;}
  100% {left:100%;}
}
58wvjzkj

58wvjzkj2#

animationDuration的值不是数字,但应包括单位。因此,有效值可以是:1s 2s 100ms 500ms

相关问题