Question

我想显示自上次重新加载页面以来经过了多长时间。

<li id="last-update-title" onmouseover="updateTimeToolTip()">Some Text here</li>

这是我有的updateTimeToolTip（）函数

function updateTimeToolTip() {
    document.getElementById('last-update-title').title = customFormatTimeSecondsAgo(updateTime);
};

function customFormatTimeSecondsAgo(date) {
    var result = Math.floor((new Date() - date) / 1000);
    if (result <= 1) return "Updated: Just now";
    return "Updated: " + result + " seconds ago";
};

这些功能现在正常工作以计算时间。它显示我悬停在文本上的时间。但是，当鼠标悬停在标题属性上时，标题属性不会改变，这是正常的，但我认为如果我可以让它在鼠标悬停在文本上时不断更新会很好。有没有办法在不使用任何外部JQuery的情况下实现这一目标？

由于

Answer 1

如果我是你，我不会尝试更新本机浏览器工具提示，我会尝试更像这样的定制：

  <html>
    <head>
    </head>
    <style>

      #last-update-title{
        position: relative;
        margin-top: 20px;
      }

      #tooltip{
        position: absolute;
        top: -20px;
        display:none;
      }

      #tooltip.show{
        display:inherit;
      }

    </style>
    <body>

      <div id="last-update-title" onmouseover="showToolTip('show');" onmouseout="showToolTip('');">
        Some Text here
        <div id="tooltip"></div>
      </div>

    </body>
    <script type="text/javascript">

      function showToolTip(show){
        document.getElementById('tooltip').className = show;
      }

      var startDate = new Date();
      setInterval(function(){
          document.getElementById('tooltip').innerHTML = customFormatTimeSecondsAgo(startDate);
      }, 1000)

      function customFormatTimeSecondsAgo(date) {
          var result = Math.floor((new Date() - date) / 1000);
          if (result <= 1) return "Updated: Just now";

          return "Updated: " + result + " seconds ago";
      };


    </script>
  </html>

这避免了不同浏览器如何呈现工具提示的问题，并且还会绕过工具提示而不是根据需要动态更新。

Answer 2

试试这个。

var updateInterval;
$(function() {
    $('#last-update-title').on('mouseover', function() {
        updateInterval = setInterval(updateTimeToolTip, 10);
    });

    $('#last-update-title').on('mouseout', function() {
        clearInterval(updateInterval);
    });
});

Answer 3

如果你想要一个与时钟类似的东西，我推荐使用间隔功能，如下所示：

<li id="last-update-title" onmouseover="function(){setInterval(updateTimeToolTip(), 3000);}">Some Text here</li>

鼠标悬停时保持工具提示（标题属性）更新

3 个答案: