在JavaScript计时器中添加空间

Question

我有下面的脚本：

<script type="text/javascript">
  $('[data-countdown]').each(function() {
     var $this = $(this), finalDate = $(this).data('countdown');
     $this.countdown(finalDate, function(event) {
       var $this = $(this).html(event.strftime(''
       + '<span class="week">%-w</span>w : '
       + '<span class="days">%-d</span>d : '
       + '<span class="hour">%H</span>h : '
       + '<span class="mini">%M</span>m : '
       + '<span class="sec">%S</span>s'));
     });
  });
</script>

它显示了我的计时器，例如：

4w:2d:14h:10m:26s

我想要的是在:之前和之后添加空间，所以可以像这样：

4w : 2d : 14h : 10m : 26s

我怎么做？

Answer 1

那就是CSS的目的。

有了它，您可以根据人像/风景等动态控制其格式。

 .days::before, .hour::before, .mini::before, .sec::before { content: ':'; padding: 0 6px 0 3px; } 

 <span class="week">4w</span> <span class="days">2d</span> <span class="hour">14h</span> <span class="mini">10m</span> <span class="sec">26s</span> 

---

如果您有这些span的包装器，则可以执行此操作

 .datetime span:not(:first-child)::before { content: ':'; padding: 0 6px 0 3px; } 

 <span class="datetime"> <span class="week">4w</span> <span class="days">2d</span> <span class="hour">14h</span> <span class="mini">10m</span> <span class="sec">26s</span> </span> 

---

并添加字母

如果您有这些span的包装器，则可以执行此操作

 .datetime span:not(:first-child)::before { content: ':'; padding: 0 6px 0 3px; } .week::after { content: 'w'; } .days::after { content: 'd'; } .hour::after { content: 'h'; } .mini::after { content: 'm'; } .sec::after { content: 's'; } 

 <span class="datetime"> <span class="week">4</span> <span class="days">2</span> <span class="hour">14</span> <span class="mini">10</span> <span class="sec">26</span> </span> 

Answer 2

使用 更改您的内容并添加部分代码 ：

var $this = $(this).html(event.strftime(''
       + '<span class="week">%-w</span>w&nbsp;:&nbsp;'
       + '<span class="days">%-d</span>d&nbsp;:&nbsp;'
       + '<span class="hour">%H</span>h&nbsp;:&nbsp;'
       + '<span class="mini">%M</span>m&nbsp;:&nbsp;'
       + '<span class="sec">%S</span>s'));