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

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

相关文章

如何实现一台机器上运行多个MySQL实例?

在一台机器上一个MySQL服务器运行多个MySQL实例有什么好处?这里我先入为主给大家介绍这样做至少存在两个好处(看完这篇文章后理解会更透彻): (1)减轻服务器链接负担 (2)为不同的用户提供不同的mysqld服务器的访问权限以方便这些用户进行自我管理。   下面我介绍具体的实现过程: 一、准备工作     台式机一台、Windows系统、MySQL服务器(我安装的版本是MySQL

redis切换数据库的方法【jedis】

package com.test;import redis.clients.jedis.Jedis;public class readredis {public static void main(String[] args) {// 连接本地的 Redis 服务Jedis jedis = new Jedis("127.0.0.1", 6379);jedis.select(10);String v

laravel 多个项目共享SESSION

只讨论一个域下的项目。 eg: a.xxx.com 和 b.xxx.com 来共享session 如果多个laravel项目共享SESSION要满足以下条件: SESSION可以存放在一个地方,eg:共用一个reids用户表为连接同一个数据库的用户表需要在同一域下 操作步骤:以将session 存放到redis中为例: 1. 安装redis库composer require predis/

切换国内yum源

切换国内yum源 一、备份现有YUM源二、下载新的YUM源配置文件三、先清理YUM缓存再生成四、测试新的YUM源五、重启系统服务(生效可以不重启)可选 首先,切换国内YUM源的具体步骤取决于您使用的Linux发行版和当前的YUM源配置。以下是一般步骤,适用于大多数基于Red Hat的发行版,如CentOS和Fedora: 一、备份现有YUM源 在修改YUM源之前,建议先备份现

HCIA 19 结束 企业总部-分支综合实验(下)

3.6出口NAT配置可以访问互联网 配置NAT使内网可以访问公网8.8.8.8,当前总部PC1 PING不通公网地址8.8.8.8。 3.6.1总部配置NAT访问互联网 步骤1:配置NAT acl number 2000    rule 5 permit source 192.168.0.0 0.0.255.255 # interface GigabitEthernet0/0/2

用 idea 启动多个实例

在学习负载均衡的时候,要模拟多个实例均提供一个服务,我们要如何用 idea 启动多个实例呢?         如下图,我们已经启动了一个 ProductService 服务,现在想再启动两个相同的服务 1. 选中要启动的服务,右键选择 Copy Configuration... 2 在弹出的框中,选择 Modify options -> Add VM option

双jdk切换

现在因为业务需求单一jdk8已经不满足日常需求了,以我为例之前用的jdk8,但是最新的一个项目用的是17版本的,没招了就下载配置的一套,需要手动切换用哪个版本的步骤如下 jdk8就自己安装配置吧,这只说在有8的版本上在配置17 1.下载一个17win的包(不下载exe) Java Downloads | Oracle 中国 2.解压到自己需要的位置  我的 D:\JDK\jdk-17

Selenium Webdriver处理iFrame之间的切换问题

原文转自:https://blog.csdn.net/dongtianlaile/article/details/9854263 对于使用的iFrame技术的website, 使用xPath无法直接定位到元素,需要先切换到相应的frame再进行定位: [java]  view plain copy WebElement frame=driver.findElement(By.

搭建大型分布式服务(四十)SpringBoot 整合多个kafka数据源-支持生产者

系列文章目录 文章目录 系列文章目录前言一、本文要点二、开发环境三、原项目四、修改项目五、测试一下五、小结 前言 本插件稳定运行上百个kafka项目,每天处理上亿级的数据的精简小插件,快速上手。 <dependency><groupId>io.github.vipjoey</groupId><artifactId>multi-kafka-starter</ar

Java面试题第一天(一个源文件多个类,和的区别)

一个源文件多个类 一个java源文件中是否可以包含多个类(不是内部类)?有什么限制?   答:可以有多个类,但只能有一个public的类,并且public的类名补习与文件名相一致。 示例代码如下: public class Test1 {private Integer id;public void print(){System.out.println("id="+id);}}c