Как динамический спидометр отражает скорость взаимодействия с пользователем

Question

Я пытаюсь создать отзывчивый динамический спидометр. Спидометр будет отображать скорость в числовой форме, функциональность зависит от количества кликов, которые пользователь нажал на экране.

Следовательно, спидометр будет отображать более высокую скорость, если пользователь получил большее количество кликов и наоборот.

Выпуск:

Чтобы быть в состоянии отразить спидометр, я создал холст, чтобы содержать спидометр. Код, как показано ниже:

<div id="speedometer" style="position: absolute" width="100%" height="100%" left="160px" top="250px"> 
     <script type ="text/javascript" charset="utf-8"> 
      var dialCenter = [129,124]; 
      var needleCenter = [13,121.5]; 
      var dial = new Image, needle = new Image; 
      window.onload =function(){ 
       //Find Canvas element 
       var v =document.getElementById('myCanvas')[0]; 
       //Enable drawing object for the canvas 
       var ctx = canvas.getContext('2d'); 
       ctx.save(); 
       //create the canvas 
       ctx.clearRect(0,0, canvas.width,canvas.height); 

       //setting and alignment of text in canvas 
       ctx.font ="12px Arial"; 
       ctx.textAlign ="center"; 
       ctx. filltext("Speed Meter",10,50); 

       //center the dial on the canvas 
       ctx.translate(c.width/2, c.height/2); 
       ctx.drawImage(dial, -dialCenter[0], -dialCenter[1]); 

       //center the needle on the canvas 
       ctx.rotate(2.3*Math.sin((new Date)*1/1000)- 0.15); 
       ctx.drawImage(needle, -needleCenter[0], -needleCenter[1]); 
       ctx.restore(); 
      }; 
      //Assign the image source 
      dial.src='MeterBar.png'; 
      needle.src = 'MeterPin.png'; 
     </script> 
</div> 

<script> 
     function speedometer(){ 
      ...(Function to create speedometer to by dynamic) 
     } 
</script> 

Однако, на данный момент, я застрял в создании отражения скорости, когда пользователь нажимает на экране.

У меня есть идея, что:

О пользователе первого взаимодействия с экраном, он будет регистрировать время, поэтому для каждого последующего прикосновения, он будет регистрировать время взаимодействия с пользователем. Следовательно, формула для создания отражения скорости будет: ((2-е время касания) - (1-ое время касания))/(1-е касание), чтобы получить скорость. Однако, это единственный способ, поскольку я чувствую, что для этого потребуется огромное пространство памяти и пространство для обработки. Есть ли другой эффективный способ?

Поэтому я хотел бы спросить: как я могу включить спидометр для отражения скорости в отношении количества кликов, которые пользователь нажал на экране? Спасибо.

Answer 1

Упрощает, что вы хотите сравнить последнее время клика с текущим кликом. Что-то вроде:

var lastClickDateTime = new Date(); 

function getSpeed() { 
    var currentDateTime = new Date(); 
    return currentDateTime.getTime() - lastClickDateTime.getTime(); 
} 

Однако в действительности это даст вам большие скачки значений данных, так что вы, вероятно, хотите, чтобы усреднить ряд последних кликов.