我真的卡住了
出于某種原因，每當我使用style.animatonDuration代碼向我的div標簽添加css屬性時，它都不起作用。我想讓這個方塊持續五秒鐘，然后向左移動。
這是我的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 "的事情時，它就起作用了。但是對于動畫來說就不行了。有人知道為什么嗎？
animationDuration的值不是數字，但應該包含單位。 因此有效值可以是: 1s 2s 100毫秒 500毫秒
上一篇vue deffer
下一篇vue delete