El tiempo de respuesta de un evento es el tiempo que se tarda en cargar el resultado de ese evento y el tiempo que se tarda en iniciarlo. En esta publicación, se han utilizado varias formas usando la función Math.random() . La tarea es averiguar el tiempo de respuesta de cambiar estas formas.
Tan pronto como hace clic en la forma, desaparece y muestra el tiempo de respuesta en la parte superior de la página web y aparece una nueva forma mientras que la anterior desaparece.
Código JavaScript para cambiar las formas y encontrar su tiempo de respuesta
<html>
<head>
<style type="text/css">
#s1 {
height: 200px;
width: 200px;
border-radius: 50%;
display: none;
}
#s2 {
height: 200px;
width: 200px;
display: none;
}
#s3 {
height: 140px;
width: 200px;
display: none;
}
#button {
position: absolute;
left: 100px;
top: 100px;
height: 70px;
width: 300px;
font-size: 25px;
background-color: darkseagreen;
}
</style>
</head>
<body>
<button id="button" onclick="myfun()">START GAME</button>
<p id="time"></p>
<div id="s1"></div>
<div id="s2"></div>
<div id="s3"></div>
<script type="text/javascript">
function myfun() {
document.getElementById("button").style.display = "none";
var shape = Math.floor((Math.random() * 3) + 1);
var shape1 = "s" + shape;
<!---Calculating random color--->
<!---An array of 6 for HTML color code --->
var a = new Array(6);
var text = "";
<!--- HTML color code begin with "# "--->
text = text + "#";
for (i = 0; i < 6; i++) {
<!---To take values from 1 to 15 only--->
a[i] = (Math.floor(Math.random() * 15) + 1);
if (a[i] == 10) {
text = text + "A";
} else if (a[i] == 11) {
text = text + "B";
} else if (a[i] == 12) {
text = text + "C";
} else if (a[i] == 13) {
text = text + "D";
} else if (a[i] == 14) {
text = text + "E";
} else if (a[i] == 15) {
text = text + "F";
} else {
text = text + a[i];
}
}
document.getElementById(shape1).style.backgroundColor = text;
var a = document.getElementById(shape1);
<!---Calculate the random location where element has to be placed--->
random1 = Math.floor(Math.random() * 250) + 1;
random2 = Math.floor(Math.random() * 300) + 1;
a.style.position = "absolute";
a.style.left = random1;
a.style.top = random2;
document.getElementById(shape1).style.display = "block";
var start = Date.now();
document.getElementById(shape1).onclick = function() {
var end = Date.now();
document.getElementById(shape1).style.display = "none";
var diff = end - start;
var diff1 = diff / 1000;
document.getElementById("time").innerHTML = diff1;
myfun();
}
}
</script>
</body>
</html>
Salida:
Antes de hacer clic en el botón Iniciar juego- 
Después de hacer clic en el botón Iniciar juego-
Publicación traducida automáticamente
Artículo escrito por _shreya_garg_ y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA