Javascript倒计时组件new TimeSpan(hours, minutes, minutes)

时间:2022-03-25 17:50:30
function TimeSpan(h, m, s) {

    this.h = Number(h);
this.m = Number(m);
this.s = Number(s); } TimeSpan.prototype = { timer: null, stop: function() { }, callback: Function(), start: function(callback) {
var self = this; if (callback) { this.callback = callback;
} if (isNaN(this.s)) {
return;
} self.timer = setInterval(function() { self.s--; if (self.s >= 0) {
self.callback();
return; } //s < 0, m > 0
if (self.m > 0) {
self.s = 59;
self.m--;
self.callback();
return;
} //s < 0 ,m = 0, h<1
if (isNaN(self.h) || self.h < 1) {
//self.callback();
clearInterval(self.timer);
return;
} self.m = 59;
self.s = 59;
self.h--
self.callback();
}, 1000); }
};

调用:

    var ts = new TimeSpan(hours, minutes, minutes);

    ts.start(function(){
var s = this.s < 10 ? "0" + this.s : this.s;
var m = this.m < 10 ? "0" + this.m : this.m;
$(".clock .time").html(m + "分" + s + "秒");
});

Javascript倒计时组件new TimeSpan(hours, minutes, minutes)的更多相关文章

  1. Vue3语法快速入门以及写一个倒计时组件

    Vue3写一个倒计时组件 vue3 beta版本发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,于是找了一个比较简单的组件用vue3来实现,参考的是vant的count ...

  2. 比较全的JavaScript倒计时脚本

    JavaScript倒计时在Web中用得非常广泛,比如常见的团购啊.还有什么值得期待的事情,都可以用到倒计时.现在举了四个例子,比如时间长的倒计时,小时倒计时,最简的倒计时,还有秒表等等,应该可以满足 ...

  3. jQuery倒计时组件&lpar;jquery&period;downCount&period;js&rpar;

    //html <span class="days">00</span> <span class="hours">00< ...

  4. JavaScript倒计时脚本

    JavaScript倒计时在Web中用得非常广泛,比如常见的团购啊.还有什么值得期待的事情,都可以用到倒计时.现在举了四个例子,比如时间长的倒计时,小时倒计时,最简的倒计时,还有秒表等等,应该可以满足 ...

  5. JavaScript倒计时

    倒计时: 1.设置一个有效的结束日期 2.计算剩余时间 3.将时间转换成可用的格式 4.输出时钟数据作为一个可重用的对象 5.在页面上显示时钟,并在它到达0时停止 <div id="c ...

  6. React Native之倒计时组件的实现&lpar;ios android&rpar;

    React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...

  7. 微信小程序倒计时组件开发

    今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...

  8. Vue2&period;0进阶组件 短信倒计时组件

    原本我想隔个几天再发文章,刚好今天项目上线,环境有问题,导致只有干等,刚好要为公司打造一套属于公司自己的一系列功能组件,这个使命就交给我了,大家也一直叫我来点干货,说实话我只是一个湿货,肚子里干一点就 ...

  9. 如何在react中实现一个倒计时组件

    倒计时组件 import React, { Component } from 'react' import $ from 'jquery' import "../../css/spellTE ...

随机推荐

  1. Java中常见数据结构:list与map -底层如何实现

    1:集合 2 Collection(单列集合) 3 List(有序,可重复) 4 ArrayList 5 底层数据结构是数组,查询快,增删慢 6 线程不安全,效率高 7 Vector 8 底层数据结构 ...

  2. JAVA基础学习day20--IO流二-缓冲流、字节流

    一.缓冲流 1.1.字符流的缓冲区 缓冲区的出现是为了提高IO的读写效率 对应类 BufferedReader BufferedWriter 缓冲区要结合流才可以使用 在流的基础上对流的功能进行了增强 ...

  3. 静态方法被override

    其实这并不是真正意义上的java override,因为如果在子类的方法上面加上@override编译不通过 而且如果使用父类引用指向子类实例,那么调用被改写的子类和父类都有的静态方法,执行的还是父类 ...

  4. 3&period;VS2010C&plus;&plus;相关文件说明

    stdafx.h说明:stdafx的英文全称为:Standard Application Framework Extensions(标准应用程序框架的扩展).所谓头文件预编译,就是把一个工程(Proj ...

  5. a&colon;hover span 隐藏&sol;显示 问题

    :hover是我们在CSS设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类:hover,比如我们常见的纯CSS菜单.相册效果等等. 或许用了这么久的伪类:hover,还有部分朋友还不完全了解ho ...

  6. Linux性能分析工具top命令详解

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,常用于服务端性能分析. top命令说明 [www.linuxidc.com@linuxidc-t-tomcat-1 ...

  7. Hibernate之Hibernate的下载与安装

    Hibernate用法十分简单,当我们在Java项目中引入Hibernate框架之后,就能以面向对象的方式来操作关系数据库了. 下载: 登陆Hibernate官网,下载Hibernate压缩包,win ...

  8. Spring(六)Spring执行流程

    Spring MVC工作流程图 Spring工作流程描述 1. 用户向服务器发送请求,请求被Spring 前端控制Servelt DispatcherServlet捕获: 2. DispatcherS ...

  9. 3&period; Longest Substring Without Repeating Characters无重复字符的最长子串

    网址:https://leetcode.com/problems/longest-substring-without-repeating-characters/ 显然采用sliding window滑 ...

  10. &lbrack;转&rsqb;js刷新父窗体

    浮层内嵌iframe及frame集合窗口,刷新父页面的多种方法   <script language=JavaScript>       parent.location.reload(); ...