秒针计时器 html,js实现秒表计时器

本文实例为大家分享了js实现秒表计时器的具体代码,供大家参考,具体内容如下

秒表计时器的实现:

效果图如下:

408b0e7fd5a3a3588a658cbe6cbfb2b7.png

附代码,已调试运行

Document

#div1 {

width: 300px;

height: 400px;

background: skyblue;

margin: 100px auto;

text-align: center;

}

#count {

width: 200px;

height: 150px;

line-height: 150px;

margin: auto;

font-size: 40px;

}

#div1 input {

width: 150px;

height: 40px;

background: orange;

font-size: 25px;

margin-top: 20px

}

00

00

00

微信扫码订阅
UP更新不错过~
关注
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML: ``` <div class="clock"> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> </div> ``` CSS: ``` .clock { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; border-radius: 50%; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } .hour, .minute, .second { position: absolute; top: 50%; transform: translateY(-50%); background-color: #333; } .hour { width: 50px; height: 8px; border-radius: 4px; transform-origin: left center; } .minute { width: 80px; height: 6px; border-radius: 3px; transform-origin: left center; } .second { width: 100px; height: 4px; border-radius: 2px; transform-origin: left center; } ``` JS: ``` function updateClock() { let now = new Date(); let hour = now.getHours() % 12; // 转换成12小时制 let minute = now.getMinutes(); let second = now.getSeconds(); // 计算时、分、秒针的旋转角度 let hourDeg = hour * 30 + minute * 0.5; // 每小时30度,每分钟0.5度 let minuteDeg = minute * 6; // 每分钟6度 let secondDeg = second * 6; // 每秒6度 // 更新时、分、秒针的角度 let hourEl = document.querySelector('.hour'); let minuteEl = document.querySelector('.minute'); let secondEl = document.querySelector('.second'); hourEl.style.transform = `rotate(${hourDeg}deg)`; minuteEl.style.transform = `rotate(${minuteDeg}deg)`; secondEl.style.transform = `rotate(${secondDeg}deg)`; } // 每秒更新一次时钟 setInterval(updateClock, 1000); ``` 可以在网页中嵌入上述代码后运行,即可实现一个简单的时钟功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值