使用符号创建基本动画JavaScript/HTML

我想通过使用setInterval（）和switch语句循环使用/ | - 符号来制作基本的加载动画。此代码不起作用，它有什么问题？这是我第一次尝试使用setInterval（）函数，所以我用它不正确？使用符号创建基本动画JavaScript/HTML

<body> 
<button onClick = "time()">Start</button> 
<p id = "display">\</p> 
</body> 
<script> 
function time(){ 
    var timeVar = setInterval(function(){spinner();},300); 
} 
function spinner(){ 
    var phase = document.getElementById("display").value; 
    switch(phase){ 
    case "|": 
     document.getElementById("para").innerHTML = "/"; 
     break; 
    case "/": 
     document.getElementById("para").innerHTML = "-"; 
     break; 
    case "-": 
     document.getElementById("para").innerHTML = "\"; 
     break; 
    case "\": 
     document.getElementById("para").innerHTML = "|"; 
     break; 
    } 
}; 
</script>

来源

2014-11-02 Vulcan

你的意思是用'不work'？什么是/没有发生？请详细说明 – Bowdzone 2014-11-02 16:21:00

这里的几个问题：

你必须写"\\"
你混合display和para
你混合value和innerHTML

尝试：

<button onClick = "time()">Start</button> 
<p id = "para">\</p> 

<script> 
    function time(){ 
     var timeVar = setInterval(function(){spinner();},300); 
    } 
    function spinner(){ 
     var phase = document.getElementById("para").innerHTML; 
     switch(phase){ 
      case "|": 
       document.getElementById("para").innerHTML = "/"; 
       break; 
      case "/": 
       document.getElementById("para").innerHTML = "-"; 
       break; 
      case "-": 
       document.getElementById("para").innerHTML = "\\"; 
       break; 
      case "\\": 
       document.getElementById("para").innerHTML = "|"; 
       break; 
     } 
    }; 
</script>

来源

2014-11-02 16:18:56

演示 - http://jsfiddle.net/victor_007/y8shfpk6/

更换para到display在switch语句

function time() { 
 
    var timeVar = setInterval(function() { 
 
    spinner(); 
 
    }, 300); 
 
} 
 

 
function spinner() { 
 
    var phase = document.getElementById("display").innerHTML; 
 
    //console.log(phase) 
 
    switch (phase) { 
 
    case "|": 
 
     document.getElementById("display").innerHTML = "/"; 
 
     break; 
 
    case "/": 
 
     document.getElementById("display").innerHTML = "-"; 
 
     break; 
 
    case "-": 
 
     document.getElementById("display").innerHTML = "\\"; 
 
     break; 
 
    case "\\": 
 
     document.getElementById("display").innerHTML = "|"; 
 
     break; 
 
    } 
 
};

<button onClick="time()">Start</button> 
 
<p id="display">\</p>

来源

2014-11-02 16:45:49

使用符号创建基本动画JavaScript/HTML

回答

相关问题