Javascript 动态速度表如何在用户交互中反映速度

我正在尝试创建一个反应灵敏的动态速度表。速度表将以数字形式反映速度，功能基于用户在屏幕上单击的次数

因此，如果用户点击次数较多，速度表将反映较高的速度，反之亦然

问题：

为了能够反映速度表，我创建了一个画布来包含速度表。代码如下所示：

<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>

var dialCenter=[129124]；
var needleCenter=[13121.5]；
变量盘=新图像，指针=新图像；
window.onload=函数（）{
//查找画布元素
var v=document.getElementById（'myCanvas'）[0]；
//为画布启用绘图对象
var ctx=canvas.getContext（'2d'）；
ctx.save（）；
//创建画布
clearRect（0,0，canvas.width，canvas.height）；
//画布中文本的设置和对齐
ctx.font=“12px Arial”；
ctx.textAlign=“中心”；
ctx.filltext（“速度计”，10,50）；
//将刻度盘置于画布中央
ctx.translate（c.width/2，c.height/2）；
ctx.drawImage（拨号，-dialCenter[0]，-dialCenter[1]）；
//将针放在画布的中心
ctx旋转（2.3*Math.sin（（新日期）*1/1000）-0.15）；
ctx.drawImage（针，-needleCenter[0]，-needleCenter[1]）；
ctx.restore（）；
};
//指定图像源
dial.src='MeterBar.png'；
needle.src='MeterPin.png'；
功能车速表（）{
…（通过动态创建速度表的功能）
}

然而，在这一点上，我陷入了当用户点击屏幕时速度反射的创建中

我的想法是：

在用户第一次与屏幕交互时，它将记录时间，因此对于随后的每次触摸，它将记录用户交互时间。因此，我创建速度反射的公式为：（（第二次触摸时间）-（第一次触摸时间））/（第一次触摸时间）以获得速度。 然而，这是唯一的方法，因为我觉得这将需要巨大的内存空间和处理空间。还有其他有效的方法吗

因此，我想问：我怎样才能使速度表反映出用户在屏幕上点击次数的速度？

---

谢谢。

简单地说，您需要将上次单击时间与当前单击时间进行比较。比如：

var lastClickDateTime = new Date();

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

然而，在现实中，这将给你们数据值的大跳跃，所以你们可能想要平均一系列最后的点击