HTML/CSS/JS, 요구 사항
17492 단어 csshtmlbeginnersjavascript
Je suis nouveau ici (et français) et débutant dans le dév, avec quelques notions, donc je ne suis pas sûr de demander de l'aide au bon endroit...
J'ai conçu ce code, mais depuis que j'ai rajouté l'une ou l'autre fonctionnalité, il ne fonctionne plus....
Quelqu'un peut-il m'aider, sachant que je vais suivre une formation Développeur Web dans 2 mois, svp ?
Merci d'avance pour vos tuyaux :)
보이시몬 코드:
<!DOCTYPE html>
<html>
<head>
<title>Questions pour un Champion</title>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.min.css"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
/>
</head>
<body style="position:center;">
<div class="container-fluid">
<div class="row">
<div class="col">
<div
class="alert alert-danger"
role="alert"
style="text-align: center; font-weight: bold">
<button
class="btn btn-warning"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse2"
aria-expanded="false"
aria-controls="collapseExample"
style="background-color:grey; font-size:10px;"
>
<i class="fas fa-newspaper"></i></i> MAJ V.3 <br> (13 août 2022)</button
><br />
<div class="collapse" id="collapse2" style="margin-top: 10px">
<div class="alert alert-warning" style="text-align: justify; font: size 10px; background-color:coral;">
- Modification complète du principe de jeu de cette manche <br>
</div>
</div>
<h1>MASTER DUEL</h1>
<button class="btn btn-warning" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<i class="fas fa-hand-sparkles"></i> Règles
</button><br/>
<div class="collapse" id="collapseExample" style="margin-top: 10px">
<div class="alert alert-warning" style="text-align: justify">
- L'objectif de cette manche est de marquer un maximum de point avec un minimun d'indices. <br>
- A tour de rôle, chaque équipe devra deviner le nom d'un personnage biblique grâce aux indices donnés, en 80 secondes maximum. <br>
- Les indices peuvent être choisi dans l'ordre que l'équipe le souhaite. <br>
- L'équipe n'est pas obligé d'utiliser tous les indices. <br>
- Dès qu'elle pense avoir trouvée la réponse, l'équipe valide, l'animateur vérifie et accorde ou non les points affichés.
- Plus le personnage est trouvé tôt, plus le score sera élevé. <br>
- La première équipe à atteindre 21 points gagne la manche et le jeu. <br>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="col"><button id="indice1" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°1</button>
<span id="affI1" style="font-size:40px; text-align:center; color:darkgreen;"></span></div>
<div class="col"><button id="indice2" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°2</button>
<span id="affI2" style="font-size:40px; text-align:center; color:darkgreen;"></span></div>
<div class="col"><button id="indice3" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°3</button>
<span id="affI3" style="font-size:40px; text-align:center; color:darkgreen;"></span></div>
<div class="col"><button id="indice4" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°4</button>
<span id="affI4" style="font-size:40px; text-align:center; color:darkgreen;"></span></div>
<div class="col"><button id="indice5" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°5</button>
<span id="affI5" style="font-size:40px; text-align:center; color:darkgreen;"></span></div>
<div><button id="enigme" class="btn btn-info" style="background-color:chocolate; font-size: 20px" type="button"><i class="fa fa-search"></i> Enigme</button></div>
<tr><span id="affEnigme" style="font-size:40px; text-align:center; color:darkgreen;"></span></tr>
<br>
</div>
<div class="col">
<td><button id="chronometre" class="btn btn-warning" type="button" style="background-color:burlywood; font-size: 20px"><i class="fas fa-stopwatch"></i> Chrono</button></td>
<div
class="alert alert-danger"
role="alert"
style="text-align: center; font-size: 19px;"
>
<b>Temps restant :</b>
</div>
<div
class="alert alert-secondary"
role="alert"
style="text-align: center; font-size: 2em; font-weight: bold"
>
<span id="countdown_sec">80 secondes</span>
</div>
<div class="alert alert-danger" role="alert" style="text-align:center;">
<b>Score actuel :</b>
</div>
<div class="jumbotron" style="text-align:center;font-size:2em;font-weight:bold">
<span id="scoreencours">0</span>
</div>
</div>
</div>
</div>
<div class="col">
<table class="table table-striped table-bordered">
<thead>
<tr class="table-success">
<th> ÉQUIPES QUALIFIÉES + JOUEURS</th>
<th> SCORE</th>
<th> COMPTEUR
</th>
<th> ÉQUIPE GUIDE</th>
</tr>
</thead>
<tbody>
<tr>
<td>1ère Équipe Qualifiée
<input></td>
<td><span id="compteur1" style="font-size: 20px"><b>0</b></span></td>
<td>
<button class="btn btn-success compteur" value="1|1" style="background-color:blue; font-size: 20px"><i class="fas fa-plus"></i> 1</button>
<button class="btn btn-success compteur" value="1|2" style="background-color:green; font-size: 20px" type="button"><i class="fas fa-plus"></i> 2</button>
<button class="btn btn-success compteur" value="1|4" style="background-color:yellowgreen; font-size: 20px;" type="button"><i class="fas fa-plus"></i> 4</button>
<button class="btn btn-danger compteur" value="1|6" style="background-color:gold; font-size: 20px" type="button"><i class="fas fa-plus"></i> 6</button>
</td>
<td><input></td>
</tr>
</td>
</tr>
<tr>
<td>2ème Équipe Qualifiée
<input></td>
<td><span id="compteur2" style="font-size: 20px"><b>0</b></span></td>
<td>
<button class="btn btn-success compteur" value="2|1" style="background-color:blue; font-size: 20px;"type="button"><i class="fas fa-plus"></i> 1</button>
<button class="btn btn-success compteur" value="2|2" style="background-color:green; font-size: 20px" type="button"><i class="fas fa-plus"></i> 2</button>
<button class="btn btn-success compteur" value="2|4" style="background-color:yellowgreen; font-size: 20px" type="button"><i class="fas fa-plus"></i> 4</button>
<button class="btn btn-danger compteur" value="2|6" style="background-color:gold; font-size: 20px" type="button"><i class="fas fa-plus"></i> 6</button>
</td>
<td><input></td>
</tr>
<!-- <tr>
<td>3ème Équipe Qualifiée
<input></td>
<td><span id="compteur3"><b>0</b></span></td>
<td>
<button class="btn btn-success compteur" value="3|1" style="background-color:blue;"type="button"><i class="fas fa-plus"></i> 1</button>
<button class="btn btn-success compteur" value="3|2" style="background-color:green;" type="button"><i class="fas fa-plus"></i> 2</button>
<button class="btn btn-success compteur" value="3|4" style="background-color:yellowgreen;" type="button"><i class="fas fa-plus"></i> 4</button>
<button class="btn btn-danger compteur" value="3|6" style="background-color:orange;" type="button"><i class="fas fa-plus"></i> 6</button>
</td>
<td><input></td>
</tr> -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- <script src="liste2.js"></script> -->
<script>
$(document).ready(function () {
var timer;
var random;
var personnages = [];
function aleatPerso () {
var pmin = 0;
var pmax = 64;
random = Math.floor(Math.random() * (pmax - pmin)) + pmin;
// ajouter le fait de ne pas repiocher le même perso
if (personnages.length === max) {
alert("Tous les personnages ont été trouvés !");
} else if ($.inArray(parseInt(random), personnages) === -1) {
$("#enigme").text(personnage[random][1]);
personnages.push(random); // rempli le tableau des questions déjà posées
console.log(personnages);
} else {
// rappelle la fonction pour trouver un nouveau nombre aléatoire non utilisé
aleatPerso();
}
$('#indice1').on('click', function() {
$('#affI1').text(personnage[aleatoireperso][2]);
});
$('#indice2').on('click', function() {
$('#affI2').text(personnage[aleatoireperso][3]);
});
$('#indice3').on('click', function() {
$('#affI3').text(personnage[aleatoireperso][4]);
});
$('#indice4').on('click', function() {
$('#affI4').text(personnage[aleatoireperso][5]);
});
$('#indice5').on('click', function() {
$('#affI5').text(personnage[aleatoireperso][6]);
});
$('#enigme').on('click', function() {
$('#affEnigme').text(personnage[aleatoireperso][1]);
});
$('#chronometre').on('click', function() {
$secondes = 80; // définit le nombre de secondes
$('#countdown_sec').text($secondes); //affiche 120 dans le chrono
timerManager.start($secondes);
});
timerManager = {
start: function ($secondes) {
if ($secondes >= 0) { // tant que le chrono est supérieur à zéro
if ($secondes >= 61) {
$('#scoreencours').text('+6');
} else if ($secondes >= 41) {
$('#scoreencours').text('+4');
} else if ( $secondes >= 21) {
$('#scoreencours').text('+2');
} else if ( $secondes >= 1) {
$('#scoreencours').text('+1');
} else {
$('#scoreencours').text('+0');
}
$secondes = $secondes - 1; // provoque le décompte
timer = setTimeout(function () { // éxécute le code toutes les 1000 millisecondes
$('#countdown_sec').text($secondes); // affiche le temps restant
timerManager.start($secondes); // rappelle la fonction
}, 1000);
} else {
timerManager.stop(); // arrête le chrono
}
},
stop: function () { // to be called when you want to stop the timer
clearTimeout(timer);
$('#countdown_sec').text('0');
}
};
$('.compteur').on('click', function (e) {
e.preventDefault();
$val = $(this).attr('value').split('|');
$champ = '#compteur' + $val[0];
$new_score = parseInt($($champ).text()) + parseInt($val[1]);
if ($new_score <= 20) {
$('#compteur' + $val[0]).text($new_score);
} else {
$('#compteur' + $val[0]).text('VICTOIRE !!!');
}
});
var personnage = [
[0, 'Cauet','Radio','Chauve','Garfield','Méthode','Voix'],
[1, 'Louane','Bélier','Louis','Télé','Blonde','Esmée'],
[2, 'Sid','Paresseux','Cheveux','Glace','Sabre','5'],
];
};
});
</script>
</body>
</html>
Reference
이 문제에 관하여(HTML/CSS/JS, 요구 사항), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/chrstn67/htmlcssjs-demande-daide-d6l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
