javascript - 展示类(class)形象 10 秒

Question

我在下面给出了显示 9 个框 的代码，这些框的值类似于 digital time，

还有另一个类 box002 显示 digitscurrosponding to the randomly selected value of 9 boxes.

box002 可以拖动到以该数字开始的数字时间，然后该框将消失并且其下方的部分图像将可见，

明智地将 box002 中的所有 9 位数字拖放到具有数字时间的当前框，最后框后面的图像应该出现 10 秒 和 congradulation effect popups.

我的问题是我无法在 10 秒内显示盒子后面的图像，在 10 秒之前另一组数字时间加载到盒子。

如何更正我的代码？有什么办法可以做到这一点？

        var timeOut;

        function buildImage() {
            document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
        }

        function changeImage() {
            index++;
            if (index >= images.length) {
                index = 0;
            }
            document.getElementById('content').style.backgroundImage = 'url(' + images[index] + (index + 1) + ')';
        }

        var index = 0;

var timeOut;

function animateCongrat() 
{
  $('.congrats').show();

  clearTimeout(timeOut);
  addBlueBody();

  reset();

  var numberOfStars = 20;

  for (var i = 0; i < numberOfStars; i++) {
    $('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
  }

  animateText();
  animateBlobs();

  hideCongratAndBlueBody();
}






function addBlueBody() {
  $('body').addClass('bodyblue');
			$('#container').hide();
			$('#2container').hide();
			$('#3container').hide();
			$('#heading').hide();
			$('.hint').hide();
			
			$('#2').hide();
			$('.level').hide();
			$('.reset').hide();
			$('.quit').hide();
}

function hideCongratAndBlueBody() {
  timeOut = setTimeout(() => {
                $('.congrats').hide();
                $('body').removeClass('bodyblue');
				$('#container').show();
				$('#2container').show();
				$('#3container').show();
				$('#heading').show();
				$('.hint').show();
				
				$('#2').show();
				$('.level').show();
				$('.reset').show();
				$('.quit').show();
  }, 4000);
}

function reset() {
  $.each($('.blob'), function(i) {
    TweenMax.set($(this), {
      x: 0,
      y: 0,
      opacity: 1
    });
  });

  TweenMax.set($('h1'), {
    scale: 1,
    opacity: 1,
    rotation: 0
  });
}

function animateText() {
  TweenMax.from($('h1'), 0.8, {
    scale: 0.4,
    opacity: 0,
    rotation: 15,
    ease: Back.easeOut.config(4),
  });
}

function animateBlobs() {

  var xSeed = _.random(350, 380);
  var ySeed = _.random(120, 170);

  $.each($('.blob'), function(i) {
    var $blob = $(this);
    var speed = _.random(1, 5);
    var rotation = _.random(5, 100);
    var scale = _.random(0.8, 1.5);
    var x = _.random(-xSeed, xSeed);
    var y = _.random(-ySeed, ySeed);

    TweenMax.to($blob, speed, {
      x: x,
      y: y,
      ease: Power1.easeOut,
      opacity: 0,
      rotation: rotation,
      scale: scale,
      onStartParams: [$blob],
      onStart: function($element) {
        $element.css('display', 'block');
      },
      onCompleteParams: [$blob],
      onComplete: function($element) {
        $element.css('display', 'none');
      }
    });
  });
}

 var i = 0;
 function store() {
  var level = ['https://via.placeholder.com/300.png?text=Level+ 1','https://via.placeholder.com/300.png?text=Level+ 2','https://via.placeholder.com/300.png?text=Level+1']
  document.querySelector("#levelimage").src=level[i++];
  if (i>level.length-1)i=0;
}

function windowClose() {
window.open('','_parent','');
window.close();
}

var items = [  
      { label: '01:40', url: 'https://via.placeholder.com/75x75?text=1'  },
      { label: '02:20', url: 'https://via.placeholder.com/75x75?text=2'  },
      { label: '03:50', url: 'https://via.placeholder.com/75x75?text=3'  },
      { label: '04:45', url: 'https://via.placeholder.com/75x75?text=4'  },
      { label: '05:35', url: 'https://via.placeholder.com/75x75?text=5'  },
      { label: '06:10', url: 'https://via.placeholder.com/75x75?text=6'  },
      { label: '07:15', url: 'https://via.placeholder.com/75x75?text=7'  },
      { label: '08:10', url: 'https://via.placeholder.com/75x75?text=8'  },
      { label: '09:30', url: 'https://via.placeholder.com/75x75?text=9'  },
	  { label: '10:40', url:'https://via.placeholder.com/75x75?text=10' },
      { label: '11:25', url:'https://via.placeholder.com/75x75?text=11' },
      { label: '12:50', url:'https://via.placeholder.com/75x75?text=12' }];

var tempimages = [];
var array2=[];
array2 = items.slice(); 

var backimgcount=1;
var len=array2.length;

var item;
var displaycounter=0;


   

var images = ['https://picsum.photos/200/300/?random','https://picsum.photos/200/300/?random','pokedex3d_pro_art_1.jpg','https://picsum.photos/200/300/?random','https://picsum.photos/200/300/?random' ];
var index = 0;

function buildImage() {
    document.getElementById('content').style.backgroundImage = 'url('+images[index]+')';
}

function changeImage() {
    index++;
  if (index >= images.length) index = 0;
    document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
}
		





function rvalue() {
	
	
 elements = document.getElementsByClassName("box");

    for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor="   #79ff4d";
		//elements[i].borderRadius = "2px";
		elements[i].style.border = "2px solid #000066";
		//object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
	
    }	
	
ptags = document.querySelectorAll('[name="values"]');







for (var index = 0; index <9; index++) 
     {
      randomIndex = Math.floor(Math.random() * array2.length)
      
      item = array2[randomIndex];
	 
	  ptags[index].style.visibility = "visible";
      ptags[index].textContent = item.label;
      tempimages.push({data:item, index: randomIndex});
	  
	  ptags[index].dataset.itemIndex = randomIndex;
    }
	 
	var tlen=tempimages.length;
  	

	
}
	

function displayAllImages() 
{
  if (displaycounter==0 && tempimages.length == 0) 
  {
    rvalue();
	
	store();
	//return;
	
  }
  else{
  setTimeout(rvalue, 11000)

  
  }
  	//tempimages = tempimages.concat(tempimages.splice(0,2));
	//item = tempimages.splice(0, 1);
	
	function shuffle(array) {
   var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

// Used like so
var arr = tempimages;
arr = shuffle(arr);

	
	
	item = arr.shift(); 
    image = document.getElementById('slide');
    image.src = item.data.url;
    image.dataset.itemIndex = item.index;
	
	  
};

$(function() {
 	 
  displayAllImages(); 
  
});	

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id).classList.add('dashed');
}

function drop(ev) {

  ev.preventDefault();


 var data = ev.dataTransfer.getData("Text");
 var el = document.getElementById(data);
 //alert(data);
 //alert(el);
	
 var x=document.getElementById("slide").dataset.itemIndex;

 var y = ev.target.dataset.itemIndex;

 //alert("x=>" + x + " y=>" + y);
  
 if(x==y)
  {
  //el.parentNode.removeChild; 
  
  
  ev.currentTarget.style.backgroundColor = 'initial'; 
  ev.currentTarget.style.border = 'initial';

  var pParagraph = ev.currentTarget.firstElementChild;
  //ev.currentTarget.removeChild(pParagraph);
  pParagraph.style.visibility = "hidden";
  
  item=this.item;
  var arrayvalue=item.dataindex;
  array2.splice(arrayvalue,1);
  
 	
 

 
  

  //alert("sucessfull");
  if (tempimages.length == 0) 
  {
	
	displaycounter++;
	store();
	setTimeout(animateCongrat, 3000)
	


	
	changeImage();
  }
  displayAllImages();
   
   
  }
  else{
  playAudio2();
  alert("WRONG TIME PLACED");
  }

}

@font-face {
  font-family: 'Sigmar One';
  font-style: normal;
  font-weight: 400;
  src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https: //fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
}

@import url(https: //fonts.googleapis.com/css?family=Sigmar+One);
body {
  overflow: hidden;
}

.dashed {
	border: 2px dashed #999 !important;
}
.bodyblue {
  background: #3da1d1;
  color: #fff;
}

.congrats {
  position: absolute;
  top: 140px;
  width: 550px;
  height: 100px;
  padding: 20px 10px;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  display: none;
}

h1 {
  transform-origin: 50% 50%;
  font-size: 50px;
  font-family: 'Sigmar One', cursive;
  cursor: pointer;
  z-index: 2;
 /* position: absolute;
  top: 0; */
  text-align: center;
  width: 100%;
}



.blob {
  height: 50px;
  width: 50px;
  color: #ffcc00;
  position: absolute;
  top: 45%;
  left: 45%;
  z-index: 1;
  font-size: 30px;
  display: none;
}


.timetaken {
  margin-top: 50%;
}

.heading{
margin-left:20%;
margin-right:20%;
margin-top:-2%;
}


.box {
  width: calc(33.3% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 0%;
  background-color: #99ffff;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  cursor:pointer;
}

.box002 {
  position: absolute;
  top: 27.5vh;
  left: 73.3vw;
  
  cursor:pointer;
     }
	
	.box002 img {
  width: 13.5vw;
  height: 22.5vh;
  border-radius: 50%;
}		
.level{
  position: absolute;
  top: 81.3vh;
  left: 62.3vw;
  
  cursor:pointer;}
  
.level img{
	width: 9.3vw;
  height: 15.5vh;
  border-radius: 50%;
	}  
.reset{
	position: absolute;
  top: 81.9vh;
  left: 77.3vw;
  
  cursor:pointer;}

.reset img{
	width: 8.3vw;
  height: 14.5vh;
  border-radius: 50%;
	} 
.quit{position: absolute;
  top: 82.3vh;
  left: 90.3vw;
  
  cursor:pointer;}
.quit img{
	width: 7.3vw;
  height: 12.5vh;
  border-radius: 50%;
	}  
  

#timer{
font-family: 'Sigmar One', cursive;
margin-top:-20%;
margin-left:120%;
}


#heading{
font-family: 'Sigmar One', cursive;
color:#F534BB;
}

#container {
    white-space:nowrap;
	border:px solid #CC0000;
	
}

.containerr{
	border:px solid #FF3399;
	} 
.pic{
	background-size: 100% 100%;
	}	
	
.container2 {
  width: 35vw;
  position: fixed;
  top: 43.5vh;
  left: 13vw;
}
.box p {
  font-size: calc(2vw + 10px);
}
p{
font: "Courier New", Courier, monospace;
font-size:30px;

 color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
                 0px -5px 35px rgba(255,255,255,0.3);

color: #005ce6;
text-align: center;
}	

.text {
    padding: 20px;
    margin:7 px;
    margin-top:10px;
    color:white;
    font-weight:bold;
    text-align:center;
}

body{

    background-size: 100vw 100vh;
}

.next{
margin-right:50%;
margin-left:50%;
margin-bottom:10%;
float:right;
}

ul{
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
		
.reset img:hover {opacity: 1}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
<body onload="buildImage();">
<div class="congrats">
  
  <h1>Congratulations!</h1>
  <h1 style="color:#66FFFF; font-size:24px;">Time Taken:<h1 style="float:left; color:#33FFCC; font-size:24px; padding-top:-30%;" id="timetaken"></h1>		    
  </h1>
  
  </div>


    
    <h4 id="timer" style="color:#ffc34d; font-size:29px"> Time   <span id="countdowntimer">0 </span></h4>
    
 
	
<div class="container2">
    <div class="containerr">
    <div class="pic" id="content" >
            <div id="container">
            
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>
            </div>
             <div id="2container">
            
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>
            </div>
             <div id="3container">
            
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>
            </div>
                   
      </div>      
          
            
  </div>

</div>
    
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
	<img src=""  draggable="true" id="slide"  border="rounded"/>
</div> 


<div class="level" >
<img src="" id="levelimage"/>
</div>
</body>

Answer 1

我认为你的问题是你需要从 displayAllImages 中的 setTimeout(rvalue, 11000) 捕获句柄，然后在有人获胜时清除它，这样它就不会获胜火。 ( docs )

// when playing, save handle
var timeoutId = window.setTimeout(rvalue, 11000);

// when player wins
window.clearTimeout(timeoutId);