多个倒计时切换 开始和结束

2024-06-11 17:18
文章标签 倒计时 切换 多个 结束

本文主要是介绍多个倒计时切换 开始和结束,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

/* 
* @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', //设置原型引用对象为tmovermove: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

这篇关于多个倒计时切换 开始和结束的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1051794

相关文章

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提:项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,:本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的?二、jenv的核心功能(一)管理多个Java版本(二)支持插件扩展(三)环境隔

Python函数返回多个值的多种方法小结

《Python函数返回多个值的多种方法小结》在Python中,函数通常用于封装一段代码,使其可以重复调用,有时,我们希望一个函数能够返回多个值,Python提供了几种不同的方法来实现这一点,需要的朋友... 目录一、使用元组(Tuple):二、使用列表(list)三、使用字典(Dictionary)四、 使

SpringBoot实现多环境配置文件切换

《SpringBoot实现多环境配置文件切换》这篇文章主要为大家详细介绍了如何使用SpringBoot实现多环境配置文件切换功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 示例代码结构2. pom文件3. application文件4. application-dev文

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

Java中Switch Case多个条件处理方法举例

《Java中SwitchCase多个条件处理方法举例》Java中switch语句用于根据变量值执行不同代码块,适用于多个条件的处理,:本文主要介绍Java中SwitchCase多个条件处理的相... 目录前言基本语法处理多个条件示例1:合并相同代码的多个case示例2:通过字符串合并多个case进阶用法使用

Pytest多环境切换的常见方法介绍

《Pytest多环境切换的常见方法介绍》Pytest作为自动化测试的主力框架,如何实现本地、测试、预发、生产环境的灵活切换,本文总结了通过pytest框架实现自由环境切换的几种方法,大家可以根据需要进... 目录1.pytest-base-url2.hooks函数3.yml和fixture结论你是否也遇到过

Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

《SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能》:本文主要介绍SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能,本文分步骤给大家介绍的... 目录原理解析1. mysql主从复制(Master-Slave Replication)2. 读写分离3.

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类(常规内部类)局部内部类(方法内部类)匿名内部类二、

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应