JavaScript | Tiempo de respuesta de un evento

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *