HTML的字隨機改變顏色代碼是一種非常有趣的效果，可以讓網(wǎng)頁看起來更加生動和動態(tài)。它的實現(xiàn)原理其實很簡單，就是利用JavaScript隨機生成顏色代碼，然后通過CSS樣式將字體的顏色設(shè)置為隨機生成的顏色。下面是一個示例代碼：
<html>
<head>
<style>
p {
color: #000000;
}
</style>
<script>
function randomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i< 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
setInterval(function() {
var elements = document.getElementsByTagName("p");
for (var i = 0; i< elements.length; i++) {
elements[i].style.color = randomColor();
}
}, 1000);
</script>
</head>
<body>
<p>這是一段文字，它的顏色將不斷隨機改變</p>
<p>這是另外一段文字，它的顏色也將不斷隨機改變</p>
</body>
</html>上面的代碼中，我們首先在CSS樣式中將p標(biāo)簽的字體顏色設(shè)置為黑色。然后，在JavaScript中定義了一個randomColor函數(shù)，它會隨機生成一個6位的顏色代碼。接著，在 setInterval 函數(shù)中，我們獲取到了頁面上所有的p標(biāo)簽，并將它們的字體顏色設(shè)置為隨機生成的顏色。最后，我們將 setInterval 函數(shù)的時間間隔設(shè)置為1000毫秒，也就是1秒，這樣每隔1秒鐘就會執(zhí)行一次隨機改變顏色的操作。
運行上面的代碼，就可以看到頁面上的字體顏色不斷隨機改變了。當(dāng)然，除了p標(biāo)簽，我們也可以將隨機改變顏色的效果應(yīng)用到其他標(biāo)簽上，例如h1、h2、div等等。
上一篇vue info