显示班级图像10秒钟 [英] Show a class image for 10 seconds
本文介绍了显示班级图像10秒钟的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的下面给出的代码显示 9个方框，其值类似于数字时间，
I have the given code below which show 9 boxes, which have values like digital time,
还有另一个类 box002 显示位数，其中包含随机选择的九个方框的值。
There is another class box002 showing digitscurrosponding to the randomly selected value of nine boxes.
box002 可以从该数字开始拖到数字时间然后该框得到消失它下面的图像部分将是可见，
box002 can be dragged to digital time starting with that digit then that box get dissappeared and portion of image under it will be visible,
就像明智地将box002中的所有9位数拖放到currosponding带有数字时间的方框，最后方框后面的图像应显示为 10秒，并且a 的促销效果会弹出。
like wise drag and drop all 9 digits in box002 to currosponding box with digital time and finally the image behind the boxes should appear for 10 seconds and the a congradulation effect popups.
我的问题是我无法在10秒内显示框后面的图像，在10秒之前另一组数字时间加载到框中。
如何更正我的代码？有没有办法实现这个目标？
How to correct my code? is there a way i can achieve this?
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>
推荐答案
我认为您的问题是需要从中捕获句柄setTimeout（rvalue，11000）在 displayAllImages 中，然后在有人获胜时将其清除，以便不会触发。 （ docs ）
I think your problem is you need to capture the handle from setTimeout(rvalue, 11000) in displayAllImages and then clear it when someone wins so that it doesn’t fire. (docs)
// when playing, save handle
var timeoutId = window.setTimeout(rvalue, 11000);
// when player wins
window.clearTimeout(timeoutId);
这篇关于显示班级图像10秒钟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
