javascript - span 标签内的 jquery 倒计时而不是直接打印

Question

我有一个 jQuery 倒计时脚本，它是这样的:

<script type="text/javascript">
   $(document).ready(function () {
      $('#getting-started').countdown('2015/01/15').on('update.countdown', function(event) {
         var $this = $(this).html(event.strftime(''
            + '<span>%-d</span> day%!d '
            + '<span>%H</span> hours '
            + '<span>%M</span> minutes '
            + '<span>%S</span> seconds'));
      });
   });
</script>

HTML 代码如下:

<div class="timer">

   <div class="days-wrapper">
      <span class="days"></span> <br>days
   </div>

   <div class="hours-wrapper">
      <span class="hours"></span> <br>hours
   </div>

   <div class="minutes-wrapper">
      <span class="minutes"></span> <br>minutes
   </div>

   <div class="seconds-wrapper">
      <span class="seconds"></span> <br>seconds
   </div>

</div>

我想做的基本上是将倒计时放在 HTML 代码中。我试着这样做:

+ '<div class="hours-wrapper"><span class="hours">%H</span> <br></div>'

但这没有用。我做错了什么？

这是我的 fiddle :

http://jsfiddle.net/nmmevtht/

Answer 1

在不知道脚本的情况下，根据它在做什么

$('#getting-started').countdown('2015/01/15').on('update.countdown', function(event) {
    $(".days").text(event.strftime("%-d"));
    $(".hours").text(event.strftime("%H"));
    $(".minutes").text(event.strftime("%M"));
    $(".seconds").text(event.strftime("%S"));
});

---

因为你用 fiddle 更新了问题，所以它正在运行

    $('#getting-started').countdown('2015/01/15').on('update.countdown', function(event) {
        $(".days").text(event.strftime("%-d"));
        $(".hours").text(event.strftime("%H"));
        $(".minutes").text(event.strftime("%M"));
        $(".seconds").text(event.strftime("%S"));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.0.4/dist/jquery.countdown.min.js"></script>

<div id="getting-started"></div>

<p></p>

<div class="timer">

<div class="days-wrapper">
<span class="days"></span> <br>days
</div>

<div class="hours-wrapper">
<span class="hours"></span> <br>hours
</div>

<div class="minutes-wrapper">
<span class="minutes"></span> <br>minutes
</div>

<div class="seconds-wrapper">
<span class="seconds"></span> <br>seconds
</div>

</div>