闪动的文字

最新推荐文章于 2023-02-01 14:34:33 发布

原创最新推荐文章于 2023-02-01 14:34:33 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #javascript #website

1.0 JavaScript 同时被 2 个专栏收录

61 篇文章

订阅专栏

1.2 JS页面效果(特效)分类

19 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的霓虹灯闪烁文本效果。该效果通过改变文本颜色来模拟霓虹灯的闪烁，适用于网页标题或装饰文字。文章提供了完整的代码示例，包括如何设置文本内容、颜色及闪烁速度。

<h2>
<script language="JavaScript1.2">

/*
Neon Lights Text
By Website Abstraction (http://wsabstract.com)//原效果来自
Over 400+ free scripts here!
*/
//下面设置显示效果的属性
var message="Welcome to Website Abstraction!"
var neonbasecolor="gray"
var neontextcolor="#00DD55"
var flashspeed=100 //in milliseconds

///No need to edit below this line/////

var n=0
if (document.all){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight">'+message.charAt(m)+'</span>')
document.write('</font>')

//cache reference to neonlight array
var tempref=document.all.neonlight
}
else
document.write(message)

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
tempref[m].style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
tempref[n].style.color=neontextcolor

if (n<tempref.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}

function beginneon(){
if (document.all)
flashing=setInterval("neon()",flashspeed)
}
beginneon()

</script>
</h2>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://wsabstract.com">Website
Abstraction</a></font></p>