使用符號創建基本動畫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

回答

相關問題