JavaScript实现仿flash动感闪烁文字.
出处链接：http://www.5code.net
var arr = ["yellow","pink","green","orange","blue","#ccc","#ddd","black","#c00","#d122b2","#78336c","#0461a2","#d9764f","#1bae17","#13b5c4","#a100fe","red"]; |
以上是收集自己喜欢的颜色.
for(var i=0; i<arr.length; i++){ colors.style.background= arr[Math.floor(Math.random() * (17+1))]; } |
然后遍历这些颜色,让colors.style.background等于随机循环的arr[i].
最后通过setInterval方法重复执行randomChangeBG()函数里面的代码.
整体代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<title>无标题文档</title>
<style type="text/css">
#colors{position:absolute;left:50%;top:50%;border:1px solid green;width:200px;height:150px;margin-left:-100px;margin-top:-75px;line-height:150px;text-align:center}
</style>
</head>
<body>
<div id="colors">
深蓝色梦想
</div>
<script type="text/javascript">
var t;
var colors = document.getElementById("colors");
function randomChangeBG(){
var arr = ["yellow","pink","green","orange","blue","#ccc","#ddd","black","#c00","#d122b2","#78336c","#0461a2","#d9764f","#1bae17","#13b5c4","#a100fe","red"];
for(var i=0; i<arr.length; i++){
colors.style.background= arr[Math.floor(Math.random() * (17+1))];
}
}
t = setInterval("randomChangeBG()",100);
colors.onmouseover =function(){
clearInterval(t)
}
colors.onmouseout =function(){
t = setInterval("randomChangeBG()",100);
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<title>无标题文档</title>
<style type="text/css">
#colors{position:absolute;left:50%;top:50%;border:1px solid green;width:200px;height:150px;margin-left:-100px;margin-top:-75px;line-height:150px;text-align:center}
</style>
</head>
<body>
<div id="colors">
深蓝色梦想
</div>
<script type="text/javascript">
var t;
var colors = document.getElementById("colors");
function randomChangeBG(){
var arr = ["yellow","pink","green","orange","blue","#ccc","#ddd","black","#c00","#d122b2","#78336c","#0461a2","#d9764f","#1bae17","#13b5c4","#a100fe","red"];
for(var i=0; i<arr.length; i++){
colors.style.background= arr[Math.floor(Math.random() * (17+1))];
}
}
t = setInterval("randomChangeBG()",100);
colors.onmouseover =function(){
clearInterval(t)
}
colors.onmouseout =function(){
t = setInterval("randomChangeBG()",100);
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？