只用js代码实现电子时钟，精确到毫秒

2024-05-26 13:55| 来源: 网络整理| 查看: 265

效果如下：

完整代码详解如下：

js实现电子时钟 #watch{ margin-top: 200px; font-size: 100px; text-align: center; } (function(){ // 1. 获取id是watch的div元素 var watch = document.getElementById('watch'); // 2. 补0函数：如果是个位数的话在前面填个0 function addZero(t){ return t < 10 ? '0' + t : t; } // 3. 毫秒格式化成两位数 function format(t){ // 顺便补0了 return t > 99 ? parseInt(t / 10) : t < 10 ? '0' + t : t; } // 4. 首先获取当前日期和时间的函数 function getDateTime(){ // 1) 创建date对象 var date = new Date(); // 2) 创建时间time对象，精确到毫秒，并对个位数调用补0函数 var time = { y : date.getFullYear(), m : addZero(date.getMonth() + 1), d : addZero(date.getDate()), h : addZero(date.getHours()), i : addZero(date.getMinutes()), s : addZero(date.getSeconds()), hs : format(date.getMilliseconds()) } // 3) 设置元素中的文本内容 watch.innerHTML = time.y + '-' + time.m + '-' + time.d +' ' + time.h + ':' + time.m + ':' + time.s + ':' + time.hs; } // 5. 调用函数 getDateTime(); // 6. 定时器动态更新 setInterval(getDateTime,1); })();

其他小案例：

css实现颜色渐变小动画

css代码实现3D动画翻转 - 鱿鱼游戏卡片制作

css实现加载旋转动画

css实现旋转的小流星动画

简单的js代码实现主题色切换

点击主页看更多css小动画，js小案例…

我的主页

【本文地址】

公司简介

联系我们