Question

我练习了一个问题，这是关于检查时间点击出现的形状。我想保存高分并与下一个进行比较。它只是如何存储高分。如果有人给出了这样做的方法，那将是很有帮助的。提前谢谢

<!doctype html>
<html>
<head>
    <title> Javasript </title>
    <style type="text/css">
        #shape {
            width: 200px;
            height: 200px;
            display:none;
            position : relative;
        }
    </style>
</head>
<body>
    <h1>Test your reaction </h1>
    <p>Click on the boxes as soon as possible and win it  </p>
    <p>Your time taken <span id="timeTaken"></span></p>
    <div id="shape"></div>

    <script type="text/javascript">
    var start = new Date().getTime();

    function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';

        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }

        return color;
    }

    function makeShapeAppear() {
        var top = Math.random() * 400 ; 
        var left = Math.random() * 400 ;                    
        var width = (Math.random() * 200) + 100  ;

        if (Math.random()> 0.5) {
            document.getElementById("shape").style.borderRadius = "50%";
        } else {
            document.getElementById("shape").style.borderRadius = "0%";                 }
            document.getElementById("shape").style.backgroundColor = getRandomColor();
            document.getElementById("shape").style.height = top + 'px';     
            document.getElementById("shape").style.width = width + 'px';                    
            document.getElementById("shape").style.top = top + 'px';                    
            document.getElementById("shape").style.left = left + 'px';
            document.getElementById("shape").style.height = top + 'px';                 
            document.getElementById("shape").style.display = 'block';
            start = new Date().getTime();
        }

        function appearAfterDelay() {           
            setTimeout(makeShapeAppear, Math.random() * 2000 );     
        }

        appearAfterDelay();     
        document.getElementById("shape").onclick = function() {
        document.getElementById("shape").style.display = 'none';

        var end = new Date().getTime();
        var timeTaken = (end - start)/1000;

        document.getElementById("timeTaken").innerHTML = timeTaken + "s";
        appearAfterDelay();
    }
    </script>
</body>
</html>

用javascript存储高分

0 个答案: