Question

大家好我正在尝试创建一个时钟，它只显示某个div点击时。但似乎正在发生的事情是时钟总是在显示，我不知道为什么会发生这种情况。下面是我到目前为止尝试过的代码。

<!DOCTYPE html>
<html>
<head>
    <title>JS Clock tuts</title>
</head>
<body>
    <div id="stop">CLICK HERE</div>
    <script>

    var get = document.getElementById("stop");
    get.addEventListener("click", showTime())

        function showTime() {
            var now = new Date();
            var h = now.getHours();
            var m = now.getMinutes();
            var s = now.getSeconds();
            var state = "AM";

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

            if (h > 12) 
            {
                h = h - 12;
                state = "PM";
            }

            if (h == 0) 
            {
            h = 12;
            }
            var time = h + ":" + m +":" + s + " " + state;
            document.getElementById("stop").innerHTML = time;
            setTimeout(showTime, 0);
        }

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

Answer 1

您需要捕获mousedown并添加一个类似于您现在拥有的侦听器。此外，您需要将setTimeout分配给变量，以便在mouseup上取消它。然后你添加一个mouseup的监听器，它将取消mousedown中设置的超时并重置div文本。

var get = document.getElementById("stop");
var showClock;

get.addEventListener("mousedown", showTime);
get.addEventListener("mouseup", function()
{
  if (showClock) {
    clearTimeout(showClock);
  }
  document.getElementById("stop").innerHTML = "CLICK HERE";
});

function showTime() {
    var now = new Date();
    var h = now.getHours();
    var m = now.getMinutes();
    var s = now.getSeconds();
    var state = "AM";

    s = (s < 10) ? "0" + s : s;
    m = (m < 10) ? "0" + m : m;

    if (h > 12) 
    {
        h = h - 12;
        state = "PM";
    }

    if (h == 0) 
    {
    h = 12;
    }
    var time = h + ":" + m +":" + s + " " + state;
    document.getElementById("stop").innerHTML = time;
    showClock = setTimeout(showTime, 0);
}

<!DOCTYPE html>
<html>
<head>
    <title>JS Clock tuts</title>
</head>
<body>
    <div id="stop">CLICK HERE</div>
    <script>

    
    </script>
</body>
</html>

Answer 2

只需从showTime（）

中删除（）即可

get.addEventListener("click", showTime())
↓
get.addEventListener("click", showTime)

尝试以下代码

var get = document.getElementById("stop");
get.addEventListener("click", showTime)

function showTime() {
  var now = new Date();
  var h = now.getHours();
  var m = now.getMinutes();
  var s = now.getSeconds();
  var state = "AM";

  s = (s < 10) ? "0" + s : s;
  m = (m < 10) ? "0" + m : m;

  if (h > 12) 
  {
    h = h - 12;
    state = "PM";
  }

  if (h == 0) 
  {
    h = 12;
  }
  var time = h + ":" + m +":" + s + " " + state;
  document.getElementById("stop").innerHTML = time;
  setTimeout(showTime, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stop">CLICK HERE</div>

Answer 3

你想要显示或隐藏吗？

＆＃13;

document.getElementById("show").addEventListener('click', function() {
  document.getElementById("clock").style.visibility = "visible";
  showTime();
});
document.getElementById("hide").addEventListener('click', function() {
  document.getElementById("clock").style.visibility = "hidden";
});


function showTime() {
  var now = new Date();
  var h = now.getHours();
  var m = now.getMinutes();
  var s = now.getSeconds();
  var state = "AM";

  s = (s < 10) ? "0" + s : s;
  m = (m < 10) ? "0" + m : m;

  if(h > 12) {
    h = h - 12;
    state = "PM";
  }

  if(h == 0) {
    h = 12;
  }
  var time = h + ":" + m + ":" + s + " " + state;
  document.getElementById("clock").innerHTML = time;
  setTimeout(showTime, 0);
}

＆＃13;

#clock{visibility:hidden}
#show,#hide{cursor:pointer}

＆＃13;

<div id="show">show</div>
<div id="hide">hide</div>
<div id="clock"></div>

＆＃13;

时钟总是显示

3 个答案: