您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
原生javascript制作文字变换颜色效果
发布时间：2015-07-25 07:48:54编辑：雪饮阅读（）
雪饮个人博客今天要分享的 这个效果听起来实在不值一提，或许是因为夏天的中午头脑不灵光所致吧！当然也或许是任务量比较多，精力不集中所致。毕竟这个效果虽小，但实现原理有点绕脑筋呢。反正由于各种原因导致昨天下午没有做出来该效果，今天早上硬是拖着疲惫不堪的身体早早（相对于其他员工）的来到办公室。心想着开着空调且暂时没有新的任务（虽然心里还压着一个任务）再加上早上头脑应该会比较灵活，所以大概不一会儿就做出来了。那么现在就把实现代码分享下吧。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生js制作变换颜色文字效果</title>
<script type="text/javascript">
var autoChange = setTimeout(x,1000);
var y=1;
function x(){
for(var i=1;i<=2;i++){
var color=1;
if(i==y){
color=2;
}
break;
}
if(color==1){
document.getElementById("cc").style.color="green";
}
else{
document.getElementById("cc").style.color="red";
}
y++;
if(y>2){y=1;}
autoChange = setTimeout(x,2000);
}
</script>
</head>
<body>
<div id="cc" style="width:500px;height:500px; margin:0 auto;color:red;">
<h1>一秒后雪饮个人博客要变换肤色了</h1>
</div>
</body>
</html>
关键字词：javascript,变换颜色,个人博客