Question

如何更改每个单词数组的字体？

$(function () {
count = 0;
wordsArray = [" Photographer", "n Art Director", " Taurus", "n Artist"];
setInterval(function () {
count++;
$("#change").fadeOut(200, function () {
  $(this).text(wordsArray[count % wordsArray.length]).fadeIn(200);
});
}, 2000);
});

Answer 1

这是一种工作方法：

$(function () {
  var count = 0,wordsArray = [];

wordsArray[0] = {"text": " Photographer","font": "arial"};
wordsArray[1] = {"text": "n Art Director","font": "verdana"};
wordsArray[2] = {"text": " Taurus","font": "times new roman"};
wordsArray[3] = {"text":"n Artist","font": "sans-serif"};
  setInterval(function () {
    count++;
    $("#change").fadeOut(200, function () {
      $(this).html("<span style='font-family:" + wordsArray[count % wordsArray.length].font + "'>" + wordsArray[count % wordsArray.length].text + "</span>").fadeIn(200);

    });
  }, 2000);
});

Answer 2

在给定多个选项的情况下，这是使font-family随机的选项。

$(function() {
  var count = 0;
  var wordsArray = [" Photographer", "n Art Director", " Taurus", "n Artist"];
  var fontfamilies = ["consolas", "times", "comic sans ms"]; //font options
  setInterval(function() {
    count++;
    $("#change").fadeOut(200, function() {
      let rando = Math.trunc((Math.random() * 100) % fontfamilies.length); //pick a random number
      console.log(`font:${rando} = ${fontfamilies[rando]}`); //for reference
      $(this).css("font-family", fontfamilies[rando]).text(wordsArray[count % wordsArray.length]).fadeIn(200);
    });
  }, 2000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Hello my name is Sasha<br> I am a<span id="change"> graphic designer</span> based in Melbourne</h1>

如何更改每个数组的字体

2 个答案: