时间戳

首页 > 解决方案 > 我想使用javascript每秒更改“Hello World”的字体系列

javascript - 我想使用javascript每秒更改“Hello World”的字体系列

问题描述

它只更改一次字体系列，而它应该每秒更改一次字体系列。请让我知道问题出在哪里以及为什么它不起作用。谢谢！

</head>
<body>
    <h1 id="js_world">Hello World</h1>
    <script>
        window.onload = function(){

        var x = document.getElementById("js_world");
        x.style.fontFamily = "helvetica";

        function changeFontFamily(){
            if (x.style.fontFamily === "helvetica"){
                x.style.fontFamily = "times new roman";
               }
            else if (x.style.fontFamily === "times new roman"){
                x.style.fontFamily = "sans-serif";
                }else if(x.style.fontFamily === "sans-serif"){
                      x.style.fontFamily = "helvetica"
                      }
         };  
     window.setInterval(changeFontFamily,1000);
     }
     </script>
</body>

标签： javascripthtmlcssdom

解决方案

我建议使用这种方法，它使用setTimeout并将可能的字体存储在一个数组中。

var text = document.getElementById("text");
var fonts = ["Courier New", "Times New Roman", "Roboto"];
var i = 0;
function changeFont(){
  if(i!=fonts.length){
    text.style.fontFamily=fonts[i];
    i++;
  }else{
    i=0;
  }
  setTimeout(changeFont, 1000);
}
changeFont();
@import url('https://fonts.googleapis.com/css?family=Roboto');
<p id="text">Changing font? Wowza!</p>

如果您坚持使用自己的，可以查看Rap Sherlock 的答案。

推荐阅读