JavaScript. Подробное руководство, 6-е издание
Шрифт:
// Он обновляет состояние игры, сохраняет и отображает его.
function handle6uess {
// Извлечь число из поля ввода
var g = parseInt(this.value);
// Если это число и оно попадает в требуемый диапазон
if ((g > state.low) && (g < state.high)) {
//
Обновить объект состояния для этой попытки
if (g < state.n)
state.low = g;
else
if (g > state.n) state.high = g;
state.guess = g;
state.guessnum++;
// Сохранить новое состояние в истории посещений
save(state);
// Изменить документ в ответ на попытку пользователя
display(state);
}
else { // Ошибочная попытка: не сохранять новое состояние
alert("Please enter a number greater than " + state.low +
" and less than " + state.high);
}
}
// Изменяет документ, отображая текущее состояние игры,
function display(state) {
// Отобразить заголовок документа
ui.heading.innerHTML = document.title =
"I'm thinking of a number between " + state.low +
" and " + state.high + "."
// Отобразить диапазон чисел с помощью таблицы
ui.low.style.width = state.low + "%";
ui.mid.style.width = (state.high-state.low) + "%";
ui.high.style.width = (100-state.high) + "%";
// Сделать поле ввода видимым, очистить его и установить фокус ввода
ui.input.style.visibility = "visible";
ui.input.value = "";
ui.input.focus;
// Вывести приглашение к вводу,
опираясь на последнюю попытку
if (state.guess === undefined)
ui.prompt.innerHTML = "Type your guess and hit Enter:";
else if (state.guess < state.n)
ui.prompt.innerHTML = state.guess + " is too low. Guess again:";
else if (state.guess > state.n)
ui.prompt.innerHTML = state.guess + " is too high. Guess again:";
else {
// Если число угадано, скрыть поле ввода и отобразить кнопку
// Play Again (Играть еще раз).
ui.input.style.visibility = "hidden"; // Попыток больше не будет
ui.heading.innerHTML = document.title = state.guess + " is correct!";
ui.prompt.innerHTML =
"You Win! <button onclick='newgame(true)'>Play Again</button>“;
}
}
</script>
<style> /* CSS-стили, чтобы придать игре привлекательный внешний вид */
#prompt { font-size: 16pt; }
table { width: 90%; margin:10px; margin-left:5%; }
#low, «high { background-color: lightgray; height: 1em; }
#mid { background-color: green; }
</style>
</head>
<body><!-- Следующие элементы образуют пользовательский интерфейс игры -->
<!-- Заголовок игры и текстовое представление диапазона чисел -->
<h1 id="heading">I'm thinking of a number...</h1>
<!-- визуальное представление чисел, которые еще не были исключены -->
<table><tr><td id="low"x/td><td id="mid"x/td><td id="high”x/tdx/trx/table>
<!-- Поле ввода чисел -->
<label id="prompt"x/label><input id=”input" type="text">
</body></html>
22.3. Взаимодействие документов с разным происхождением
Поделиться с друзьями: