Question

我试图让倒数计时器在结束时（在它达到0之后）说它＆＃34;直播＆＃34;代替0。

这是我的脚本：

 <div>
 <div class="container">
    <div id="progress" style="width: 200px; height: 200px; margin-bottom: 10px;"></div>                 
</div>

使用以下javascript：

<script type="text/javascript">
   jQuery(function ($) {
    var timer = null,
        startTime = null,
        progress = $("#progress").shieldProgressBar({
            min: 0,
            max: 10,
            value: 10,
            layout: "circular",
            layoutOptions: {
                circular: {
                    width: 40,
                    borderWidth: 1,
                    color: "#1E98E4"
                }
            },
            text: {

                enabled: true,
                template: '<span style="font-size:20px;">{0:n0}</span>" '
            },
            reversed: true
        }).swidget();

         startTime = Date.now();
                timer = setInterval(updateProgress, 100);


    function updateProgress() {
        var remaining = 10 - (Date.now() - startTime) / 1000;
        progress.value(remaining);
        if (remaining <= 0) {
            document.getElementById('container').innerHTML = 'Live';
            clearInterval(timer);
        }




    }
});

我添加了这个小字符串来替换＆＃34; 0＆＃34; by＆＃34; live＆＃34;但在计时器结束时没有任何反应：

document.getElementById('container').innerHTML = 'You are ready';

有人能帮助我吗？感谢

Answer 1

你似乎已经在你的项目中包含了Jquery，jquery使得这样的任务变得更容易，你需要做的就是：$(".container").html('Live!');

注意：确保您的剩余变量实际达到0.基本上确保您的计时器正常工作。我+1提示使用setTimout代替。

Answer 2

<div class="container">

document.getElementById('container').innerHTML = 'Live';

您的div的类是"container"，但您试图通过id选择它。更新您的选择器，你应该没事。

＆＃13;

jQuery(function($) {
  var startTime = Date.now();
  var timer = setInterval(updateProgress, 100);

  function updateProgress() {
    var remaining = 10 - (Date.now() - startTime) / 1000;
    if (remaining <= 0) {
      $('.container').html('Live');
      clearInterval(timer);
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">Hello</div>

＆＃13;

Answer 3

您正在使用以下内容获取容器div：getElementById，但它只有class属性，请尝试：

document.getElementsByClassName（＆＃34; container＆＃34;）[0] .innerHTML =＆＃39; Live＆＃39;;

或

将您的div更改为<div id="container" />

在javascript倒计时到达0后需要替换字符串

3 个答案: