當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript特效——让文字每秒钟进行变色
生活随笔
收集整理的這篇文章主要介紹了
JavaScript特效——让文字每秒钟进行变色
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
16種顏色隨機(jī)變化?每一秒鐘變化一次
給文字添加一個定時器讓字體顏色隨機(jī)切換方法：
1、先給文字一個盒子
2、然后用js獲取這個盒子
<div> 溫度30°</div> var div = document.querySelector('div');?3、其次準(zhǔn)備一個數(shù)組里面用來存放顏色（這里例舉16種顏色）：
var color = ['#f00', '#000', 'yellow', 'blue', 'black', 'gold', 'orange', 'gray', 'pink', 'maroon', 'green', 'rgb(42, 75, 165)','#009393','#bbffbb','#ceceff','purple'];接下來就可以寫定時器了：
?
4、定時器隨機(jī)獲得這個數(shù)組（顏色）的長度：?
?
5、最后再綁定顏色的樣式即可
div.style.color = color[math];完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字體隨機(jī)變色</title><style>div{transition: all 0.5s;font-weight: bold;font-size: 30px;}</style> </head> <body><div> 溫度30°</div><!-- 16種顏色隨機(jī)變化 每一秒鐘變化一次 --><script>var div = document.querySelector('div');var color = ['#f00', '#000', 'yellow', 'blue', 'black', 'gold', 'orange', 'gray', 'pink', 'maroon', 'green', 'rgb(42, 75, 165)','#009393','#bbffbb','#ceceff','purple']; setInterval(function(){var math = Math.floor(Math.random() * color.length ); // 獲取隨機(jī)數(shù)console.log(math);// div.style.backgroundColor = color[math]; //隨機(jī)的背景顏色div.style.color = color[math]; //替換字體顏色},1000)</script> </body></html>?
看下效果：
?我么可以看到每次刷新過后的第一秒鐘還是字體本身的顏色（默認(rèn)黑色），并沒有直接變?yōu)殡S機(jī)的顏色，會出現(xiàn)一秒延時問題，解決方法
直接把函數(shù)體進(jìn)行封裝，單獨運行
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字體隨機(jī)變色</title><style>div{transition: all 0.5s;font-weight: bold;font-size: 30px;}</style> </head> <body><div> 溫度30°</div><!-- 16種顏色隨機(jī)變化 每一秒鐘變化一次 --><script>var div = document.querySelector('div');var color = ['#f00', '#000', 'yellow', 'blue', 'black', 'gold', 'orange', 'gray', 'pink', 'maroon', 'green', 'rgb(42, 75, 165)','#009393','#bbffbb','#ceceff','purple']; function f1(){var math = Math.floor(Math.random() * color.length ); console.log(math);// 獲取隨機(jī)數(shù)// div.style.backgroundColor = color[math]; //隨機(jī)的背景顏色div.style.color = color[math]; //設(shè)置隨機(jī)顏色}setInterval(f1, 1000);f1();</script> </body></html>這樣就可以實現(xiàn)了，看下圖：
?
總結(jié)
以上是生活随笔為你收集整理的JavaScript特效——让文字每秒钟进行变色的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java中的移位运算符＜＜,＞＞,＞＞＞
- 下一篇： RapidXml的使用