-3

要开始，我想通知我对JavaScript很新，我希望你能忍受我。如何分配心跳图标跳动每分钟计数器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

来源

2015-05-19 Mieer Darwesh

[This codepen]（http://codepen.io/jakealbaugh/full/PwLXXP/）知道 – Jonathan

查找IMG标记。这不是真的有一天会帮助其他人的问题，因此脱离主题。 –

的简单方法：

替换：

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

来源

2015-05-19 16:38:28 JasonWilczak

您好，我做了：\t \t \t tapDiv.innerHTML ='

'+ Math.floor（bpm）+'

;但点击时不会做任何事情。 –

我添加了一个小提琴，我在h1上放置了一个内联样式，以便它们在同一行上。我相信小提琴可以按照预期工作。根据您的评论中的代码，您错过了/> – JasonWilczak

之后的结束单引号（'）真的，非常感谢您的所有努力！ :) –

如何分配心跳图标跳动每分钟计数器javascript

回答

'+ Math.floor（bpm）+'

相关问题