JSFiddle - React, Tailwind, and code Playground
HTML
<h3>Число от 0 до 24 сгенерировано и хранится в памяти</h3>
<div class="num">...</div>
<button id="b1">Показать это число</button>
<div id="win">...</div>
<div id="btns" />
<div id="rate" />
CSS
.bt {
display:inline-block;
min-width: 50px;
width: 50px;
margin: 3px;
}
body {
font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
background: #f6f6f6;
overflow: hidden;
padding: 0;
margin: 0;
position: relative;
font-size: 14px;
}
JavaScript
size = 5;
succ = 0;
fail = 0;
function makeNext() {
var prev = next;
next = Math.floor(Math.random() * (size*size));
return prev;
}
next = 0;
makeNext();
$(".num").hide();
function showNum() {
$(".num").html(makeNext().toString());
$(".num").slideDown(300).delay(800).slideUp(300);
}
$("#b1").click(showNum);
for (var i = 0; i < size*size; i++) {
if (i % size == 0) $("#btns").append('<br/>');
$("#btns").append('<button class="bt" id="bt' + i + '">' + i + '</button>');
$("#bt" + i).click(function () {
if ($(this).html() == next) {
$("#win").html('Win!');
showNum();
succ++;
}
else {
$("#win").html('No.');
fail++;
}
var rate = succ / (succ + fail + 0.001);
rate *= 100;
rate = Math.floor(rate);
$("#rate").html('Частота угадывания:'+rate+'%');
});
}