Un petit code en javascript (et html pour le support) que je me suis amusé à faire pour le groupe de baseball dont je suis webmaster (www.aguilasbaseballclub.ch, si ça vous dit d'aller y faire un tour).
Ce striker (compteur de points pour les matchs de baseball) permet, à l'aide des touches du clavier (mode d'emploi dans le code), de compter les points, de suivre le changement de mène et d'effectuer des corrections par insertion directe dans les champs.
Source / Exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<body style="background-color:#000; font-size:60px; color:#fff">
<script language="javascript">
/**********************************************************************************
Après avoir inséré les noms d'équipes, cliquer sur VS pour valider.
Touches d'emploi
Nouveau : n 110 ¦ Out : 0 111
Strike : s 115 ¦ Point : p 112
Ball : b 98 ¦ Stop : 0 48
document.onkeypress = Scoring;
// Variables déclarées globales
score = 0;
var strik;
var ball;
var out;
var manche;
var mean;
var score1;
var score2;
heure1 = 0;
actif = 1; // Permet de modifier le nom des équipes sans faire partir le programme
function Scoring(e) {
if (actif == 1) {
touche = e.charCode;
strik = parseInt(document.getElementById("strike").value);
ball = parseInt(document.getElementById("ball").value);
out = parseInt(document.getElementById("out").value);
manche = parseInt(document.getElementById("manche").value);
mean = parseInt(document.getElementById("mean").value);
score1 = parseInt(document.getElementById("score1").value);
score2 = parseInt(document.getElementById("score2").value);
// Nouveau jeu
if (touche == 110) {
document.getElementById("strike").value = 0;
document.getElementById("ball").value = 0;
document.getElementById("out").value = 0;
document.getElementById("manche").value = 0;
document.getElementById("mean").value = 1;
document.getElementById("score1").value = 0;
document.getElementById("score2").value = 0;
heure1 = Date.now();
Chrono();
}
// Couleur
Cadre();
// Nouveau strike
if (touche == 115) {
if (strik < 2) {
document.getElementById("strike").value = strik + 1;
} else {
document.getElementById("out").value = out + 1;
// 3 out
document.getElementById("strike").value = 0;//
document.getElementById("ball").value = 0;//
cptOut();
}
}
// Nouveau ball
if (touche == 98) {
if (ball < 3) {
document.getElementById("ball").value = ball + 1;
} else {
document.getElementById("strike").value = 0;
document.getElementById("ball").value = 0;
}
}
// Point marqué
if (touche == 112) {
if (score == 0) {document.getElementById("score1").value = score1 + 1;}
else {document.getElementById("score2").value = score2 + 1;}
}
// Stop
if (touche == 48) {
heure1 = 0;
}
// Out
if (touche == 111) {
document.getElementById("out").value = out + 1;
cptOut();
}
}
}
// Style des équipes
function Cadre () {
manche = parseInt(document.getElementById("manche").value);
if (manche == 0) {
document.getElementById("team1").style.border = "2px solid #f00";
document.getElementById("team2").style.border = "none";
}
else {
document.getElementById("team2").style.border = "2px solid #f00";
document.getElementById("team1").style.border = "none";
}
}
// chronomètrage de la partie
function Chrono() {
if (heure1 != "") {
heure2 = Date.now();
delta = (heure2 - heure1);
heure = parseInt(delta / 3600000);
minutes = parseInt((delta - 3600000 * heure) / 60000);
secondes = parseInt((delta - 3600000 * heure - 60000 * minutes) / 1000);
document.getElementById("temps").innerHTML = heure + ":" + minutes + ":" + secondes;
}
}
self.setInterval("Chrono()",1000);
// Compte le nombre d'Out, gère le transfert d'équipe et de mène
function cptOut() {
if (out < 2) {
strik = 0;
} else {
document.getElementById("strike").value = 0;
document.getElementById("ball").value = 0;
document.getElementById("out").value = 0;
if (manche == 0) {// changement d'équipe
document.getElementById("manche").value = 1;
Cadre();
if (score == 0) {score = 1;}
else {score = 0;}
} else {// changement de mean
document.getElementById("manche").value = 0;
document.getElementById("mean").value = mean + 1;
Cadre();
if (score == 0) {score = 1;}
else {score = 0;}
}
}
}
</script>
<table width="100%" border="0" style="text-align:center" cellpadding="0" cellspacing="0">
<tr> </tr>
<tr>
<td>
<input id="team1" onfocus="actif = 0;" type="text" style="border:1px dashed #f00; background:none; text-align:center; font-size:72px; color:#fff; font-family:inherit" size="6" />
</td>
<td>
<input type="button" onclick="actif = 1;" size="1" style="font-size:60px; color:#FFF; font-family:Georgia, 'Times New Roman', Times, serif; border: none; background:none" value="vs" />
</td>
<td>
<input id="team2" onblur="actif = 0;" type="text" style="border:1px dashed #f00; background:none; text-align:center; font-size:72px; color:#fff; font-family:inherit" size="6" />
</td>
</tr>
<tr>
<td> </td>
<td style="font-size:36px" valign="bottom">
<input id="manche" type="text" style="border:none; background:none; text-align:center; font-size:20px; color:#000; font-family:inherit" size="1" value="0" onchange="Cadre();" /><br />
Manche
</td>
<td> </td>
</tr>
<tr>
<td>
<input id="score1" type="text" style="border:none; background:none; text-align:center; font-size:72px; color:#fff; font-family:inherit" size="6" value="0" />
</td>
<td>
<input id="mean" type="text" style="border:none; background:none; text-align:center; font-size:36px; color:#fff; font-family:inherit" size="6" value="1" />
</td>
<td>
<input id="score2" type="text" style="border:none; background:none; text-align:center; font-size:72px; color:#fff; font-family:inherit" size="6" value="0" />
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Strike</td>
<td>Ball</td>
<td>Out</td>
</tr>
<tr>
<td>
<input id="strike" type="text" style="border:none; background:none; text-align:center; font-size:60px; color:#fff; font-family:inherit" size="1" value="0" />
</td>
<td>
<input id="ball" type="text" style="border:none; background:none; text-align:center; font-size:60px; color:#fff; font-family:inherit" size="1" value="0" />
</td>
<td>
<input id="out" type="text" style="border:none; background:none; text-align:center; font-size:60px; color:#fff; font-family:inherit" size="6" value="0" />
</td>
</tr>
<tr>
<td> </td>
<td id="temps">0:0:0</td>
<td> </td>
</tr>
</table>
</body>
</html>
Conclusion :
Utilisation simple prévu pour affichage sur un grand écran afin que tous, joueurs, arbitres et supporters, puissent suivre en direct l'évolution du score et du match en général.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.