時計は常に表示されます

-1

こんにちは、私はそれが特定の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>

出典

2017-07-21 Akhil

SHOWTIME（））< - あなたは関数を呼び出すと、それはイベントリスナーに戻り何割り当てます。 – epascarello

このように表示または非表示にしたいですか？

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); 
 
}

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

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

出典

2017-07-21 02:15:36 ewwink

あなたが今持っているもののようなリスナーを追加する必要があります。また、マウスアップ時にキャンセルできるように、変数にsetTimeoutを割り当てる必要があります。次に、mousedownで設定されたタイムアウトをキャンセルしdivのテキストをリセットするリスナーをmouseupに追加します。

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>

出典

2017-07-21 02:04:11 Russell

ジャスト（を除く） 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>

をお試しください

出典

2017-07-21 02:08:22 selvarajmas

時計は常に表示されます

答えて

関連する問題