Question

首先，我想通知我对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>

如何实现心形图标（图像）以便显示该图标并与js交互？

我或许我可以在分区中输入一个来源并直接指向我目录中的heart.png，以便它显示该内容并使用tapDiv id。但我不确定这一点。

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

感谢

Mieer

Answer 1

简单方法：

替换：

tapDiv.innerHTML = "<h1>" + 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

这只是为动态创建的内容添加了一个图像元素，并且可能是最容易使用当前代码集实现的： Working Fiddle

替代方式：

您可以使用CSS通过指定类来设置图像，这是更优选的方法：how to put an image in div with css

如何将心脏图标分配给每分钟计数器javascript

1 个答案: