爱站程序员基地说明
- 本程序的HTML/CSS/JS 代码分别保存在index.html / index.css / index.js 文件中，而index.css 和 index.js 文件又分别保存在 css 和 js 文件中，具体效果如下图所示
- 本程序使用Chrome/Firefox/360浏览器/Opera浏览器打开后，显示效果全部正常，效果图见下方
效果图
源代码
HTML代码
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=I, initial-scale=1.0\"><meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"><title>iOS时钟</title><!-- CSS文件是保存在css文件夹下的--><link rel=\"stylesheet\" href=\"css/index.css\"></head><body><div class=\"clock\"><!-- 表盘 --><ul class=\"dial\"><!-- 表盘上的数字由JS动态生成 --></ul><!-- 中间的圆点 --><div class=\"point\"></div><!-- 时分秒针 --><div class=\"hour\"></div><div class=\"minute\"></div><div class=\"second\"></div></div><!-- JS文件是保存在js文件夹下的--><script src=\"js/index.js\"></script></body></html>
CSS 代码
*{margin: 0;padding: 0;}li{list-style: none;}.clock{position: relative;width: 230px;height: 230px;margin: 300px auto;border-radius: 40px;background-color: #000;}/* 圆形白色表盘 */.dial{position: relative;top: 15px;left: 15px;width: 200px;height: 200px;border-radius: 50%;background-color: #fff;}li{position: absolute;/* 首先让所有数字都原来12的位置，然后再旋转 */top: 0;left: 50%;width: 30px;margin-left: -15px;font-size: 20px;text-align: center;/* 改变旋转中心为表盘的圆心 *//* 移动的相对原点是li元素的左上角 */transform-origin: 15px 100px;}/* span元素是行内元素，无法旋转 */li span{display: inline-block;}/* 圆点 */.point{/* 相当于clock进行定位 */position: absolute;/* 水平垂直居中 */top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);width: 10px;height: 10px;border-radius: 50%;background-color: #000;}.hour{position: absolute;left: 50%;margin-left: -2px;/* 230/2-70=45px */top: 65px;width: 4px;height: 50px;background-color: #000;/* 改变圆心（相对于自身） */transform-origin: center bottom;transform: rotate(30deg);}.minute{position: absolute;left: 50%;margin-left: -1.5px;top: 45px;width: 3px;height: 70px;background-color: #000;transform-origin: center bottom;transform: rotate(60deg);}.second{position: absolute;left: 50%;margin-left: -1px;top: 35px;width: 2px;height: 90px;background-color: orange;transform-origin: center 80px;transform: rotate(0deg);}
JS代码
// 获取表盘var dial = document.querySelector(\".dial\");// 获取时分秒针var oHour = document.querySelector(\".hour\");var oMinute = document.querySelector(\".minute\");var oSecond = document.querySelector(\".second\");var total = 12;// 初始化函数function init(){var str = \'\';for(var i=1; i<=total; i++){str += \'<li class=\"num\" style=\"transform: rotate(\' + i*30 + \'deg)\"> \\<span style=\"transform: rotate(\' + (-i)*30 + \'deg)\" >\' + i + \'</span> \\</li>\';}dial.innerHTML = str;// 开启定时器，定时调用draw函数setInterval(draw,1000/60);}init();function draw(){// 获取当前日期时间var date = new Date();// 获取秒和毫秒var second = date.getSeconds();var msec = date.getMilliseconds();// 把毫秒转化成秒，和秒拼在一起，如：23.456var fillSecond = second + msec/1000;// 每秒秒针转6度oSecond.style.transform = \'rotate(\' + fillSecond*6 + \'deg)\';var minute = date.getMinutes();var fillMinute = minute + second/60;// 一分钟也就转6度oMinute.style.transform = \'rotate(\' + fillMinute*6 + \'deg)\';var hour = date.getHours();var fillHour = hour + minute/60;// 一小时转30度oHour.style.transform = \'rotate(\' + fillHour*30 + \'deg)\';}
最后
本人水平有限，如有错误或疏漏之处，欢迎读者朋友在下方评论
