如何重复使用CSS和Javascript设置的动画onclick？我是一个非常初学者的代码作家，知道HTML，CSS和Javascript。我不知道为什么以下在线点击和功能只是一次工作。如果你能帮助我，我将不胜感激。如何重复动画（CSS和Javascript onclick）

代码

function discharge() { 
 
    document.getElementById("electron").style.visibility = "visible"; 
 
    document.getElementById("electron").style.WebkitAnimation = "mymove 5s 1 backwards"; // Code for Chrome, Safari, and Opera 
 
    document.getElementById("submit").style.backgroundColor = "lightblue"; 
 
    document.getElementById("submit").style.boxShadow = "0px 3px 3px red"; 
 
    document.getElementById("submit1").style.backgroundColor = "#4CAF50"; 
 
    document.getElementById("submit1").style.boxShadow = "0px 0px 0px red"; 
 
}

#electron { 
 
    position: relative; 
 
    left: -10px; 
 
    visibility: hidden; 
 
} 
 
@-webkit-keyframes mymove { 
 
    0% { 
 
     left: 0px; 
 
     top: 0px; 
 
    } 
 
    25% { 
 
     left: -32px; 
 
     top: 0px; 
 
    } 
 
    50% { 
 
     left: -32px; 
 
     top: -20px; 
 
    } 
 
    75% { 
 
     left: 158px; 
 
     top: -20px; 
 
    } 
 
    100% { 
 
     left: 158px; 
 
     top: 5px; 
 
    } 
 
}

<div> 
 
    <button id="submit" onclick="discharge()">Discharge</button> 
 
    <button id="submit1">charge</button> 
 
</div> 
 

 
<div id="electron"> 
 
    <br /><i class="fa fa-minus-circle"></i> 
 
    <br /><i class="fa fa-minus- circle"></i> 
 
    <br /> 
 
</div>

来源

2017-02-15 Peter

'charge（）'在哪里？ – Skylark

请使用答案为您解决问题

HTML

<div> 
    <button id="submit" onclick="discharge()">Discharge</button> 
    <button id="submit1" onclick="charge()">charge</button> 
</div> 

<div id="electron"> 
    <br/><i class="fa fa-minus-circle"></i> 
    <br/><i class="fa fa-minus- circle"></i> 
    <br/> 
</div>

的JavaScript

discharge = function() { 
    document.getElementById("electron").style.visibility = "visible"; 
    document.getElementById("electron").style.WebkitAnimation = "mymove 5s 1 backwards"; // Code for Chrome, Safari, and Opera 
    document.getElementById("submit").style.backgroundColor = "lightblue"; 
    document.getElementById("submit").style.boxShadow = "0px 3px 3px red"; 
    document.getElementById("submit1").style.backgroundColor = "#4CAF50"; 
    document.getElementById("submit1").style.boxShadow = "0px 0px 0px red"; 
} 

charge = function(){ 
document.getElementById("electron").removeAttribute('style'); 
document.getElementById("submit").removeAttribute('style'); 
document.getElementById("submit1").removeAttribute('style'); 
}

在CSS没有变化。

来源

2017-02-16 10:58:07

谢谢它的工作原理:) – Peter

给出具有定义功能的问题javascript代码。请使用discharge = function(){ 有喜欢electron和li 一些缺少的元素同样，我不能找到一个名为charge()

，所以我有评论缺少的元素与下面提供的任何功能。

discharge = function() { 
// document.getElementById("electron").style.visibility = "visible"; 
// document.getElementById("li").style.visibility = "visible"; 
// document.getElementById("electron").style.WebkitAnimation = "mymove 5s 1 backwards"; // Code for Chrome, Safari, and Opera 
document.getElementById("submit").style.backgroundColor = "lightblue"; 
document.getElementById("submit").style.boxShadow = "0px 3px 3px red"; 
document.getElementById("submit1").style.backgroundColor = "#4CAF50"; 
document.getElementById("submit1").style.boxShadow = "0px 0px 0px red";}

来源

2017-02-15 17:31:00

谢谢。你是对的。这是正确的版本： – Peter

我在问题部分修复了这个问题。谢谢你的帮助。我期待着您的回音。 – Peter

是的，这也很好。 –

如何重复动画（CSS和Javascript onclick）

代码

回答

相关问题