javascript - 简单倒计时2

Question

我是 Web 开发的新手，我想使用 simplyCountdown.js 实现倒计时 在我的网站上。

如何更改计数器以使日期为 2018 年 11 月 11 日下午 3 点？

<div class="simply-countdown simply-countdown-one"></div>

<script src="js/simplyCountdown.js"></script>    
<script>
  var d = new Date(new Date().getTime() + 200 * 120 * 120 * 2000);
  // default example
  simplyCountdown('.simply-countdown-one', {
    year: d.getFullYear(),
    month: d.getMonth() + 1,
    day: d.getDate()
  });

  //jQuery example
  $('#simply-countdown-losange').simplyCountdown({
    year: d.getFullYear(),
    month: d.getMonth() + 1,
    day: d.getDate(),
    enableUtc: false
  });
</script>

Answer 1

我认为您的问题是由于尝试渲染 simplyCountdown 两次(default example 和 jQuery example)造成的。

根据documentation您可以通过在 HTML 页面的 script 中定义 parameters 来解决您的问题。

<div class="simply-countdown"></div>

<script>
  simplyCountdown('.simply-countdown', {
 year: 2018,
    month: 11,
    day: 11,
    hours: 15,
    minutes: 30,
    seconds: 0,
    words: {
        days: 'day',
        hours: 'hour',
        minutes: 'minute',
        seconds: 'second',
        pluralLetter: 's'
    },
  });
</script>

下面的代码片段应该有所帮助。

simplyCountdown('.simply-countdown', {
     year: 2018,
        month: 11,
        day: 11,
        hours: 15,
        minutes: 30,
        seconds: 0,
        words: {
            days: 'day',
            hours: 'hour',
            minutes: 'minute',
            seconds: 'second',
            pluralLetter: 's'
        },
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="simply-countdown"></div>

<script>
/*!
 * Project : simply-countdown
 * File : simplyCountdown
 * Date : 27/06/2015
 * License : MIT
 * Version : 1.3.2
 * Author : Vincent Loy <vincent.loy1@gmail.com>
 * Contributors : 
 *  - Justin Beasley <JustinB@harvest.org>
 *  - Nathan Smith <NathanS@harvest.org>
 */
!function(e){"use strict";var t,n,s,o;t=function(e){var n,s,o;for(e=e||{},n=1;n<arguments.length;n+=1)if(s=arguments[n])for(o in s)s.hasOwnProperty(o)&&("object"==typeof s[o]?t(e[o],s[o]):e[o]=s[o]);return e},s=function(e,t,n){var s,o,r,a;return o=document.createElement("div"),r=document.createElement("span"),a=document.createElement("span"),s=document.createElement("div"),s.appendChild(r),s.appendChild(a),o.appendChild(s),o.classList.add(t.sectionClass),o.classList.add(n),r.classList.add(t.amountClass),a.classList.add(t.wordClass),e.appendChild(o),{full:o,amount:r,word:a}},n=function(e,t){var n;return e.inline?(n=document.createElement("span"),n.classList.add(e.inlineClass),n):{days:s(t,e,"simply-days-section"),hours:s(t,e,"simply-hours-section"),minutes:s(t,e,"simply-minutes-section"),seconds:s(t,e,"simply-seconds-section")}},o=function(e,s){var o,r,a,d,i,l,u,c,m,w,p=t({year:2015,month:6,day:28,hours:0,minutes:0,seconds:0,words:{days:"day",hours:"hour",minutes:"minute",seconds:"second",pluralLetter:"s"},plural:!0,inline:!1,enableUtc:!0,onEnd:function(){},refresh:1e3,inlineClass:"simply-countdown-inline",sectionClass:"simply-section",amountClass:"simply-amount",wordClass:"simply-word",zeroPad:!1},s),y=document.querySelectorAll(e);a=new Date(p.year,p.month-1,p.day,p.hours,p.minutes,p.seconds),r=p.enableUtc?new Date(a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),a.getUTCHours(),a.getUTCMinutes(),a.getUTCSeconds()):a,Array.prototype.forEach.call(y,function(e){var t,s=n(p,e);t=function(){var t,n,a,y;d=new Date,p.enableUtc?(i=new Date(d.getFullYear(),d.getMonth(),d.getDate(),d.getHours(),d.getMinutes(),d.getSeconds()),l=(r-i.getTime())/1e3):l=(r-d.getTime())/1e3,l>0?(u=parseInt(l/86400,10),l%=86400,c=parseInt(l/3600,10),l%=3600,m=parseInt(l/60,10),w=parseInt(l%60,10)):(u=0,c=0,m=0,w=0,window.clearInterval(o),p.onEnd()),p.plural?(t=u>1?p.words.days+p.words.pluralLetter:p.words.days,n=c>1?p.words.hours+p.words.pluralLetter:p.words.hours,a=m>1?p.words.minutes+p.words.pluralLetter:p.words.minutes,y=w>1?p.words.seconds+p.words.pluralLetter:p.words.seconds):(t=p.words.days,n=p.words.hours,a=p.words.minutes,y=p.words.seconds),p.inline?e.innerHTML=u+" "+t+", "+c+" "+n+", "+m+" "+a+", "+w+" "+y+".":(s.days.amount.textContent=(p.zeroPad&&u.toString().length<2?"0":"")+u,s.days.word.textContent=t,s.hours.amount.textContent=(p.zeroPad&&c.toString().length<2?"0":"")+c,s.hours.word.textContent=n,s.minutes.amount.textContent=(p.zeroPad&&m.toString().length<2?"0":"")+m,s.minutes.word.textContent=a,s.seconds.amount.textContent=(p.zeroPad&&w.toString().length<2?"0":"")+w,s.seconds.word.textContent=y)},t(),o=window.setInterval(t,p.refresh)})},e.simplyCountdown=o}(window),window.jQuery&&!function(e,t){"use strict";function n(e,n){t(e,n)}e.fn.simplyCountdown=function(e){return n(this.selector,e)}}(jQuery,simplyCountdown);
</script>