【问题标题】:Countdown timer layout - Keith Wood倒数计时器布局 - Keith Wood
【发布时间】:2023-03-15 01:10:01
【问题描述】:

我正在尝试使用 Keith Wood 提供的基本 .js 倒计时计时器,但在尝试调整布局时遇到了麻烦。因为我无法检查元素(每次检查它都会重新加载并消失,所以我无法确定需要调整哪些 CSS)。

我希望它输出为:XX 天 XX 小时 XX 分钟

我尝试在脚本中添加布局代码,但它什么也没做。

<script type="text/javascript">
$(function () {
  var austDay = new Date();
  austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
  $('#defaultCountdown').countdown({until: austDay});
  $('#year').text(austDay.getFullYear());
  $('#textLayout').countdown({until: liftoffTime, 
    layout: '{sn} {sl}, {mn} {ml}, {hn} {hl}, and {dn} {dl}'});
});
</script>

这部分显然应该让它像我想要的那样输出,但它没有

$('#textLayout').countdown({until: liftoffTime, 
        layout: '{sn} {sl}, {mn} {ml}, {hn} {hl}, and {dn} {dl}'});
    });

这里是现场:用户名是管理员密码是gogogo

http://www.francesca-designed.me/fyp/

【问题讨论】:

  • 这是我自己设置的密码,我会在没有密码的情况下将其发布在这里,但这只需要努力删除密码。有什么意义?
  • 你可以创建jsfiddle.net 样本吗?比在现场更容易查看
  • 它在 JSFiddle 中有效,但在我的实时站点示例中无效。
  • Uncaught ReferenceError: liftoffTime is not defined 在控制台中

标签: javascript jquery countdown countdowntimer jquery-countdown


【解决方案1】:

您需要定义“liftoffTime”。

缺失代码示例:

<script>
var liftoffTime = new Date();
liftoffTime.setDate(liftoffTime.getDate() + 5); /* 5 days countdown */
</script>

*我认为在你的情况下你需要用“austDay”替换“liftoffTime”(因为你已经定义了austDay)

【讨论】:

    【解决方案2】:
    <div id="defaultCountdown" class="hasCountdown">
    <span class="countdown_row  countdown_show4">
    <span class="countdown_section">
    <span class="countdown_amount">366</span><br>Days</span>
    <span class="countdown_section">
    <span class="countdown_amount">6</span><br>Hours</span>
    <span class="countdown_section">
    <span class="countdown_amount">57</span><br>Minutes</span>
    <span class="countdown_section">
    <span class="countdown_amount">39</span><br>Seconds</span>
    </span>
    </div>
    

    给你!

    如果你遇到这个问题(假设你使用的是谷歌浏览器),你要做的就是右键单击 -> 检查

    然后获取父容器并右键单击 -> 复制为 HTML 然后粘贴到编辑器中

    编辑

    解决您的代码给出错误输出的问题(而不是 CSS 布局部分 -

     layout: '{mn} {ml}, {hn} {hl}, and {dn} {dl}'
    

    只需删除

     {sn} {sl}
    

    【讨论】:

    • 这根本不能回答问题。我已经这样做了,我仍然不明白为什么输入的代码不起作用。
    • 实际上确实如此 - 要更改 CSS,您需要查看正在使用哪些类来设置样式 - 我回复了 (every time I inspect it it reloads and vanishes so I can't work out what CSS needs to be adjusted). - 现在你有了 CSS - 如果这没有帮助然后进一步解释。
    • 脚本中的布局代码应该可以工作而不能工作的问题无济于事。
    • 编辑了我的答案 - 我解决了你的 CSS 部分 - 你是对的,我的原件没有解决代码部分。 - 以上修改
    猜你喜欢
    • 2023-03-08
    • 1970-01-01
    • 2016-08-28
    • 1970-01-01
    • 1970-01-01
    • 2016-06-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多