JavaScript |事件响应时间

事件的响应时间是加载该事件的结果所花费的时间和启动该事件所花费的时间。在这篇文章中，使用 Math.random()函数使用了各种形状。任务是找出改变这些形状的响应时间。
一旦您单击该形状，它就会消失并在网页顶部显示响应时间，并且会出现一个新形状，而前一个形状会消失。
用于更改形状并找到其响应时间的 JavaScript 代码

  

    
        #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;
        }
    

  

    START GAME
    
    
    
    
    
        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();
            }
  
        }
    

  

输出：
在点击开始游戏按钮之前——

点击开始游戏按钮后——