Gioco di indovinello: indovina il numero!
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gioco di indovinello: indovina il numero!</title>
<style>
body {
background-image: url('flowers.jpg');
background-repeat: no-repeat;
background-size: cover;
}
<pre><code> form {
margin: 0 auto;
width: 300px;
}
table {
width: 100px;
}
input[type="text"] {
border-radius: 10px;
background-color: yellow;
text-align: center;
}
input[type="button"] {
border-radius: 20px;
background-color: blue;
color: white;
}
input[type="button"]:hover {
background-color: darkblue;
}
input[type="text"][readonly] {
background-color: #D0D0D0;
}
</style>
</code></pre>
</head>
<body onload="genera()">
<pre><code><form enctype="text/plain">
<table>
<tr>
<td> <input type="text" id="tentativo0" size="8" onblur="valido(0)"> </td>
<td style="text-align:center"><input type="button" onclick="controlla(0)" value="Controlla"></td>
</tr>
<tr>
<td> <input type="text" id="tentativo1" size="8" onblur="valido(1)"> </td>
<td style="text-align:center"> <input type="button" onclick="controlla(1)" value="Controlla"></td>
</tr>
<tr>
<td> <input type="text" id="tentativo2" size="8" onblur="valido(2)"> </td>
<td style="text-align:center"><input type="button" onclick="controlla(2)" value="Controlla"></td>
</tr>
<tr>
<td style="font-weight:bolder">Tentativi:</td>
<td> <input type="text" id="conteggio0" size="8" readonly value="0"></td>
</tr>
<tr>
<td style="font-weight:bolder">Tentativi:</td>
<td> <input type="text" id="conteggio1" size="8" readonly value="0"></td>
</tr>
<tr>
<td style="font-weight:bolder">Tentativi:</td>
<td> <input type="text" id="conteggio2" size="8" readonly value="0"></td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="button" onclick="genera()" value="Nuovo Gioco">
</td>
</tr>
</table>
</form>
<script>
function controlla(id) {
let da_indovinare = 0;
var tentativo = parseInt(document.getElementById("tentativo" + id).value);
var conto = parseInt(document.getElementById("conteggio" + id).value);
conto = conto + 1;
document.getElementById("conteggio" + id).value = conto;
if (id == 0) {
da_indovinare = da_indovinare0;
} else if (id == 1) {
da_indovinare = da_indovinare1;
} else {
da_indovinare = da_indovinare2;
}
if (tentativo == da_indovinare) {
alert("Indovinato!");
genera();
} else if (tentativo > da_indovinare) {
alert("Troppo alto");
} else {
alert("Troppo basso");
}
}
// Genera un numero casuale
function genera() {
da_indovinare0 = Math.floor(Math.random() * 100);
da_indovinare1 = Math.floor(Math.random() * 100);
da_indovinare2 = Math.floor(Math.random() * 100);
document.getElementById("conteggio0").value = 0;
document.getElementById("conteggio1").value = 0;
document.getElementById("conteggio2").value = 0;
//document.getElementById("tentativo").focus();
}
// Verifica se ￨ stato inserito un numero valido
function valido(id) {
var num = document.getElementById("tentativo" + id).value;
if (!isNumber(num)) {
alert("Non ￨ stato inserito un valore numerico")
//document.getElementById("tentativo").focus();
}
}
// Funzione di servizio per controllare se un dato valore ￨ numerico o no
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/pkFc 著作权归作者所有。请勿转载和采集!