无法检查 div 是否淡出且未单击



>伙计们,我有一个div,它随机掉落并在屏幕底部淡出,当我在到达底部之前单击它时,它会消失..所以我想计算到达底部但未点击的错过的div数量.. 这是我的代码

var ranInterval = 1000 + Math.floor((Math.random() * 7000) + 1);
window.setTimeout( CreateDiv, ranInterval ); 
function CreateDiv()
{
    var ranLeft1 = Math.floor((Math.random() * 700) + 1);
    var ranInterval = 2000 + Math.floor((Math.random() *  5000) + 1);
    jQuery('<div class="droper1" id="droper1" onclick="myFunction1()"/>').css({top: 10, left: ranLeft1 }).
	    animate({top: "+=583px"}, 9000 ).fadeOut(500).appendTo('#container' );
}
$(document).on("click", ".droper1", function(){
   score++;
   jQuery(this).remove();
   document.getElementById("score").innerHTML = score;
  // checking if it is not clicked and fadeout increase the  missed variable 
});
<td>Missed Green Boxes :</td>
<td><label type="text" id="missed" name="missed"></td> 
  
<div id="container" class="container"></div>

这是您问题的答案:http://jsfiddle.net/n3j1nupk/1/

var score = 0;
var misses = 0;
var ranInterval = 1000 + Math.floor((Math.random() * 1000) + 1);
window.setTimeout( CreateDiv, ranInterval ); 
function CreateDiv()
{
    var ranLeft1 = Math.floor((Math.random() * 700) + 1);
    var ranInterval = 2000 + Math.floor((Math.random() *  2000) + 1);
    jQuery('<div class="droper1" />').css({top: 10, left: ranLeft1 }).
    animate({top: "+=583px"}, 9000, 
        function() {
            if (!$(this).hasClass("clicked")) {
                misses++;
                document.getElementById("misses").innerHTML = "Misses: " + misses;
            }
        }).fadeOut(500).appendTo('#container' );
}
$(document).on("click", ".droper1", function(){
   score++;
    $(this).addClass("clicked");
   jQuery(this).remove();
    document.getElementById("score").innerHTML = "Score: " + score;
  // checking if it is not clicked and fadeout increase the  missed variable 
});

单击正方形时,将向其添加类。当它到达底部时,您检查是否有该类,如果没有,则表示它未被单击。请注意,您的代码还有其他不起作用的内容(只有一个多维数据集生成),但这超出了本问题的范围。

最新更新