Blondinka,
|
Сообщение от Blondinka
|
|
Это программа для тренировки счёта. При нажатии на кнопку, генерируются случайные числа. На пересечении каждых двух чисел, в ячейку, вводим результат. Правильный результат
|
выделяется золотым цветом прямо в ячейке по нажатию enter или переходу в другую ячейку
|
Сообщение от Blondinka
|
|
а неправильный - красным (весь текст красный, а неправильное решение перечёркнуто).
|
ввод суммы чисел
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.account{border:2px #8B4513 solid;font-size:150%;margin-left:150px;background-color:#008000 }
td{border:1px #8B4513 solid;padding:5px;width:40px;text-align:center}
input{font-size:18px;background:#32CD32;}
.red{text-decoration:line-through;color:#F00}
.gold {color:#FFD700;text-align:center;font-weight:bold;background:#0000CD}
.topic{padding:10px;background:#32CD32;color:#fffff0}
button{color:#FFD700;text-align:center;background:#008000;font-size:18px;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<script>
var mytable = $('<table/>', {
'class': 'account'
});
$.each(Array(5), function (i) {
var cell = $('<tr/>');
$.each(Array(8), function (k) {
var input = $("<input/>", {
"attr": {
"size": 3
},
"click": function (event) {
$(this).removeClass('gold red')
},
"blur": function (event) {
var trs = $('.account tr'),
one = +trs.eq(i).find('td:first').text(),
two = +trs.eq(0).find('td').eq(k).text(),
sum = +this.value,
cls = sum == one + two ? 'gold' : 'red';
$(this).addClass(cls)
},
"keyup": function (event) {
event.which == 13 && $(this).trigger("blur")
}
});
!k && !i && (input = $("<button/>", {
"text": "random",
"click": function (event) {
$('.account input').removeClass('gold red').val('');
$(".topic").each(function () {
$(this).text(Math.round(Math.random() * 100))
});
}
}))
cell.append(
$('<td/>', {
'html': i && !k || !i && k ? Math.round(Math.random() * 100) : input,
'class': i && !k || !i && k ? 'topic' : ''
})
);
});
mytable.append(cell);
});
$('body').append(mytable);
</script>
</body>
</html>