在页面显示一个时钟

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>在页面显示一个时钟</p>
    <p id="demo"></p>
  </body>
  <script>
    var myVar = setInterval(function () {
      myTimer(); //赋值函数,将封装函数从外面调用
    }, 1000);
    //声明一个带定时器的函数,函数间隔1秒执行一次,1000毫秒=1秒;
    function myTimer() {
      var d = new Date();
      //获得当日的日期。
      var t = d.toLocaleTimeString();
      // 根据本地时间把 Date 对象的时间部分转换为字符串,并赋值给t;
      document.getElementById("demo").innerHTML = t;
      //获取ID为“demo”的节点,并将t赋值给它
      console.log(t);
      //时间是一直在改变,相当于不停的用新值覆盖旧值,如果打印在控制台,会不停显示新的值
    }
    //页面显示的是==>>在页面显示一个时钟  20:19:37
    //控制台显示的是==>> 20:25:47  20:25:48  20:25:49  20:25:50  20:25:51 。。。。。
  </script>
</html>

运行结果

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值