Fatal编程技术网
  • javascript/
  • Javascript 收集并合计运行时间间隔

Javascript 收集并合计运行时间间隔

javascript loops

Javascript 收集并合计运行时间间隔,javascript,loops,Javascript,Loops,我对编码非常陌生，一直在学习Javascript，想知道是否有人能帮我 因此，下面的脚本制作了一个小游戏，将显示点击之间的时间间隔 我想学习如何：将每个间隔（回合）所需的时间加总到完成回合所需的总时间 及 将游戏限制在20个间隔（回合） 如果有人有时间教育我，我将不胜感激，有人告诉我，没有阵列也可以做到，这是真的吗 谢谢 本 反应计时器 身体{ 字体系列：无衬线； } #形状{ 宽度：200px； 高度：200px； 背景色：红色； 显示：无； 位置：相对位置； } .bold{ 字体大小：

我对编码非常陌生，一直在学习Javascript，想知道是否有人能帮我

因此，下面的脚本制作了一个小游戏，将显示点击之间的时间间隔

我想学习如何：将每个间隔（回合）所需的时间加总到完成回合所需的总时间

及

将游戏限制在20个间隔（回合）

如果有人有时间教育我，我将不胜感激，有人告诉我，没有阵列也可以做到，这是真的吗

谢谢

本




反应计时器
身体{
字体系列：无衬线；
}
#形状{
宽度：200px；
高度：200px；
背景色：红色；
显示：无；
位置：相对位置；
}
.bold{
字体大小：粗体；
} 
测试你的反应！
尽可能快地点击方框和圆圈


您的时间：


您的总时间：0.5）{
document.getElementById（“shape”）.style.borderRadius=“50%”；
}否则{
document.getElementById（“形状”）.style.borderRadius=“0”；
}
document.getElementById（“shape”）.style.backgroundColor=getRandomColor（）；
document.getElementById（“shape”）.style.width=width+“px”；
document.getElementById（“shape”）.style.height=width+px；
document.getElementById（“shape”）.style.top=top+px；
document.getElementById（“shape”）.style.left=left+px；
document.getElementById（“shape”）.style.display=“block”；
开始=新日期（）.getTime（）；
}
函数appearAfterDelay（）{
setTimeout（makeShapeApper，Math.random（）*2000）；
}
appearAfterDelay（）；
document.getElementById（“形状”）.onclick=function（）{
document.getElementById（“shape”）.style.display=“无”；
var end=new Date（）.getTime（）；
var时间=（结束-开始）/1000；
var-timeTotal=0；
var numatempts=0；
document.getElementById（“timetake”）.innerHTML=timetake+“s”；
document.getElementById（“timeTakenTotal”）.innerHTML=timetake+“s”；
appearAfterDelay（）；
}

这只是设置一个条件，检查它是否运行了20次



var startedAt=new Date（）.getTime（）；
var start=new Date（）.getTime（）；
var timestake=0；
var totalTime=0；
函数TotalTimeTake（值）{
如果（值=“返回”）{
totalTime=（（新日期（）.getTime（））-startedAt）/1000；
}
返回总时间；
}
setInterval（function（）{document.getElementById（“totalTime”）.innerHTML=totalTimeTake（“return”）+“s”}，10）；
函数getRandomColor（）{
变量字母='0123456789ABCDEF'。拆分（''）；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
函数makeShapeAppear（）{
var top=Math.random（）*400；
var left=Math.random（）*400；
变量宽度=（Math.random（）*200）+100；
if（Math.random（）>0.5）{
document.getElementById（“shape”）.style.borderRadius=“50%”；
}否则{
document.getElementById（“形状”）.style.borderRadius=“0”；
}
document.getElementById（“shape”）.style.backgroundColor=getRandomColor（）；
document.getElementById（“shape”）.style.width=width+“px”；
document.getElementById（“shape”）.style.height=width+px；
document.getElementById（“shape”）.style.top=top+px；
document.getElementById（“shape”）.style.left=left+px；
document.getElementById（“shape”）.style.display=“block”；
开始=新日期（）.getTime（）；
}
函数appearAfterDelay（）{
setTimeout（makeShapeApper，Math.random（）*2000）；
}
appearAfterDelay（）；
document.getElementById（“形状”）.onclick=function（）{
document.getElementById（“shape”）.style.display=“无”；
var end=new Date（）.getTime（）；
var时间=（结束-开始）/1000；
var-timeTotal=0；
var numatempts=0；
document.getElementById（“timetake”）.innerHTML=timetake+“s”；
如果（耗时！=20）{
appearAfterDelay（）；
所用时间+=1；
}
}



反应计时器
身体{
字体系列：无衬线；
}
#形状{
宽度：200px；
高度：200px；
背景色：红色；
显示：无；
位置：相对位置；
}
.bold{
字体大小：粗体；
}
测试你的反应！
尽可能快地点击方框和圆圈


您的时间：


您的总时间：


这只是设置一个条件，检查它是否运行了20次



var startedAt=new Date（）.getTime（）；
var start=new Date（）.getTime（）；
var timestake=0；
var totalTime=0；
函数TotalTimeTake（值）{
如果（值=“返回”）{
totalTime=（（新日期（）.getTime（））-startedAt）/1000；
}
返回总时间；
}
setInterval（function（）{document.getElementById（“totalTime”）.innerHTML=totalTimeTake（“return”）+“s”}，10）；
函数getRandomColor（）{
变量字母='0123456789ABCDEF'。拆分（''）；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
函数makeShapeAppear（）{
var top=Math.random（）*400；
var left=Math.random（）*400；
变量宽度=（Math.random（）*200）+100；
if（Math.random（）>0.5）{
document.getElementById（“shape”）.style.borderRadius=“50%”；
}否则{
document.getElementById（“s





<html>
    <head>  
        <title>Reaction Timer</title>
        <style type="text/css"> 
            body {
              font-family: sans-serif;
            }

            #shape {
                width: 200px;
                height: 200px;
                background-color: red;
                display: none;
                position: relative; 
            }

            .bold {
                font-weight: bold; 
            } 
        </style>
    </head>
    <body>
        <h1>Test Your Reactions!</h1>
        <p>Click on the boxes and circles as quickly as you can!</p>
        <p class="bold">Your time: <span id="timeTaken"></span></p>
        <p class="bold">Your total time: <span id="totalTime"></span</p>
        <div id="shape"></div>
        
        <script type="text/javascript">
            var start = new Date().getTime();
            function totalTimeTaken()  { }
            
            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.width = width + "px";
                document.getElementById("shape").style.height = width + "px";
                document.getElementById("shape").style.top = top + "px";
                
                document.getElementById("shape").style.left = left + "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;
                var timeTotal = 0;
                var numAttempts=0;
                document.getElementById("timeTaken").innerHTML = timeTaken + "s";
                document.getElementById("timeTakenTotal").innerHTML = timeTaken + "s";
                appearAfterDelay();
            }
            
        </script>
    </body>
 
</html>