【问题标题】:How do I insert <span> tags around the countdown numbers如何在倒计时数字周围插入 <span> 标签
【发布时间】:2016-11-27 13:51:27
【问题描述】:

我正在使用这个倒计时代码:

var clock = document.getElementById("timeleft"), tdy = new Date(1494979200000);
countdown.setLabels(
  '| <span class="time-label">second</span>| <span class="time-label">minute</span> | <span class="time-label">hour<span> | <span class="time-label">day</span> || <span class="time-label">month</span> ||||',
  '| <span class="time-label">seconds</span> | <span class="time-label">mins</span> | <span class="time-label">hours</span> | <span class="time-label">days</span> || <span class="time-label">months</span> ||||',
  '',
  '',
  'Out of Time','');
clock.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate(), tdy.getHours(), tdy.getMinutes(), tdy.getSeconds()) ).toString();
setInterval(function(){
  clock.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate(), tdy.getHours(), tdy.getMinutes(), tdy.getSeconds()) ).toString();
}, 1000);

如何修改上述代码以在倒计时数字周围添加跨度标签?提前致谢。

参考:http://explore.venasolutions.com/Q3-Weekly-Webinar-LP-2.html

【问题讨论】:

  • countdown 使用哪个插件?
  • 嘿莫什,我正在使用这个countdownjs.org
  • 那么你想给clock.innerHTML添加标签吗?
  • 这样的事情 5 个月 10
  • 表示倒计时函数的输出应该在标签之间吧?

标签: javascript jquery html countdownjs.js


【解决方案1】:

如果您想要确切地显示在您给出的 url 中的内容,您必须使用下面的代码和 Div 标签,

var arr=countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate(), tdy.getHours(), tdy.getMinutes(), tdy.getSeconds()) ).toString();
        for(var i=0;i<arr.length;i++){
        clock.innerHTML= "<div> "+arr+" </div>";
        } 
        setInterval(function(){
            var arr=countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate(), tdy.getHours(), tdy.getMinutes(), tdy.getSeconds()) ).toString();
            clock.innerHTML= "<div> "+arr+" </div>";
        }, 1000);

如果您希望像您提到的那样将整个文本包含在 span 标记中,则必须向我们提供以下代码,

var count=countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate(), tdy.getHours(), tdy.getMinutes(), tdy.getSeconds()) ).toString();
        var arr=count.split(" ");
        clock.innerHTML="";
        for(var i=0;i<arr.length;i++){
            clock.innerHTML+= "<span> "+arr[i]+" </span>";
        } 
        setInterval(function(){
            var count = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate(), tdy.getHours(), tdy.getMinutes(), tdy.getSeconds()) ).toString();
            var arr=count.split(" ");
            clock.innerHTML="";
            for(var i=0;i<arr.length;i++){
                clock.innerHTML+= "<span> "+arr[i]+" </span>";
            }
          }, 1000);

【讨论】:

  • 对不起,我的jquery排骨非常非常尴尬。所以使用你的代码。我是在某处插入该代码还是在修改一行
  • 这一行 "clock.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate(), tdy.getHours(), tdy.getMinutes(), tdy.getSeconds()) ).toString();"必须被这两行替换
  • 还有一行“clock.innerHTML”也可以被我提到的那两行替换
  • 我刚刚尝试过,它会将 span 标签包裹在所有内容周围,如下所示:5 MONTHS 19 DAYS 9 HOURS 15 MINS 10 SECONDS 而不是 5 MONTHS 19 DAYS 9 HOURS 15 MINS 10 SECONDS 抱歉,如果我第一次没有正确解释。英语不是我的母语。
  • 我已经编辑了它使用空格分割字符串,然后在innerHTML中使用它
猜你喜欢
  • 1970-01-01
  • 2012-11-17
  • 1970-01-01
  • 2016-05-08
  • 2014-05-22
  • 1970-01-01
  • 1970-01-01
  • 2017-08-19
  • 1970-01-01
相关资源
最近更新 更多