为了账号安全,请及时绑定邮箱和手机立即绑定

如何将这个倒计时改为一个计数器

如何将这个倒计时改为一个计数器

Joey_Carry0n 2016-04-27 15:28:15
想要使用这个倒计时模块,改为一个例如一共有10000分,通过设置一个按钮,使其按一下按钮减少100分的样事,但是这个是个jQuery的countdown倒计时模块,我的大致思路就是修改时间函数,使其变成一个具体的数字,然后给按钮调用一个函数,使其让默认数字减少相应的数字,并产生动画。github上的源码 需要改下jQuery,如果不想点进去的话,我这里有他倒计时的代码/*  * jquery-countdown plugin  *  * Copyright (c) 2009 Martin Conte Mac Donell <Reflejo@gmail.com>  * Dual licensed under the MIT and GPL licenses.  * http://docs.jquery.com/License  *  */ var num = "1000000"; // Draw digits in given container var createDigits = function(where, options) {   var counter = 0;   // Iterate each startTime digit, if it is not a digit   // we'll asume that it's a separator   var mFirstPos, sFirstPos;   // reset digits and intervals array.   digits = [];   intervals = [];   for (var i = 0; i < options.startTime.length; i++) {     if (parseInt(options.startTime[i]) >= 0) {       elem = $('<div id="cnt_' + counter + '" class="cntDigit" />').css({   height: options.digitHeight,   float: 'left',   background: 'url(\'' + options.image + '\')',   width: options.digitWidth       });       elem.current = parseInt(options.startTime[i]);       digits.push(elem);       margin(counter, -elem.current * options.digitHeight * options.digitImages);       if (options.continuous === true) {   digits[counter]._max = function() { return 9; };       } else {   // Add max digits, for example, first digit of minutes (mm) has   // a max of 5. Conditional max is used when the left digit has reach   // the max. For example second "hours" digit has a conditional max of 4   switch (options.format[i]) {     case 'h':       digits[counter]._max = function(pos, isStart) {         if (pos % 2 == 0)     return 2;         else     return (isStart) ? 3: 9;       };       break;     case 'd':       digits[counter]._max = function() { return 9; };       break;     case 'm':       digits[counter]._max = function(pos) {         if(!mFirstPos) { mFirstPos = pos; }          return pos == mFirstPos ? 9 : 5;       };       break;     case 's':       digits[counter]._max = function(pos) {         if(!sFirstPos) { sFirstPos = pos; }          return pos == sFirstPos ? 9 : 5;       };   }       }       counter += 1;     } else {       elem = $('<div class="cntSeparator"/>').css({float: 'left'})                .text(options.startTime[i]);     }     where.append(elem)   } }; var makeMovement = function(elem, steps, isForward, options) {   // Stop any other movement over the same digit.   if (intervals[elem])     window.clearInterval(intervals[elem]);   // Move to the initial position (We force that because in chrome   // there are some scenarios where digits lost sync)   var initialPos = -(options.digitHeight * options.digitImages *          digits[elem].current);   margin(elem, initialPos);   digits[elem].current = digits[elem].current + ((isForward) ? steps: -steps);   var x = 0;   intervals[elem] = setInterval(function() {     if (x++ === options.digitImages * steps) {       window.clearInterval(intervals[elem]);       delete intervals[elem];       return;     }     var diff = isForward ? -options.digitHeight: options.digitHeight;     margin(elem, initialPos + (x * diff));   }, options.stepTime / steps); }; // Set or get element margin var margin = function(elem, val) {   if (val !== undefined) {     digits[elem].margin = val;     return digits[elem].css({'backgroundPosition': '0 ' + val + 'px'});   }   return digits[elem].margin || 0; }; // Makes the movement. This is done by "digitImages" steps. var moveDigit = function(elem, options) {   if (digits[elem].current == 0) {     // Is there still time left?     if (elem > 0) {       var isStart = (digits[elem - 1].current == 0);       makeMovement(elem, digits[elem]._max(elem, isStart), true, options);       moveDigit(elem - 1, options);     } else { // That condition means that we reach the end! 00:00.       for (var i = 0; i < digits.length; i++) {   clearInterval(intervals[i]);   clearInterval(intervals.main);   margin(i, 0);       }       options.timerEnd();     }     return;   }   makeMovement(elem, 1, false, options); }; // parses a date of the form hh:mm:ss, for example, where // ... precision is the same as the format. var parseRelativeDate = function(form, options) {   // give the date the values of now by default   var now = new Date();   var d = now.getDate();   var m = now.getMonth() + 1;   var y = now.getFullYear();   var h = now.getHours(), mm, s;   // read in components and render based on format   var format = options.format;   var parts = form.split(':');   if( format.indexOf('dd') == 0 ) {       d = parts[0];       parts = parts.slice(1);       format = format.substr(3);   }   if( format.indexOf('hh') == 0 ) {       h = parts[0];       parts = parts.slice(1);       format = format.substr(3);   }   if( format.indexOf('mm') == 0 ) {       mm = parts[0];       parts = parts.slice(1);       format = format.substr(3);   }   if( format.indexOf('ss') == 0 ) {       s = parts[0];       parts = parts.slice(1);       format = format.substr(3);   }   // return our constructed date object   return new Date([m, d, y].join('/') + ' ' + [h, mm, s].map(pad).join(':') + ' GMT-0900'); }; // convert a date object to the format specified var formatCompute = function(d, options) {       var format = options.format;       var parse = {   d: Math.floor( ( d - new Date( d.getFullYear(), 0, 1 ) ) / ( 1000 * 60 * 60 * 24 ) ),   h: d.getUTCHours(),   m: d.getUTCMinutes(),   s: d.getUTCSeconds()       };       return format.replace(/(dd|hh|mm|ss)/g, function($0, form) {         return pad(parse[form[0]]);       }); }; // add leading zeros var pad = function(x){return (1e15+""+x).slice(-2)}; var start = function (element) {   if (element.attr('started') != 'true') {       element.attr('started', true)     intervals.main = setInterval(function () {         moveDigit(digits.length - 1, element.data('options'));       },       1000);   } }; var digits = []; var intervals = []; jQuery.fn.countdown = function(userOptions) {   // Default options   var options = {     stepTime: 60,     // startTime and format MUST follow the same format.     // also you cannot specify a format unordered (e.g. hh:ss:mm is wrong)     format: "dd:hh:mm:ss",     startTime: "01:12:32:44",     digitImages: 6,     digitWidth: 67,     digitHeight: 90,     timerEnd: function(){},     image: "digits.png",     continuous: false,   start: true   };   $.extend(options, userOptions);   // if an endTime is provided...   if( userOptions.endTime ) {     // calculate the difference between endTime and present time     var endDate = userOptions.endTime instanceof Date ? userOptions.endTime : parseRelativeDate(userOptions.endTime, options);     var diff = endDate.getTime() - (new Date()).getTime();     // and set that as the startTime     userOptions.startTime = formatCompute(new Date(diff), options);     delete userOptions.endTime;   }   $.extend(options, userOptions);   if (this.length) {     clearInterval(intervals.main);     createDigits(this, options);   this.data('options', options);   if (options.start === true) {     start(this);   }   } }; // start the counter jQuery.fn.start = function () {   start(this); };
查看完整描述

目前暂无任何回答

  • 0 回答
  • 0 关注
  • 1789 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信