在javascript计时器中添加空间

Question

我有以下脚本：

extension String {
    func someMethod(_ input: String) -> [String] {
        var result = [String]()
        var str = self
        repeat {
            if str.hasPrefix(input) {
                result.append(input)
                str.removeFirst(input.count)
            } else if let range = str.range(of: input) {
                result.append(String(str[..<range.lowerBound]))
                str.removeSubrange(..<range.lowerBound)
            } else {
                if !str.isEmpty {
                    result.append(str)
                }
                break
            }
        } while (true)
        return result
    }
}

let strs = ["ABCDEF", "BBBAAA", "BABBCDEDBB"]
for str in strs {
    let result = str.someMethod("B")
    print("B in \(str) -> \(result)")
}

print("A in \(strs[0]) -> \(strs[0].someMethod("A"))")
print("BB in \(strs[2]) -> \(strs[2].someMethod("BB"))")

它显示我的计时器如：

<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之前和之后添加空格，所以可以像：

:

我该怎么做？

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'));