最简版电子时钟,一看秒懂

HTML部分:

  1. 先用一个大的div标签包住一个小的div标签,然后再在小的div里写三个span标签,最后在span标签里写h1标签,h1标签里写两0。

     2、再写一个div标签,用它来包住两个button标签,两个button标签里分别写“开始”和“暂停”。

 

CSS部分:

         

 

JS部分:

  1. 声明一个全局变量times。然后写一个页面加载事件,在页面加载事件里分别获取两个button按钮。然后为两个button按钮添加点击事件。
  2. 封装一个方法,函数名称为stemint()。获取当前时间,再分别获取当前的时、分、秒。

三元运算:

         3、通过三元运算确保‘时、分、秒’在任何时候都以两位数形式出现。

             ​​​​​​​

         4、获取HTML中‘时、分、秒’然后将获取到现在的时间添加到HTML上;

 

            5、然后再回到两个button按钮的点击事件中,给‘开始按钮’添加一个计时器setInterval,给‘暂停按钮’添加一个去除定时器clearInterval。最后在页面加载事件中调用方法stemint()。再通过计时器每过一秒调用一次stemint()方法。

 

 

最后完成的效果:

初来乍到,请多多指教,大神勿喷。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值