如何将心脏图标指定给每分钟心跳计数器javascript_Javascript_Jquery_Html

如何将心脏图标指定给每分钟心跳计数器javascript

javascript jquery html

如何将心脏图标指定给每分钟心跳计数器javascript,javascript,jquery,html,Javascript,Jquery,Html,首先，我想通知大家，我对javascript还很陌生，希望大家能接受我有一个代码，在鼠标按下时，它会计算每分钟的拍数。我想做的是在分区的空间中显示一个心脏图标，这样当有人单击心脏时，它将显示BPM 这就是我现在拥有的： <!DOCTYPE html> <html> <head> </head> <body> <div id="tapDiv" style="height:200px;width:200px;backgrou

首先，我想通知大家，我对javascript还很陌生，希望大家能接受

我有一个代码，在鼠标按下时，它会计算每分钟的拍数。我想做的是在分区的空间中显示一个心脏图标，这样当有人单击心脏时，它将显示BPM

这就是我现在拥有的：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="tapDiv" style="height:200px;width:200px;background-color:#000;color:#FFF"></div>

    <script>

        lastTapSeconds = 0;
        bpm = 0;

        var tapDiv = document.getElementById("tapDiv");

        function bpmCounter() { 

            var tapSeconds = new Date().getTime();

            bpm = ((1 / ((tapSeconds - lastTapSeconds) / 1000)) * 60);
            lastTapSeconds = tapSeconds;            
            tapDiv.innerHTML = "<h1>" + Math.floor(bpm) + "</h1>";  
        }

        tapDiv.onmousedown = bpmCounter;

    </script>


</body>
</html>


lastTapSeconds=0；
bpm=0；
var tapDiv=document.getElementById（“tapDiv”）；
函数bpmCounter（）{
var tapSeconds=new Date（）.getTime（）；
bpm=（（1/（（点击秒数-最后点击秒数）/1000））*60）；
lastTapSeconds=tapSeconds；
tapDiv.innerHTML=“”+数学地板（bpm）+”；
}
tapDiv.onmousedown=bpmCounter；

我如何实现一个心形图标（图像），以便它显示该图标并与js交互

我想也许我可以在分区中输入一个源代码并直接指向我的目录中的heart.png，这样它就会显示该代码并使用tapDiv id。但我不确定这一点

我希望我已经给了你足够的信息

谢谢

迈尔

简单的方法：

替换：

tapDiv.innerHTML = "<h1>" + Math.floor(bpm) + "</h1>";

tapDiv.innerHTML=“+Math.floor（bpm）+”；

与：

tapDiv.innerHTML=''+数学地板（bpm）+''；
//为heart.png指定您自己的源路径

这只是将图像元素添加到动态创建的内容中，可能是使用当前代码集最容易实现的：

备用方式：

您可以使用CSS通过指定类来设置图像，这是更可取的方法：

knowsLook up the IMG tag。这真的不是一个有一天会帮助其他人的问题，因此是离题的。嗨，我问了：tapDiv.innerHTML=''+Math.floor（bpm）+'；但是当点击的时候，它什么都不做。我添加了一个提琴，我在h1上添加了一个内联样式，这样它们就在同一行上了。我相信这把小提琴是按计划工作的。根据注释中的代码，在/>之后缺少一个结束单引号（'）

tapDiv.innerHTML = '<h1 style="display:inline">' + Math.floor(bpm) + '</h1><img src="/Images/heart.png"/>';  
//specify your own source path for heart.png