Optimiser ce code css/js/html de loto
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
Je souhaite optimiser ce code css/js/html de loto et je ne sais pas exactement comment m'y prendre donc je recherche une âme charitable ou un expert pour me guider et me proposer le code modifié selon mes attentes ... Je souhaite voir quelques optimisation telles que :
Objectif numéro 1
En cas de gain 6 numéros affichez un message de félicitations visuellement sympa et permettre de cliquer sur un bouton qui envoie via mail (adresse prédéfinie) la preuve du gain.
Objectif numéro 2
Après que la grille s'affiche complètement y insérer un message texte pour faciliter l'action tel que choisissez vos 6 numéros par exemple et à la fin du tirage après le résultat un bouton pour inviter à rejouer
Objectif numéro 3
Le rendre visuellement plus sexy ou funny à vous de voir et de laisser votre imagination courir ....
Merci pour votre aide
Voici le code :
<!doctype html>
<html>
<head>
<style>
#cont{
display:flex;
}
#grille{
width:50%;
}
#ctirage{
display:inline-block;
}
#tirage{
height:220px;
width:50%;
text-align:right;
}
#bon{
font:72pt monospace;
margin:30px auto;
text-align:center;
visibility:hidden;
background-color:#48C;
color:#FFF;
width:120px;
height:120px;
border-radius:100px;
line-height:120px;
}
.bouton{
width:26px;
height:26px;
text-align:center;
font:11pt monospace;
border:solid 1px #48C;
display:inline-flex;
align-items:center;
justify-content:center;
margin:3px;
cursor:pointer;
transition:all 0.3s ease;
}
.bouton:hover{
background-color:#48C;
color:#FFF;
transform:scale(1.4);
}
.zbouton{
width:26px;
height:26px;
text-align:center;
font:11pt monospace;
border:solid 1px #48C;
background-color:#F8F8F8;
display:inline-flex;
align-items:center;
justify-content:center;
margin:3px;
color:#48C;
}
.nbouton{
width:26px;
height:26px;
text-align:center;
font:11pt monospace;
border:solid 1px #48C;
display:inline-flex;
align-items:center;
justify-content:center;
margin:3px;
color:#000;
}
button{
border:none;
cursor:pointer;
display:block;
width:300px;
background-color:#48C;
padding:10px;
font-size:13pt;
color:#FFF;
text-decoration:none;
font-family:arial,sans-serif;
margin:10px auto;
margin-bottom:10px;
}
button:hover{
opacity:0.8;
}
</style>
<script>
function init(btn){
btn.style.display="none";
i=1;
nbr=0;
choix=new Array();
creerGrille();
}
function creerGrille(){
t=setTimeout("creerGrille()",50);
bouton=document.createElement("div");
bouton.className="bouton";
bouton.innerHTML=i;
bouton.setAttribute("id",i);
bouton.onclick=function(){
ajouter(this);
}
document.getElementById("grille").appendChild(bouton);
if(i%7==0){
br=document.createElement("br");
document.getElementById("grille").appendChild(br);
}
i+=1;
if(i>49)
clearTimeout(t);
}
function ajouter(ob){
if(nbr<6){
ob.style.visibility="hidden";
nbouton=document.createElement("div");
nbouton.className="nbouton";
nbouton.setAttribute("id","ch"+nbr);
nbouton.innerHTML=ob.textContent;
document.getElementById("choix").appendChild(nbouton);
choix[nbr]=ob.firstChild.nodeValue;
nbr+=1;
if(nbr==6)
ztirage();
}
}
j=0;
function ztirage(){
setTimeout("ztirage()",100);
if(j<6){
zbouton=document.createElement("div");
zbouton.className="zbouton";
zbouton.innerHTML=0;
zbouton.setAttribute("id","res"+j);
document.getElementById("res").appendChild(zbouton);
j+=1;
if(j==6){
document.getElementById("bon").style.visibility="visible";
tirage();
}
}
}
index=0;
rep=0;
tab=new Array();
itr=50;
function tirage(){
tx=setTimeout("tirage()",40);
rep+=1;
if(rep<itr){
for(k=index+1;k<6;k++)
document.getElementById("res"+k).innerHTML=Math.ceil(Math.random()*49);
v=Math.ceil(Math.random()*49);
document.getElementById("res"+index).innerHTML=v;
if(rep==itr-1){
if(tab.indexOf(v)==-1){
tab[index]=v;
for(k=0;k<6;k++){
if(document.getElementById("ch"+k).firstChild.data==tab[index]){
document.getElementById("ch"+k).style.backgroundColor="#48C";
document.getElementById("res"+index).style.backgroundColor="#48C";
document.getElementById("ch"+k).style.color="#FFF";
document.getElementById("res"+index).style.color="#FFF";
document.getElementById("bon").innerHTML=parseInt(document.getElementById("bon").textContent)+1;
}
}
}
else
rep=itr-2;
}
}
else{
rep=0;
index+=1;
if(index==6){
clearTimeout(tx);
return false;
}
}
}
</script>
</head>
<body>
<button onClick="init(this)">Commencer une partie</button>
<div id="cont">
<div id="grille"></div>
<div id="tirage">
<div id="ctirage">
<div id="choix"></div>
<div id="res"></div>
<div id="bon">0</div>
</div>
</div>
</div>
</body>
</html>
Windows / Edge 121.0.0.0
- Optimiser ce code css/js/html de loto
- Code ascii - Guide
- Optimiser son pc - Accueil - Utilitaires
- Code de déverrouillage oublié - Guide
- Code puk bloqué - Guide
- Code activation windows 10 - Guide
1 réponse
Bonjour,
Tu nous dis ce que tu veux ....... mais pas sur quoi tu bloques exactement ...
A noter que :
Point 1 : Les emails sont gérés côté "serveur". il te faudra donc du PHP ou faire appel à des API en JS à des services tel que mailjet ou sendinblue
Point 3 : Tu referas une question dans le forum Webmaster/css pour traiter cette demande.