完成时的jquery倒计时事件没有显示预期的html

时间:2015-12-09 12:09:34

标签: jquery html countdown

我一直在用两个日期参数进行jquery倒计时过程。但是当第二个日期参数结束时,预期的html没有出现("已关闭")。

<dependentAssembly>
  <assemblyIdentity name="System.Net.Http" publicKeyToken="31bf3856ad364e35" />
  <bindingRedirect oldVersion="0.0.0.0-5.2.3.0" newVersion="5.2.3.0" />
</dependentAssembly>

可以看到预期的脚本jsfiddle

2 个答案:

答案 0 :(得分:1)

您可以删除元素倒计时并添加新内容:

小提琴:On mac, g++ (clang) fails to search /usr/local/include and /usr/local/lib by default

var s = '2015/10/19';
f = '2015/12/09';
format = '%-w <sup>week%!w</sup> ' + '%-d <sup>day%!d</sup> ' + '%H <sup>hr</sup> ' + '%M <sup>min</sup> ' + '%S <sup>sec</sup>';

$('#date_regist').countdown(s)
  .on('update.countdown', function(event) {
    $(this).html("<b>will be open </b>" + event.strftime(format));
  })
  .on('finish.countdown', function(event) {
  	$("#date_regist").remove()
  	$("body").append('<span id="date_regist"></span>')
    $("#date_regist").countdown(f)
      .on('update.countdown', function(event) {
        $(this).html("<b> is open for </b>" + event.strftime(format));
      })
      .on('finish.countdown', function(event) {
        $(this).html("<b> is closed.</b>");
      });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://rc.sefunsoed.org/assets/js/countdown/jquery.countdown.min.js"></script>
The registration <span id="date_regist"></span>

答案 1 :(得分:0)

似乎重复使用第一个倒计时来托管第二个倒计时会影响finish.countdown事件行为。

我做了它的工作,增加了第二个跨度并使用第二个跨度创建了第二个倒计时。

            var s = '2015/12/08';
            f = '2015/12/09';
            format = '%-w <sup>week%!w</sup> ' + '%-d <sup>day%!d</sup> ' + '%H <sup>hr</sup> ' + '%M <sup>min</sup> ' + '%S <sup>sec</sup>';

            $('#date_regist').countdown(s)
              .on('update.countdown', function(event) {
                $(this).html("<b>will be open </b>" + event.strftime(format));
              })
              .on('finish.countdown', function(event) {
                $('#date_regist2').countdown(f)
                  .on('update.countdown', function(event) {
                    $(this).html("<b> is open for </b>" + event.strftime(format));
                  })
                  .on('finish.countdown', function(event) {
                    $(this).html("<b> is closed.</b>");
                  });
              });
          });