admin管理员组

文章数量:1022736

So I have a clock that works fine. but what I now want to display/print is the current time in that clock after clicking start rit. I tried to first stop the set counter but that also stops the timer in the first part of my script. What happens now is that I just have two timers. I don't want that, I want to click on the start rit button and then it takes the time currently and then prints it inside txt.

    
      function ItsShowTime(){
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        if(h == 0){
        }
        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;
        var time = h + ":" + m + ":" + s;


        document.getElementById("Clock").innerText = time;
        document.getElementById("Clock").textContent = time;
        setTimeout(ItsShowTime, 1000);
        CurrentTime(time);
      }
      ItsShowTime();
      function CurrentTime(time){
          document.getElementById("txt").innerText = time;
      }
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Digital Clock</title>
  </head>
  <body>
    <input type="button" value="Start rit" onclick="CurrentTime()">
    <div id="txt"></div>
    <div id="Clock">


    </div>
  </body>
</html>

So I have a clock that works fine. but what I now want to display/print is the current time in that clock after clicking start rit. I tried to first stop the set counter but that also stops the timer in the first part of my script. What happens now is that I just have two timers. I don't want that, I want to click on the start rit button and then it takes the time currently and then prints it inside txt.

    
      function ItsShowTime(){
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        if(h == 0){
        }
        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;
        var time = h + ":" + m + ":" + s;


        document.getElementById("Clock").innerText = time;
        document.getElementById("Clock").textContent = time;
        setTimeout(ItsShowTime, 1000);
        CurrentTime(time);
      }
      ItsShowTime();
      function CurrentTime(time){
          document.getElementById("txt").innerText = time;
      }
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Digital Clock</title>
  </head>
  <body>
    <input type="button" value="Start rit" onclick="CurrentTime()">
    <div id="txt"></div>
    <div id="Clock">


    </div>
  </body>
</html>

I checked on w3schools how to do it I checked on Bitdegree and a couple of similar questions on the stack but I couldn't find exactly what I needed

  • javascript
  • html
Share Improve this question edited Mar 9, 2020 at 10:49 Not A Robot 2,6922 gold badges19 silver badges37 bronze badges asked Mar 9, 2020 at 10:44 McBoominMcBoomin 5713 bronze badges
Add a ment  | 

7 Answers 7

Reset to default 2

Javascript Code 

        var timer = undefined;
        function getShowTime() {
            var date = new Date();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            if (h == 0) {
            }
            h = (h < 10) ? "0" + h : h;
            m = (m < 10) ? "0" + m : m;
            s = (s < 10) ? "0" + s : s;
            return h + ":" + m + ":" + s;
        }

        function CurrentTime() {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                const time = getShowTime();
                document.getElementById("txt").innerText = time;
            }, 1000);

        }

And HTML Code 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Digital Clock</title>
  </head>
  <body>
    <input type="button" value="Start rit" onclick="CurrentTime()">
    <div id="txt"></div>
    <div id="Clock">


    </div>
  </body>
</html>

If you want to auto-refresh every second use this:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Digital Clock</title>
</head>

<body>
  <input type="button" value="Start rit" onclick="ItsShowTime()">
  <div id="txt"></div>
  <div id="Clock">

    <script type="text/javascript">
      function ItsShowTime() {
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        if (h == 0) {}
        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;
        var time = h + ":" + m + ":" + s;

        setTimeout(ItsShowTime, 1000);
        document.getElementById("txt").innerText = time;
      }
     
    </script>
  </div>
</body>

</html>

If not just delete setTimeout();

It is easier if you break them into two seperate functions like this:

var time;
function ItsShowTime(){
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();

        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;
        time = h + ":" + m + ":" + s;

        document.getElementById("Clock").textContent = time;
        setTimeout(ItsShowTime, 1000);
}

function CurrentTime(){
  document.getElementById("txt").innerText = time;
}

ItsShowTime();
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Digital Clock</title>
  </head>
  <body>
    <input type="button" value="Start rit" onclick="CurrentTime()">
    <div id="txt"></div>
    <div id="Clock">


    </div>
  </body>
</html>

Try this: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Digital Clock</title>
  </head>
  <body>
    <input type="button" value="Start rit" onclick="CurrentTime()">
    <div id="txt"></div>
    <div id="Clock">

    <script type="text/javascript">
      var time;
      function ItsShowTime(){
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        if(h == 0){
        }
        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;
        time = h + ":" + m + ":" + s;


        document.getElementById("Clock").innerText = time;
        document.getElementById("Clock").textContent = time;
        setTimeout(ItsShowTime, 1000);
        //CurrentTime(time);
      }
      ItsShowTime();
      function CurrentTime(){
          document.getElementById("txt").innerText = time;
      }

    </script>
    </div>
  </body>
</html>

It keeps the clock going and when clicked on button, it displays time at the time of click along with the clock.

If I understand your question correctly this is the answer.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Digital Clock</title>
  </head>
  <body>
    <input type="button" value="Start rit" onclick="startStop()">
    <div id="txt"></div>
    <div id="Clock">

    <script type="text/javascript">
      let time,started=false;

      function startStop(){
        started=!started;
        ItsShowTime();
      }
      function ItsShowTime(){
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        if(h == 0){
        }
        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;
        time = h + ":" + m + ":" + s;
        if(started){
        document.getElementById("Clock").innerText = time;
          setTimeout(ItsShowTime, 1000);
        }       
      }
    </script>
    </div>
  </body>
</html>

You can see the working here

Just for the idea, you can modernize the script somewhat. By the way, it's generally not a good idea to use inline event handlers.

{
  const clock = document.querySelector("#Clock");
  const time = document.querySelector("#txt");
  const getTime = () => ((d) => 
    [d.getHours(), d.getMinutes(), d.getSeconds()]
      .map(v => `${v}`.padStart(2, `0`))
      .join(`:`))(new Date());
  const timer = () => {
    clock.textContent = getTime();
    setTimeout(timer, 1000);
  };
  const currentTime = () => time.textContent = getTime();
  document.querySelector("input").addEventListener(`click`, currentTime);
  timer();
}
<input type="button" value="Start rit"> <span id="txt"></span>
<div id="Clock"></div>

I hope this will help

function ItsShowTime() {
  var date = new Date();
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
  if (h == 0) {}
  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;
  var time = h + ":" + m + ":" + s;


  document.getElementById("Clock").innerText = time;
  setTimeout(ItsShowTime, 1000);
}
ItsShowTime();

function CurrentTime() {
  var date = new Date();
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
  if (h == 0) {}
  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;
  var time = h + ":" + m + ":" + s;
  document.getElementById("txt").innerText = time;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Digital Clock</title>
</head>

<body>
  <button onclick="CurrentTime()">Start rit</button>
  <p>txt : <span id="txt" /></p>
  <p>Clock : <span id="Clock" /></p>
</body>

</html>

So I have a clock that works fine. but what I now want to display/print is the current time in that clock after clicking start rit. I tried to first stop the set counter but that also stops the timer in the first part of my script. What happens now is that I just have two timers. I don't want that, I want to click on the start rit button and then it takes the time currently and then prints it inside txt.

    
      function ItsShowTime(){
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        if(h == 0){
        }
        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;
        var time = h + ":" + m + ":" + s;


        document.getElementById("Clock").innerText = time;
        document.getElementById("Clock").textContent = time;
        setTimeout(ItsShowTime, 1000);
        CurrentTime(time);
      }
      ItsShowTime();
      function CurrentTime(time){
          document.getElementById("txt").innerText = time;
      }
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Digital Clock</title>
  </head>
  <body>
    <input type="button" value="Start rit" onclick="CurrentTime()">
    <div id="txt"></div>
    <div id="Clock">


    </div>
  </body>
</html>

So I have a clock that works fine. but what I now want to display/print is the current time in that clock after clicking start rit. I tried to first stop the set counter but that also stops the timer in the first part of my script. What happens now is that I just have two timers. I don't want that, I want to click on the start rit button and then it takes the time currently and then prints it inside txt.

    
      function ItsShowTime(){
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        if(h == 0){
        }
        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;
        var time = h + ":" + m + ":" + s;


        document.getElementById("Clock").innerText = time;
        document.getElementById("Clock").textContent = time;
        setTimeout(ItsShowTime, 1000);
        CurrentTime(time);
      }
      ItsShowTime();
      function CurrentTime(time){
          document.getElementById("txt").innerText = time;
      }
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Digital Clock</title>
  </head>
  <body>
    <input type="button" value="Start rit" onclick="CurrentTime()">
    <div id="txt"></div>
    <div id="Clock">


    </div>
  </body>
</html>

I checked on w3schools how to do it I checked on Bitdegree and a couple of similar questions on the stack but I couldn't find exactly what I needed

  • javascript
  • html
Share Improve this question edited Mar 9, 2020 at 10:49 Not A Robot 2,6922 gold badges19 silver badges37 bronze badges asked Mar 9, 2020 at 10:44 McBoominMcBoomin 5713 bronze badges
Add a ment  | 

7 Answers 7

Reset to default 2

Javascript Code 

        var timer = undefined;
        function getShowTime() {
            var date = new Date();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            if (h == 0) {
            }
            h = (h < 10) ? "0" + h : h;
            m = (m < 10) ? "0" + m : m;
            s = (s < 10) ? "0" + s : s;
            return h + ":" + m + ":" + s;
        }

        function CurrentTime() {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                const time = getShowTime();
                document.getElementById("txt").innerText = time;
            }, 1000);

        }

And HTML Code 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Digital Clock</title>
  </head>
  <body>
    <input type="button" value="Start rit" onclick="CurrentTime()">
    <div id="txt"></div>
    <div id="Clock">


    </div>
  </body>
</html>

If you want to auto-refresh every second use this:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Digital Clock</title>
</head>

<body>
  <input type="button" value="Start rit" onclick="ItsShowTime()">
  <div id="txt"></div>
  <div id="Clock">

    <script type="text/javascript">
      function ItsShowTime() {
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        if (h == 0) {}
        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;
        var time = h + ":" + m + ":" + s;

        setTimeout(ItsShowTime, 1000);
        document.getElementById("txt").innerText = time;
      }
     
    </script>
  </div>
</body>

</html>

If not just delete setTimeout();

It is easier if you break them into two seperate functions like this:

var time;
function ItsShowTime(){
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();

        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;
        time = h + ":" + m + ":" + s;

        document.getElementById("Clock").textContent = time;
        setTimeout(ItsShowTime, 1000);
}

function CurrentTime(){
  document.getElementById("txt").innerText = time;
}

ItsShowTime();
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Digital Clock</title>
  </head>
  <body>
    <input type="button" value="Start rit" onclick="CurrentTime()">
    <div id="txt"></div>
    <div id="Clock">


    </div>
  </body>
</html>

Try this: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Digital Clock</title>
  </head>
  <body>
    <input type="button" value="Start rit" onclick="CurrentTime()">
    <div id="txt"></div>
    <div id="Clock">

    <script type="text/javascript">
      var time;
      function ItsShowTime(){
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        if(h == 0){
        }
        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;
        time = h + ":" + m + ":" + s;


        document.getElementById("Clock").innerText = time;
        document.getElementById("Clock").textContent = time;
        setTimeout(ItsShowTime, 1000);
        //CurrentTime(time);
      }
      ItsShowTime();
      function CurrentTime(){
          document.getElementById("txt").innerText = time;
      }

    </script>
    </div>
  </body>
</html>

It keeps the clock going and when clicked on button, it displays time at the time of click along with the clock.

If I understand your question correctly this is the answer.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Digital Clock</title>
  </head>
  <body>
    <input type="button" value="Start rit" onclick="startStop()">
    <div id="txt"></div>
    <div id="Clock">

    <script type="text/javascript">
      let time,started=false;

      function startStop(){
        started=!started;
        ItsShowTime();
      }
      function ItsShowTime(){
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        if(h == 0){
        }
        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;
        time = h + ":" + m + ":" + s;
        if(started){
        document.getElementById("Clock").innerText = time;
          setTimeout(ItsShowTime, 1000);
        }       
      }
    </script>
    </div>
  </body>
</html>

You can see the working here

Just for the idea, you can modernize the script somewhat. By the way, it's generally not a good idea to use inline event handlers.

{
  const clock = document.querySelector("#Clock");
  const time = document.querySelector("#txt");
  const getTime = () => ((d) => 
    [d.getHours(), d.getMinutes(), d.getSeconds()]
      .map(v => `${v}`.padStart(2, `0`))
      .join(`:`))(new Date());
  const timer = () => {
    clock.textContent = getTime();
    setTimeout(timer, 1000);
  };
  const currentTime = () => time.textContent = getTime();
  document.querySelector("input").addEventListener(`click`, currentTime);
  timer();
}
<input type="button" value="Start rit"> <span id="txt"></span>
<div id="Clock"></div>

I hope this will help

function ItsShowTime() {
  var date = new Date();
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
  if (h == 0) {}
  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;
  var time = h + ":" + m + ":" + s;


  document.getElementById("Clock").innerText = time;
  setTimeout(ItsShowTime, 1000);
}
ItsShowTime();

function CurrentTime() {
  var date = new Date();
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
  if (h == 0) {}
  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;
  var time = h + ":" + m + ":" + s;
  document.getElementById("txt").innerText = time;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Digital Clock</title>
</head>

<body>
  <button onclick="CurrentTime()">Start rit</button>
  <p>txt : <span id="txt" /></p>
  <p>Clock : <span id="Clock" /></p>
</body>

</html>

本文标签： javascriptDisplay current time value after clicking start buttonStack Overflow

版权声明：本文标题：javascript - Display current time value after clicking start button - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745558427a2156014.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。