Question

我在Javascript中有此代码，该代码从特定的日期时间开始计数。我打算对多个ID使用一个函数，因此我试图转换为jQuery，但似乎无法使其正常工作。

<script type="text/javascript">

   function upTime(countTo, yearField, daysField, hoursField, minutesField, secondsField) {
        now = new Date();
        countTo = new Date(countTo);
        difference = (now-countTo);

        days=Math.floor(difference/(60*60*1000*24)*1);
        years = Math.floor(days / 365);
        if (years > 1){ days = days - (years * 365)}
        hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
        mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
        secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

        document.getElementById(yearField).firstChild.nodeValue = years;
        document.getElementById(daysField).firstChild.nodeValue = days;
        document.getElementById(hoursField).firstChild.nodeValue = hours;
        document.getElementById(minutesField).firstChild.nodeValue = mins;
        document.getElementById(secondsField).firstChild.nodeValue = secs;

      upTime.to=setTimeout(function(){ upTime(countTo, yearField, daysField, hoursField, minutesField, secondsField); },1000);
    }


     window.onload=function() {
    upTime('2010-12-03 23:12:00', 'y1', 'd1', 'h1', 'm1', 's1'); // ****** Change this line!
            // Month,Day,Year,Hour,Minute,Second
        }; 
</script>

基于Eric的评论。我在下面提出了这个jQuery插件。我有什么想念的吗？

      jQuery.fn.extend({
    upTime: function() {  

    return this.each(function() {
        var  countTo = $(this).attr('val');
      var  yearField = $(this).find(".y1");
      var  daysField = $(this).find(".d1");
      var  hoursField =  $(this).find(".h1");
      var minutesField =  $(this).find(".m1");
     var   secondsField =  $(this).find(".m1");

        now = new Date();
        countTo = new Date(countTo);
        difference = (now-countTo);

        days=Math.floor(difference/(60*60*1000*24)*1);
        years = Math.floor(days / 365);
        if (years > 1){ days = days - (years * 365)}
        hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
        mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
        secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

        $(yearField).prepend(years);
        $(daysField).prepend(days);
         $(hoursField).prepend(hours);
         $(minutesField).prepend(mins);
         $(secondsField).prepend(secs);
    });
 }
});


// Use the newly created  method
$(".counter").upTime();

需要使用以下循环：

<!-- Multiple loops ->
<ul class="counter" val="2017-12-10 16:11:00">
    <li class="y1" >00<br>YR(S)</li>
    <li class="d1" >00<br>DY(S)</li>
    <li class="h1" >00<br>HR(S)</li>
    <li class="m1" >00<br>MI(S)</li>
    <li class="s1" >00<br>SE(S)</li>
</ul> 

<ul class="counter" val="2018-01-10 16:11:00">
    <li class="y1">00<br>YR(S)</li>
    <li class="d1">00<br>DY(S)</li>
    <li class="h1">00<br>HR(S)</li>
    <li class="m1">00<br>MI(S)</li>
    <li class="s1">00<br>SE(S)</li>
</ul>

Answer 1

最后弄清楚了。

// Plugin definition.
jQuery.fn.extend({
    upTime: function() {  

    return this.each(function() {
        var  countTo = $(this).attr('val');
      var  yearField = $(this).find(".y1");
      var  daysField = $(this).find(".d1");
      var  hoursField =  $(this).find(".h1");
      var minutesField =  $(this).find(".m1");
     var   secondsField =  $(this).find(".s1");

        now = new Date();
        countTo = new Date(countTo);
        difference = (now-countTo);

        days=Math.floor(difference/(60*60*1000*24)*1);
        years = Math.floor(days / 365);
        if (years > 1){ days = days - (years * 365)}
        hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
        mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
        secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

        $(yearField).html(years+"<br><span>Year</span>");
        $(daysField).html(days+"<br><span>Day</span>");
         $(hoursField).html(hours+"<br><span>Hour</span>");
         $(minutesField).html(mins+"<br><span>Mins</span>");
         $(secondsField).html(secs+"<br><span>Secs</span>");

    });
 }
});


         setInterval(function(){
    $(".counter").upTime();
        }, 1000);

Answer 2

看看jQuery.fn.extend（）函数，像这样：

jQuery.fn.extend({
  upTime: function(options) {
    ... Do the things you need to initialize the counter
  }
});

那你就可以做

$(".counter").upTime({
        countTo: $(this).find(".c1").attr('val'),
        yearField: $(this).find(".y1").attr('val'),
        daysField: $(this).find(".d1").attr('val'),
        hoursField: $(this).find(".h1").attr('val'),
        minutesField: $(this).find(".m1").attr('val'),
        secondsField: $(this).find(".m1").attr('val')
    });

只有一件事，请记住，此对象引用的上下文是代码，而不是元素本身。

将upTime函数从Javascript转换为Jquery，并对多个ID使用单个函数

2 个答案: