Написать

Ru

EspañolPortuguês

Тёмная тема

Написать

Тёмная тема

Ru

EspañolPortuguês
htmlcssjavascript

Ну, я разговариваю по телефону, так что это сложно, но вы хотите, чтобы он был похож на тайм-аут. Так что-то вроде «let displayTimeout = null» вверху. Затем «displayTimout = setTimeout (rvalue, 11000)» в функции displayAllImages. Наконец, в animateCongrat «if (displayTimeout! = Null) clearTimeout (displayTimeout)». Вы хотите, чтобы то же самое было ясно и в displayAllImages, так что вы не удваиваете, если оно уже установлено.

я есть приведенный ниже код, который показывает9 коробок, которые имеют такие значения, какdigital time,

Есть другой классbox002 показdigitsсопоставляя со случайно выбранным значением девяти ящиков.

box002can be dragged to digital time starting with that digit тогда эта коробка получитсяdissappeared и часть изображения под ним будетvisible,

как мудрое перетаскивание всех 9 цифр в box002 в перекрестное поле с цифровым временем, и, наконец, изображение за полями должно появиться для10 seconds и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 = _.rando,m(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>

Ответы на вопрос(1)

Ваш ответ на вопрос

Популярные вопросы

0 ответов

соответствующий запрос о том, как получить открытый ключ с сервера открытого ключа

0 ответов

Воспроизведение звуков независимо от уровня громкости устройства

0 ответов

Первая буква слов в верхнем регистре с использованием SED

0 ответов

Как мне создать документацию с помощью Pydoc?

0 ответов

Юникод символы на принтере ZPL