怎麽讓HTML倒數計時器的Console.log不換行。

        <!DOCTYPE html>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <html>
        <head>
        <meta charset="utf-8">
        </head>
        <style>
        #demo{
          text-align:center;

     }
        </style>
        <body>
            <section class="center">
        <p class="demo"   id="demo"></p>
      

        <script>
        
        // Set the date we're counting down to
    var countDownDate = new Date("Jun 10, 2021 18:00:00").getTime();

        // Update the count down every 1 second
        var x = setInterval(function() {
          // Get today's date and time
          var now = new Date().getTime();
            
          // Find the distance between now and the count down date
          var distance = countDownDate - now;
        
          // Time calculations for days, hours, minutes and seconds
          var days = Math.floor(distance / (1000 * 60 * 60 * 24));
          var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
          var seconds = Math.floor((distance % (1000 * 60)) / 1000);
          // Output the result in an element with id="demo"
        };
            document.getElementById("demo").innerHTML = days + "天 " + hours + "小時 " + minutes + "分鐘 " + seconds + "秒 ";
          console.log(distance);
        // If the count down is over, write some text 
       
        
          if (distance < 0) {
     clearInterval(x);

  }
}, 1000);
        </script>
        </body>
        </html>

 

在每次console.log之前,加一句console.clear()

console.log只是一个开发调试用的方法,执行一次输出一行。

console.log把参数拼接一下

你可以用个变量拼接一下

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>

<head>
    <meta charset="utf-8">
</head>
<style>
    #demo {
        text-align: center;
    }
</style>

<body>
    <section class="center">
        <p class="demo" id="demo"></p>

        <script>
            // Set the date we're counting down to
            var countDownDate = new Date("Jun 10, 2021 18:00:00").getTime();
            var time=""
            // Update the count down every 1 second
            var x = setInterval(function () {
                // Get today's date and time
                var now = new Date().getTime();
                // Find the distance between now and the count down date
                var distance = countDownDate - now;
                // Time calculations for days, hours, minutes and seconds
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                // Output the result in an element with id="demo"
           
            document.getElementById("demo").innerHTML = days + "天 " + hours + "小時 " + minutes + "分鐘 " + seconds + "秒 ";
             time+=distance
            console.log(time);
            // If the count down is over, write some text 

            if (distance < 0) {
                clearInterval(x);
            }
}, 1000);
        </script>
</body>

</html>

 

您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632