一个闪光字的效果【构造函数方式】

愚人码头 撰写  

这是一题知名公司的前端开发面试试题,要求写出闪光字的效果。基本思路是:

1.页面中可能多出使用;

2.选出几种颜色;

3.选择合理的跳动时间。

例如html代码


<div id="comment1">愚人码头</div>
<div id="comment2">前端开发</div>
<div id="comment3">http://www.css88.com</div>

javascript代码:


function MagicColor(elem,colors,interTime){
this.elements=elem||[];
this.colors=colors||["#CC0000","#CC6D00","#CCCC00","#00CC00","#0000CC","#00CCCC","#CC00CC"];//可选的颜色值
this.indexColors=0;//颜色值索引
this.interTime=interTime;//跳动的间隔时间
}
MagicColor.prototype.timerCall=function(){
var elem=this.elements,cls=this.colors;
var color=this.colors[(this.indexColors++) % this.colors.length];//去除当前颜色
for(var i=0;i<elem .length;i++){
elem[i].style.color=color;
}
};

MagicColor.prototype.reset=function(){
if(this.timer){
clearInterval(this.timer);
delete this.timer;
}
};
MagicColor.prototype.start=function(){
this.reset();
var self=this;
this.timer = setInterval(function(){
self.timerCall();
},self.interTime||100);

}
function $(id){return document.getElementById(id)}
var effect = new MagicColor([$("comment1"),$("comment2"),$("comment3")],["#000000","#CC0000","#C00000","#00CC00","#0000CC","#00CCCC","#CC00CC"],500);
effect.start();

感谢肉块的指教,欢迎大家拍砖。

下接:http://www.css88.com/archives/1921

更多相关链接:


相关日志:

刚刚被浏览过的文章:


2 条评论

  1. 发表了 2009年10月6日 在 12:06 下午 | 永久链接

    建议添加demo页面。

  2. 小猫爱吃鱼
    发表了 2009年12月16日 在 11:12 下午 | 永久链接

    才接触前端开发,不知道楼主的这些代码是在什么工具里写的?

个引用通告

  1. [...] 上接http://www.css88.com/archives/1910 这里新加了一个extend方法. [...]

发表评论

Your email is never shared. 标记为 * 的为必填项目

*
*

评论时,昵称或个人网站填的是商业网站的,一概标记为垃圾评论不予显示,并设置相关网站为过滤关键字,提交到google、百度垃圾网站数据库