Показать сообщение отдельно
  #2 (permalink)  
Старый 22.03.2014, 00:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>

Последний раз редактировалось рони, 22.03.2014 в 00:10.
Ответить с цитированием