JavaScript CSS3创意数字时钟效果

JS 和 CSS3 结合的数字时钟效果挺有意思的，用来练练手或者放在个人主页上都还不错。整个实现过程其实不复杂，核心就四步：拿时间、格式化、更新 DOM、定时刷新。CSS 那边加点动画和样式，让时钟动起来，视觉上更有意思。

JS 的时间获取用new Date()，getHours()、getMinutes()这些方法把小时分钟秒拿出来。怕时间显示不统一？前面加个 0 就行，用三元运算符一行搞定。

接下来就是每秒刷新一次，setInterval直接上，每 1000 毫秒执行一次获取+更新逻辑。页面上用个id="clock"的元素装时间，innerHTML改它的内容就搞定。

样式部分，CSS3出马了。transform可以加 3D 旋转，@keyframes搞个转圈圈动画，数字跳动时看起来更有感觉。不想太炫？那就只搞个背景和字体样式，走简约路线。

布局用flex挺顺手的，justify-content: center配align-items: center就能把时钟居中放好。每个数字用margin间隔一下，看着不会挤。

你要是想看完整代码实现，可以下载texiao8384_1560680993这个压缩包，HTML、CSS、JS 都有，照着跑一遍基本就会了。顺便还能学点DOM操作和CSS 动画的小技巧。

如果你刚学 JS 和 CSS，或者想做个炫一点的小功能加到项目里，这个数字时钟挺适合。还能自由改样式，练习效果也多，推荐试试。