多个倒计时切换 开始和结束
2015-08-17 13:59
351 查看
/* * @Author: Mark * @Date: 2015-08-06 13:54:01 * @Last Modified by: Mark * @Last Modified time: 2015-08-17 11:49:27 */ var tmover=(function(){ function tim(opt){ _this=this;//保存当前对象 this.timer=null; //设置定时器 this.opme=Object.prototype.toString.call(opt.obj).slice(8,-1)=="String"?document.querySelectorAll(opt.obj):null; //获取定时器对象 this.stxt=Object.prototype.toString.call(opt.txtstart).slice(8,-1)=="String"?opt.txtstart:"距离开始"; //设置距离开始的默认值 this.ltxt=Object.prototype.toString.call(opt.txtstart).slice(8,-1)=="String"?opt.txtlast:"剩余"; //设置剩余的默认值 for (var i = 0; i < this.opme.length; i++) { //循环当前页面所有定时器 this.stime=this.opme[i].getAttribute(opt.stat)?this.opme[i].getAttribute(opt.stat):this.opme[i].getAttribute(opt.end); //如果没有距离开始的需求,那就说明只有单个倒计时 this.opme[i].flag=1; //设置定时器开关 this.opme[i].str=""; //设置每个DOM的字符串显示文字 this.endtime=this.opme[i].getAttribute(opt.end); //获取倒计时 this.loop({oindex:this.opme[i], oend:_this.endtime, tend:opt.txtend, tstat:_this.stxt, tlast:_this.ltxt, ostm:_this.stime, ck:true }); //初始化倒计时进行 }; } tim.prototype={ constructor : 'tmover', //设置原型引用对象为tmover move:function(json){ //倒计时计算 _this.ender=json.ck?new Date(json.ostm).getTime():new Date(json.oend).getTime();//没有开始倒计时 就设置结束倒计时 _this.stattime=new Date().getTime(); _this.opatime=_this.ender-_this.stattime; //时间差 _this.second=(_this.opatime)/1000; _this.Minute=Math.floor(_this.second/60); _this.houre=Math.floor(_this.Minute/60); _this.day=Math.floor(_this.houre/24); _this.houres=Math.floor(_this.houre%24); _this.Minutes=Math.floor(_this.Minute%60); _this.seconds=Math.floor(_this.second%60); _this.swite(json); }, swite:function(json){//判断DOM显示内同 if(json.oend==json.ostm){//只有结束倒计时需求 if(_this.opatime<=0&&json.oindex.flag){ _this.setText(json.oindex,json.tend);//设置结束问题 下同 json.oindex.flag=0; _this.clear(json.oindex.timer);//清楚倒计时 下同 }else if(_this.opatime>0){ _this.nowtext(json.oindex,json.tlast); //显示倒计时时间 下同 json.oindex.flag=1; } }else if(json.oend!=json.ostm&&!json.ck){//有开始和结束需求 并且已经进入结束倒计时 if(_this.opatime<=0&&json.oindex.flag){ _this.setText(json.oindex,json.tend); json.oindex.flag=0; _this.clear(json.oindex.timer); }else if(_this.opatime>0){ _this.nowtext(json.oindex,json.tlast); json.oindex.flag=1; } }else if(json.oend!=json.ostm&&json.ck){//有开始和结束需求 if(_this.opatime<=0){ _this.clear(json.oindex.timer); _this.loop({oindex:json.oindex, oend:json.oend,tend:json.tend, tstat:json.tstat, tlast:json.tlast, ostm:json.ostm, ck:false }); }else{ _this.nowtext(json.oindex,json.tstat); } } }, setText:function(obj,txt){ obj.innerText=""; obj.innerText=txt; }, nowtext:function(obj,str){ obj.innerText=str+_this.day+"天"+_this.houres+"小时"+_this.Minutes+"分"+_this.seconds+"秒"; }, loop:function(json){ _this.move(json); json.oindex.timer=setInterval(function(){_this.move(json)},1000); }, clear:function(all){ clearInterval(all); } } return tim; })()demo:http://w3cweb.sinaapp.com/7/demo.html
相关文章推荐
- java String.split()使用注意点和问题
- bzoj 1036: [ZJOI2008]树的统计Count (树链剖分)
- Java Web
- div 居中
- linux自定义安装php及如何卸载php
- (C/C++学习笔记)指针做函数参数形成回调练习
- mysql操作
- linux常用操作汇总
- UIWebView与JS的深度交互
- 枉凝眉 埙曲简谱
- 64位简体中文 Win10最新版Build 10240.16425镜像下载
- java中的数组的常见操作问题
- PAT 1038. Recover the Smallest Number (30)
- MyEclipse 快捷键大全
- js对话框
- 2015 ACM多校训练第二场
- 【Java编程思想第4版错误记录】Collections.addAll()静态方法与Collection.addAll()成员方法
- 数据库报错:OracleDialect does not support identity key generation
- 数据格式,访问信息以及操作数指示符
- JS将文本复制到剪切板