代码之家 › 专栏 › 技术社区 › Sarah Marie

单击按钮,用随机颜色/大小将每个字母设置为字符串样式

font-size colors random javascript

Sarah Marie · 技术社区 · 2 年前

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h1 id="header" name="header" value="">JavaScript is fun!</h1>
  <button type="button" onclick="randomizeText()">Randomize!</button>

  <script language="JavaScript">
    // <!--
    function generateRandomColor() {
      var colors = ["green", "blue", "red", "yellow", "cyan", "orange", "magenta"];
      var randomColor = colors[Math.floor(Math.random() * colors.length)];
      return randomColor;
    };

    function generateRandomFontSize() {
      var sizes = ["12px", "14px", "16px", "18px", "20px"];
      var randomSize = sizes[Math.floor(Math.random() * sizes.length)];
      return randomSize;
    };

    function randomizeText() {
      document.getElementById("header").style.color = generateRandomColor();
      document.getElementById("header").style.fontSize = generateRandomFontSize();
      // var newHeaderText = "";
      // for (var i = 0; i < headerText.length; i++) {
      //     var letter = headerText.charAt(i);
      //     // letter.style.fontSize.generateRandomFontSize();
      //     // letter.style.color.generateRandomColor();
      //     // newHeaderText = newHeaderText.concat(letter);
      // }
      // document.write(newHeaderText);
    };

    // document.getElementById("header").innerHTML = headerText;

    // Javascript ends here-->
  </script>
</body>

</html>

1 回复 | 直到 2 年前

IT goldman 2 年前

split 和 join 字符串,用一个 span 。然后可以为每个跨度指定不同的颜色。

function generateRandomColor() {
  var colors = ["green", "blue", "red", "yellow", "cyan", "orange", "magenta"];
  var randomColor = colors[Math.floor(Math.random() * colors.length)];
  return randomColor;
};

function generateRandomFontSize() {
  var sizes = ["12px", "14px", "16px", "18px", "20px"];
  var randomSize = sizes[Math.floor(Math.random() * sizes.length)];
  return randomSize;
};

function randomizeText() {
  var elem = document.getElementById("header")
  elem.style.color = generateRandomColor();
  elem.style.fontSize = generateRandomFontSize();

  elem.innerHTML = span_it(elem.innerText);
  // now each letter
  var spans = elem.querySelectorAll("span");
  spans.forEach(span => span.style.color = generateRandomColor())


};

function span_it(str) {
  return str.split("").map(letter => "<span>" + letter + "</span>").join("")
}

<h1 id="header" name="header" value="">JavaScript is fun!</h1>
<button type="button" onclick="randomizeText()">Randomize!</button>

推荐文章

Sarah Marie · 单击按钮,用随机颜色/大小将每个字母设置为字符串样式

2 年前

narb · 如何根据xcode中的屏幕大小定义按钮的字体

7 年前

user3348410 · 为什么我的em边距计算不正确?

7 年前

nuuse · itextsharp仅在空格上自动调整字体大小和换行符

7 年前

mitchmitch24 · 是否更改Power BI中的默认字体大小?

7 年前

Alex Nevado · 为什么在将HTML传递到HTML组件(hc:HTML)时忽略字体大小?

7 年前

Egor Kolyshkin · 如何在不考虑设备方向的情况下自动设置UIButton的字体大小更改?

7 年前

adi518 · 计算手机的CSS字体大小

7 年前

Gozie · Django fontsize tinymce

7 年前

James · 使用我的网站上的按钮更改h1/h2/h3的字体大小(使用本地存储)

8 年前