倒计时组件

倒计时组件:

function Countdown(leavetime) {
        this._init(leavetime);
    }

  Countdown.prototype = {
      _init : function (leavetime) {
          this.timer = null;
          this.leavetime = leavetime || 0;
          this.clock = {};
          this.clock.leavetimeSec = Math.floor(this.leavetime / 1000);
      },
      _format : function () {
          this.clock.sec = this.clock.leavetimeSec % 3600 % 60;
          this.clock.min = Math.floor(this.clock.leavetimeSec % 3600 / 60);
          this.clock.hours = Math.floor(this.clock.leavetimeSec / 3600);
          this.clock.secStr = String(this.clock.sec).length == 1 ? (‘0‘ + this.clock.sec) : String(this.clock.sec);
          this.clock.minStr = String(this.clock.min).length == 1 ? (‘0‘ + this.clock.min) : String(this.clock.min);
          this.clock.hourStr = String(this.clock.hours).length == 1 ? (‘0‘ + this.clock.hours) : String(this.clock.hours);
      },
      run : function (doFn, endFn) {
          var that = this;
          this._format();
          doFn(this.clock);
          if (this.clock.leavetimeSec == 0) {
              clearTimeout(this.timer);
              endFn(this.clock);
              return this;
          }
          this.clock.leavetimeSec --;
          this.timer = setTimeout(function () {
              that.run(doFn, endFn);
          }, 1000)
      }
  };

使用:(为说明使用,运用了jquery获取dom对象)

html: <div id="box"></div>

var Countdown = new Countdown(30000000); // 实例化倒计时

// 运行倒计时
Countdown.run(function (clock) { // clock 是个对象 挂载着小时 分钟 秒钟
    $(‘#box‘).text(clock.hourStr + ‘:‘ + clock.minStr + ‘:‘ + clock.secStr);
  }, function () { // 这里写倒计时到点的callback
    alert(‘结束了!‘)
  });

  

时间: 2024-10-12 12:01:49

倒计时组件的相关文章

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

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 = ca

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

今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段代码. wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) {  var second = that.data.seco

jQuery倒计时组件(jquery.downCount.js)

//html <span class="days">00</span> <span class="hours">00</span>: <span class="minutes">00</span>: <span class="seconds">00</span> <script src="js/jquery.down

倒计时组件的封装

uni-ui中也是有类似的插件(电商h5页面经常会用到的),可以根据自身的需求去做相应的改变 https://ext.dcloud.net.cn/search?q=%E5%80%92%E8%AE%A1%E6%97%B6 <template> <view class="uni-countdown" :class="{miaosha:miaosha}"> <text v-if="showDay" :style="

vue组件系列-验证码倒计时组件

<style scoped> .veri-code{ width: 100%; .veri-send{ width: 100%; height: 91px; position:relative; overflow:hidden; >.sendBtn{ background:url(../assets/images/hongbao_code_btn.jpg) 100% 100% no-repeat; background-size: contain; display: inline-blo

react native中的聊天气泡以及timer封装成的发送验证码倒计时

今天看来情书写的文章,研究了一下大佬写的文章,自己做一点总结. 其实,今天我想把我近期遇到的坑都总结一下:1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions     2.父子组件的传值,一可以用callBack  二可以用pubsub发布订阅模式 三可以用manager事件监听(a页面要显示的内容 有两种形式,一是从manager主动接收,也就是说不需要点击什么的获取数据,而是时时监听manager里数据的变化,第二

Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)

在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着不重复发明轮子的原则).于是我就在 GitHub 上找寻.确实找到了不少,但是与需求之间的差距还比较大.从零开始写又不太现实(时间摆在那里,加之自己的前端也是刚学,还没有从零开始手撸一个控件的能力),所以在已有组件的基础上进行二次封装便成了一个比较可行的方法(几乎也是唯一解).遂在 npm 上以 c

vue表单控件绑定+自定义组件

vue表单控件绑定 v-model 在表单控件元素上创建双向数据绑定 文本框双向绑定 多选框演示 下拉列表演示 vue自定义组件 组件放在components目录下 组件基本要素:props  $emit 通过import导入自定义组件 制作一个倒计时组件: 1.在conponents目录下,新建一个time.vue 方法写在mouted声明周期函数内,代码如下: 然后在index.vue中使用组件: 我之前组件命名为time,可能与默认什么冲突了,然后报错不让用,所以改名成cyytime 但是

分享Android软件:智慧旅行做法

智慧旅行软件界面: 1.整个框架使用了FragmentTabs的风格展示了五个页面 2.使用了Listview动态添加header的个数 3.在ScrollView中使用了自定义的GridView4ScrollView和自定义的 ListView4ScrollView 4.在ListView中加入ViewPaper并使用自定的指示器 5.使用了水平的ListView控件,美化界面 6.数据下载使用volley库,图片下载使用了Fresco库进行下载,预防内存溢出 4.登录注册里使用了Bomb数据