如何在母版页上显示动态时钟

How to show a dynamic clock on master page?

本文关键字：显示 动态 时钟 母版页      更新时间：2023-09-26

我尝试了一下，并在谷歌上搜索了一会儿，但有一些例子对我来说非常复杂。我想在我的主页上显示一个时钟，它应该是动态的。我对Jquery不太熟悉，所有的例子都是关于Jquery的。那么，对于初学者来说，有没有一种简单的方法来使用母版页面上的数字时钟呢?我还想展示冒号在每一个刻度上的闪烁，它将时间分开。

用javascript制作一个简单的时钟并不难。

请看下面的例子:示例

我稍微改变了一下链接中的例子，这样更容易阅读和理解:

  <input type="text" id="clock"/>
  <script type="text/javascript">
    setInterval("settime()", 1000);
    function settime() 
    {
      var dateTime = new Date();
      var hour = dateTime.getHours();
      var minute = dateTime.getMinutes();
      var second = dateTime.getSeconds();
      if (minute < 10)
        minute = "0" + minute;
      if (second < 10)
        second = "0" + second;
      var time = "" + hour + ":" + minute + ":" + second;
      document.getElementById("clock").value = time;
    }
  </script>

您可以使用ajax面板。有一个容易使用的ajax更新面板在线，然后你可以有时钟扩展一秒每滴答(他们有一个定时器控制)，虽然我很确定，你可以找到一个免费的地方，为你做这样的事情。

这个链接对我来说很简单。

编辑

考虑到客户端的需求和下面的评论，您也可以尝试这个链接

这里有一个类似的版本，可以执行冒号。注意，它只是使用jQuery来执行冒号"fade"。

function clock(){
  var d = new Date();
  var h = d.getHours();
  var m = d.getMinutes();
  var s = d.getSeconds();
  $('#clock').html(h+"<span class='colon'>:</span>"+m+"<span class='colon'>:</span>"+s);
  $('.colon').fadeTo(1000, .2);
  setTimeout(clock, 1000);
}
<div id="clock"></div>

您可以修改消息中的值，例如添加月/日/年等，只需使用Date对象，就像我所做的那样。

相关文章：