js字型顏色隨機變化效果程式碼例項
本章節分享一段程式碼例項,它實現了字型顏色隨機變化效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> function change() { var bg = ""; for (var index = 0; index < 6; index++) { bg += "" + Math.floor(Math.random() * 9); } htmlStr = "<font color=" + "#" + bg + ">在javascript中實現文字的顏色變換</font>" object = document.getElementById("object"); object.innerHTML = htmlStr; } setInterval(change, 1000); </script> </head> <body> <p id="object"></p> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).function change() {},此函式每執行一次就會變換一次字型顏色。
(2).var bg = "",宣告一個變數,用來儲存字型顏色值。
(3).for (var index = 0; index < 6; index++) { bg += "" + Math.floor(Math.random() * 9);
},用來生成六位數字,用作顏色值。十六進位制顏色值的格式如:#FFB6C1,只要前面再加個井號就是顏色值了。
(4).htmlStr = "<font color=" + "#" + bg + ">在javascript中實現文字的顏色變換</font>",設定字型顏色。
(5).object = document.getElementById("object"),獲取元素物件。
(6).object.innerHTML = htmlStr,設定元素物件的html內容。
(7).setInterval(change, 1000),每隔1秒就變換一次顏色。
二.相關閱讀:
(1).Math.floor()可以參閱javascript Math.floor()一章節。
(2).Math.random()可以參閱javascript Math.random()一章節。
(3).innerHTML可以參閱innerHTML一章節。
(4).setInterval()可以參閱setInterval()一章節。
相關文章
- js隨機顏色例項程式碼JS隨機
- js table隔行變色效果程式碼例項JS
- js隨機生成十六進位制顏色值程式碼例項JS隨機
- javascript文字彩虹式顏色漸變效果程式碼例項JavaScript
- 隨機生成十六進位制顏色值程式碼例項隨機
- css設定placeholder字型顏色程式碼例項CSS
- jQuery 隔行變色效果程式碼例項jQuery
- jQuery隔行變色效果程式碼例項jQuery
- JavaScript 背景顏色隨機變化JavaScript隨機
- js隔行變色程式碼例項JS
- css滑鼠懸浮顏色動態填充效果程式碼例項CSS
- js生成隨機數程式碼例項JS隨機
- CSS3實現的滑鼠懸浮文字顏色漸變效果程式碼例項CSSS3
- 滑鼠懸浮按鈕背景變色效果程式碼例項
- js圖片碎片化效果程式碼例項JS
- js使用cookie儲存網站背景顏色程式碼例項JSCookie網站
- 設定placeholder顏色程式碼例項
- CSS 隔行變色程式碼例項CSS
- js雙色球隨機選號程式碼例項JS隨機
- CSS3 文字字型顏色動態漸變效果CSSS3
- js實現li元素隔行背景變色例項程式碼JS
- js判斷變數是不是數字型別程式碼例項JS變數型別
- 實時變化的時鐘效果程式碼例項
- jQuery大圖跟隨效果程式碼例項jQuery
- table表格隔行變色程式碼例項
- js重力球效果程式碼例項JS
- js煙花效果程式碼例項JS
- js鐘錶效果程式碼例項JS
- js秒錶效果程式碼例項JS
- 設定placeholder字型顏色程式碼
- canvas繪製矩形並填充顏色程式碼例項Canvas
- js隨機生成信用卡卡號程式碼例項JS隨機
- js實現的產生隨機數程式碼例項JS隨機
- 表格行背景交替變色例項程式碼
- 橫屏時候字型變大程式碼例項
- js淡入淡出效果例項程式碼JS
- 實現隨機顏色隨機
- javascript生成隨機數程式碼例項JavaScript隨機