文章目录
页面文字闪烁效果
1. JS实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体闪烁效果</title>
<script>
function blink(){
var color="#FF00FF,#FF00CC,#FF0099,#FF0066,#FF0033,#FF0000";
color=color.split(",");
document.getElementById("word").style.color=color[parseInt(Math.random()*color.length)];
}
setInterval("blink()",200);
</script>
</head>
<body>
<div id="word">Hello, World!</div>
</body>
</html>
2. JQuery实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体闪烁，JQuery版本</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
function blink(){
var color="#FF00FF,#FF00CC,#FF0099,#FF0066,#FF0033,#FF0000";
color=color.split(",");
$("#word").css('color',color[parseInt(Math.random()*color.length)]);
}
setInterval("blink()",200);
</script>
</head>
<body>
<div id="word">Hello, JQuery!</div>
</body>
</html>
3. 用到的知识总结
3.1. setInterval定时器使用
单位毫秒。
使用方式：
- setInterval(“blink()”,200);
- setInterval(function(){blink()},200);
3.2. Math.random()
返回0(包含)-1(不包含)之间的任意随机数
3.3 JQuery的css()方法设置css属性
- 设置单个css属性
$("#word").css(‘color’,‘red’); - 设置多个css属性
$("#word").css({‘color’:‘red’,‘font-weight’:‘Bold’});
扫一扫
9952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
