gpt4 book ai didi

javascript - 将 A 匹配到 B,正确匹配消失,定时器和错误计数

转载 作者:可可西里 更新时间:2023-11-01 13:26:22 25 4
gpt4 key购买 nike

在此匹配事件中提供一些指导将不胜感激。我用下面的基本 htmlcss 代码进行说明 - 这是我想要的格式,意思是,我想要内容(文字/数字 ) 在 HTML 部分中可以更改的框,我只需要 javascript 方面的帮助。

目标:将 A 匹配到 B,例如,当用户单击 "aaaaaaaa""11111111" 时,匹配正确并且两个框都消失了。但是,例如,如果用户单击 "aaaaaaaa""33333333",则会将其记录并计为错误,然后显示在页面上。

另外,如何添加从页面加载到所有匹配完成和事件结束的计时器?

<html>
<head>
<style>

#wordBx
{
width:168px;
height:168px;
border:1px grey solid;
text-align:center;
padding:1px;
float:left;
}

.word
{
width:165px;
height:40px;
border:1px grey solid;
}

#numBox
{
width:50%;
height:400px;
border:1px blue solid;
text-align:center;
margin:1px;
float:left;
overflow:hidden;
}

.numb
{
width:180px;
height:70px;
border:1px blue solid;
margin:2px;
float:left;
font-size:11pt;
}

</style>

</head>
<body>

<div class="wordBx">
<div class="word">aaaaaaaa</div >
<div class"word">bbbbbbbb</div >
<div class="word">cccccccc</div >
<div class="word">dddddddd</div >
</div>

<div id="numBox">
<div class="numb">11111111</div >
<div class="numb">22222222</div >
<div class="numb">33333333</div >
<div class="numb">44444444</div >
</div>


</body>
</html>

最佳答案

var words = document.querySelectorAll('.word');
var numbers = document.querySelectorAll('.number');
var selectedWordIndex;
var selectedNumberIndex;
var timerInstance;

// Validate game settings
if (words.length !== numbers.length) {
return console.error('Words list size should be same as numbers list');
}

// Register click event handlers on all words and numbers
for (var i = 0; i < words.length; i++) {
words[i].setAttribute('data-index', i);
words[i].addEventListener('click', function(event) {
selectedWordIndex = this.dataset.index;
checkMatching();
});
}

for (var i = 0; i < numbers.length; i++) {
numbers[i].setAttribute('data-index', i);
numbers[i].addEventListener('click', function(event) {
selectedNumberIndex = this.dataset.index;
checkMatching();
});
}

function checkMatching() {
// When user selection matches
if (selectedWordIndex === selectedNumberIndex) {
// Remove pair
var word = document.querySelector('.word[data-index="' + selectedWordIndex + '"]')
var number = document.querySelector('.number[data-index="' + selectedNumberIndex + '"]')
word.parentNode.removeChild(word);
number.parentNode.removeChild(number);

// Reset selection
selectedWordIndex = null;
selectedNumberIndex = null;

// Check if game is ended
if (document.querySelectorAll('.word').length === 0) {
// Remove blocks and stop the timer
var words = document.querySelector('.words');
var numbers = document.querySelector('.numbers');
words.parentNode.removeChild(words);
numbers.parentNode.removeChild(numbers);
clearInterval(timerInstance);
}
} else if (selectedWordIndex && selectedNumberIndex) {
// Register an error while selection does not match
var errorCounter = document.querySelector('.errors .counter');
errorCounter.innerHTML = parseInt(errorCounter.innerHTML, 10) + 1;
}
}

function startTimer() {
var display = document.querySelector('.time');
var timer = 0, minutes, seconds;
timerInstance = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);

minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;

display.innerHTML = minutes + ":" + seconds;

timer++;
}, 1000);
}

startTimer();

我已经用你需要的所有东西创建了 JSFiddle

JSFiddle (UPDATED)

关于javascript - 将 A 匹配到 B,正确匹配消失,定时器和错误计数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37593236/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com