我真的被卡住了
出于某种原因，每当我使用style.animatonDuration代码将css属性添加到我的div标签时，它都不起作用。我想让正方形的持续时间为五秒并向左移动。
这是我的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”之类的操作时，它可以正常工作。但它不适用于动画。谁知道为什么会这样？
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%;}
}