js如何實作文字閃爍特效？ （圖文+影片）
- 藏色散人原創
- 2018-10-18 09:38:497842瀏覽
本篇文章主要介紹如何用js實作文字閃爍特效。
我們在前端頁面設計過程中，加入一些動態特效顯然能夠使網站內容更加豐富，並且也更加美觀，能夠吸引用戶矚目。
對於前端新手來說，使用js實現一些特效或許有一定難度，但其實也是非常簡單的。
下面我們就透過簡單的程式碼範例，介紹js實作文字閃爍的特效方法。 【更多js特效，可存取js特效程式碼下載欄位查看】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现文字闪烁特效</title>
</head>
<body>
<div id="blink">PHP中文网</div>
</body>
<script language="javascript">
function changeColor() {
var color = ['#F96','#cc6'];
// parseInt 将字符串类型转换为整型 random 获取0-1之间的随机数 color.length color数组的长度
document.getElementById("blink").style.color = color[parseInt(Math.random() * color.length)];
}
// 执行定义好的changeColor方法，200毫秒执行一下
setInterval("changeColor()", 200);
</script>
<style>
* {
color: #CC6
}
</style>
</html>最終效果如下圖：
js實作文字閃爍效果的方法介紹，也是非常簡單易懂，希望對需要的朋友有幫助！
更多酷javascript特效程式碼，盡在：想要了解更多前端相關知識，可以關注PHP中文網JavaScript影片教學、HTML影片教學、CSS影片教學、Bootstrap影片教學等等相關教程，歡迎大家參考學習！
以上是js如何實作文字閃爍特效？ （圖文+影片）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn