顯示DIV如果在某個其他分區不點擊超過x秒以上

Question

我目前在JavaScript中，目前做的好是我想做一個代碼：

• 警報消息首先出現在7秒之後
• 刪除警報被點擊時DIV目標，摸不着

但我無法做到這一點：一旦用戶點擊了一個目標（這是已經運行），但後來我想提醒消息後重現，每當用戶沒有點擊時，在.target div超過5秒。

我把它改寫得更清楚：我希望消息在7秒後第一次出現，然後每次用戶點擊.target時，消息應該消失。但是如果他沒有在.target上點擊超過5秒，消息應該重新出現

如何做到這一點？

HTML

<section id="alert-msg" style="visibility: hidden"> 
    <div>my message</div> 
</section> 

的Javascript

//1. message only appear after 7 sec 
function showIt2() { 
    document.getElementById("alert-msg").style.visibility = "visible"; 
    } 
    setTimeout(showIt2, 7000); 

// 2. alert message disappear when .target div is clicked 
    $('.target').on('click touchstart', function(){ 
    $("#alert-msg").remove(); 
    }); 

這裏是一個的jsfiddle：https://jsfiddle.net/111994re/3/

Answer 1

退房此次修訂：https://jsfiddle.net/111994re/7/

我加你裏面的onclick 我已經設置能見度隱藏，而不是刪除它的setTimeout（去掉它，你不能在這一點上取消隱藏，你將不得不重新添加）

//1. message only appear after 7 sec 
function showIt2() { 
    document.getElementById("alert-msg").style.visibility = "visible"; 
    } 
    setTimeout(showIt2, 7000); 

// 2. alert message disappear when .target div is clicked 
    $('.target').on('click touchstart', function(){ 
    document.getElementById("alert-msg").style.visibility = "hidden"; 
    setTimeout(showIt2, 5000); 
    }); 

Answer 2

好了，現在，警報x秒後出現。然後，如果用戶點擊目標，定時器將重置，並在無限期x秒後再次出現警報。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 

<section id="alert-msg"> 
    <div style="display:none;">Alert!</div> 
</section> 

<div class="target">Target</div> 

<script type="text/javascript"> 
//1. message only appear after 7 sec 
function showIt2() { 
    if($('#alert-msg')){ 
     $('#alert-msg div').fadeOut(); 
     $('#alert-msg div').fadeIn(); 
    } 
    } 
    var show = setInterval(showIt2, 5000); 

// 2. alert message disappear when .target div is clicked 
    $('.target').on('click touchstart', function(){ 
    $("#alert-msg div").hide(); 
    clearInterval(show); 
    show = setInterval(showIt2, 5000); 
    }); 
</script> 

Answer 3

其中有一些打字錯誤

//1. message only appear after 7 sec 
 
function showIt2() { 
 
    document.getElementById("alert-msg").style.visibility = "visible"; 
 
    } 
 
    setTimeout(showIt2, 7000); 
 

 
// 2. alert message disappear when .target div is clicked 
 
    $('.target').on('click touchstart', function(){ 
 
    $("#alert-msg").remove(); 
 
});

<section id="alert-msg" style="visibility: hidden"> 
 
    <div>my message</div> 
 
</section>

Answer 4

https://jsfiddle.net/111994re/10/

//1. message only appear after 7 sec 
function showIt2() { 
    $("#alert-msg").show(); 
    } 
    setTimeout(showIt2, 7000); 

// 2. alert message disappear when .target div is clicked 
    $('.target').on('mousedown touchstart', function(){ 
    $("#alert-msg").hide(); 
    clearTimeout(this.downTimer); 

    }).on("mouseup touchstop", function(e) { 
    this.downTimer = setTimeout(function() { 

      showIt2(); 
    }, 5000); 
});