1、效果图:
项目已经放在了我的个人网站上
2、实现思路
html部分使用flex布局来定位;
js部分使用date对象和定时器setInterval实现,date对象相关知识点请参考我之前的两篇博客。
javascript学习之日期 字符串(14)—— 时间和日期 Date类型
javascript学习之日期 字符串(15)—— 时间和日期 常用方法
3、主要部分代码
html:
<div class="clock_wrap">
<div class="clock">
<div id="hour"></div>
</div>
</div>
js:
var mytime=setInterval(function(){
gettime();
},1000 )
function gettime(){
var date=new Date();
var t=date.toLocaleTimeString();
var p=document.getElementById('hour');
p.innerHTML= t;
}
个人微信公众号:
如果我的文章对您有帮助,微信或支付宝打赏:
微信:
支付宝: