闲暇之余,玩玩小游戏,锻炼一下智力,预防老年痴呆 小时候玩过文曲星上猜数字游戏的应该很容易上手, 赶紧来试试吧
将0-9中的4个数字填入输入框中, 4个数字不会重复, 且数字与位置都正确才能过关, 你只有8次机会,加油哦!
注意:结果提示, A表示数字与位置都正确, B表示数字正确,位置有误 (熟练者不到1分钟可猜出, 可连续挑战计算平均时间)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>猜数字</title>
</head>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding-left: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
h2 {
margin: 0;
padding: 20px 0;
}
p {
margin: 0;
}
.red {
color: #f00;
}
#result {
display: flex;
flex-direction: column;
flex-wrap: wrap;
/* max-height: 550px; */
height: calc(100% - 157px);
align-content: flex-start;
flex: 1;
}
#result span {
cursor: pointer;
}
#result p {
margin: 3px 0;
}
#result > * {
width: 220px;
margin-right: 10px;
}
#result .del {
color: red;
text-decoration: line-through;
}
.toast {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
display: none;
z-index: 1000;
}
</style>
<body>
<h2>猜数字</h2>
<p>将0-9中的4个数字填入输入框中, 4个数字不会重复, 且数字与位置都正确才能过关, 你只有8次机会,加油哦!</p>
<p>注意:<i class="red">结果提示, A表示数字与位置都正确, B表示数字正确,位置有误</i> (熟练者不到1分钟可猜出, 可连续挑战计算平均时间)</p>
<div id="toast" class="toast">这是一个 toast 通知！</div>
<form name="numbercheck">
<input type="text" name="number1" id="num1" size="2" maxlength="1" onkeyup="toNext(this,event)" />
<input type="text" name="number2" id="num2" size="2" maxlength="1" onkeyup="toNext(this,event)" />
<input type="text" name="number3" id="num3" size="2" maxlength="1" onkeyup="toNext(this,event)" />
<input type="text" name="number4" id="num4" size="2" maxlength="1" onkeyup="toNext(this,event)" />
<button id="ttt" name="ok" type="button" onClick="check()">确定</button>
<button id="reset" name="ok" type="button" onClick="initNum()">重新开始</button>
<!-- <button name="stop" type="button" onClick="avg()">平均用时</button> -->
用时(秒):<span id="time"></span> 平均: <span id="avg"></span> 成功次数:<span id="success"></span>
</form>
<div id="result"></div>
</body>
<script>
var num = [],
total = 0,
f = document.numbercheck,
count = 0,
result = document.querySelector('#result'),
times = [],
time
window.onload = function () {
initNum()
time = new Date()
// console.log(num);
}
function initNum() {
num = []
/* while (num.length < 4) {
var tmp = Math.floor(10 * Math.random())
if (num.indexOf(tmp) != -1) {
continue
} else {
num.push(tmp)
}
} */
const numbers = Array.from({ length: 10 }, (_, i) => i)
const shuffled = numbers.sort(() => Math.random() - 0.5)
num = numbers.slice(0, 4) // numbers==shuffled
// console.log(num);
num1.value = ''
num2.value = ''
num3.value = ''
num4.value = ''
result.insertAdjacentHTML('beforeend', '<hr>')
}
document.getElementById('result').addEventListener('click', function (e) {
if (e.target.nodeName === 'SPAN') {
e.target.classList.toggle('del')
}
})
window.addEventListener('keydown', function (e) {
if (e.keyCode === 13 && e.target !== ttt) {
console.log('🚀 ~ e:', e.key, e.keyCode, e.target)
check()
}
if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
if (num1.value === '') {
num1.focus()
}
}
})
function check() {
var As = 0,
Bs = 0,
i = 0
if (num1.value == '' || num2.value == '' || num3.value == '' || num4.value == '') {
showToast('请输入完整')
return false
}
for (; i < 4; i++) {
if (f['num' + (i + 1)].value == num[i]) {
As++
}
if (num.indexOf(+f['num' + (i + 1)].value) != -1) {
Bs++
}
}
++total
let showResult = `<p>第${total}组: <span>${num1.value}</span>, <span>${num2.value}</span>, <span>${num3.value}</span>,
<span>${num4.value}</span>; ${As}A, ${Bs - As}B`
if (As == 4) {
result.insertAdjacentHTML('beforeend', showResult + `<b style="color:green"> 成功</b>`)
// setTimeout(() => alert('恭喜你答对了,你真聪明!'), 150)
showToast('恭喜你答对了,你真聪明!')
count++
// document.querySelector('#time').innerHTML = new Date().toLocaleString('zh', { hour12: false }).replace(/\/\d+/g, a => (a.length < 3 ? `-0${a.substring(1)}` : `-${a.substring(1)}`)) - time;
let timeRange = ((new Date().getTime() - time.getTime()) / 1000).toFixed(1) + 's'
times.push(timeRange)
document.querySelector('#time').innerHTML = times.join(', ')
avg()
document.querySelector('#success').innerHTML = count
initNum()
total = 0
} else {
if (total === 1) {
time = new Date()
}
if (total === 8) {
// alert('挑战失败,可直接继续!')
showToast('挑战失败,可直接继续!')
// location.reload()
result.insertAdjacentHTML('beforeend', showResult + `<b style="color:red"> 失败</b>`)
initNum()
total = 0
return
}
result.insertAdjacentHTML('beforeend', showResult)
num1.value = ''
num2.value = ''
num3.value = ''
num4.value = ''
num1.focus()
}
}
function toNext(t, e) {
//console.log(e.keyCode)
if (e.key == 'ArrowLeft') {
t.previousElementSibling && t.previousElementSibling.focus()
} else if (e.key == 'ArrowRight') {
t.nextElementSibling && t.nextElementSibling.focus()
} else if (e.key >= 0 && e.key <= 9) {
t.value = e.key
t.nextElementSibling.focus()
} else {
t.value = ''
}
}
function showToast(str) {
document.getElementById('toast').innerHTML = str
document.getElementById('toast').style.display = 'block'
setTimeout(() => {
document.getElementById('toast').style.display = 'none'
}, 2000)
}
let avg = () => {
let avg = times.reduce((a, b) => parseFloat(a) + parseFloat(b), 0) / times.length
document.querySelector('#avg').innerHTML = avg.toFixed(1) + 's'
}
</script>
</html>
不服来战
挑战我的成绩
- 在线试玩
