爱站程序员基地案例：塔罗时针分享
效果图展示（代码运行后为一个同心转动展开的动画）：
思路分享:
先做时分秒的三个圆形框架，将时间放入框架中。首先 获取时间，获取的时间为阿拉伯数字，需先将数字转换为汉字的时间，注意整十位的转换，再拼接时分秒。用dom动态获取将时间展示在框架中，再加入动画，需注意动画的运行时间，以及时分秒各转一整圈后的角度和位置。
完整代码如下：
<!DOCTYPE html><html><head lang=\"en\"><meta charset=\"UTF-8\"><title></title><style>* {margin: 0;padding: 0;}html, body {width: 100%;height: 100%;overflow: hidden;}.box {position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;width: 500px;height: 500px;font-size: 12px;}.box > div {position: absolute;transform-origin: 50% 50%;}.trans {transition: transform .5s ease-in-out;}.seconds {left: 0;top: 0;width: 500px;height: 500px;border-radius: 50%;}.minute {left: 70px;top: 70px;width: 360px;height: 360px;border-radius: 50%;}.hour {left: 140px;top: 140px;width: 220px;height: 220px;border-radius: 50%;}.now {position: absolute;width: 110px;height: 30px;line-height: 30px;top: 235px;left: 195px;text-align: center;}.now:after {position: absolute;left: 0;bottom: 3px;content: \"\";width: 305px;height: 0;border-bottom: 1px solid #000;}.hour_list {position: absolute;top: 95px;left: 0;width: 220px;height: 30px;line-height: 30px;text-align: right;transform-origin: 50% 50%;}.minute_list {position: absolute;top: 165px;left: 0;width: 360px;height: 30px;line-height: 30px;text-align: right;transform-origin: 50% 50%;}.seconds_list {position: absolute;top: 235px;left: 0;width: 500px;height: 30px;line-height: 30px;text-align: right;transform-origin: 50% 50%;}.centerTime {position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;font-size: 0;}</style></head><body><div class=\"box\"><div class=\"seconds\"></div><div class=\"minute\"></div><div class=\"hour\"></div><p class=\"now\"><span class=\"centerTime\">2020年07月22日</span></p></div><script src=\"js/jquery-1.9.1.js\"></script><script>$(function () {/** 定义对象 作用 数字时间住转换汉字时间* */var time = {0: \"\",1: \"一\",2: \"二\",3: \"三\",4: \"四\",5: \"五\",6: \"六\",7: \"七\",8: \"八\",9: \"九\",10: \"十\"}//例如 秒 60function getHanTime(num, han) {var arr = [];for (var i = 1; i <= num; i++) {var s = i.toString();var text = i < 10 ? time[i] : s.charAt(0) < 2 ? time[10] + time[s.charAt(1)] : time[s.charAt(0)] + time[10] + time[s.charAt(1)];arr.push(text + han);}return arr;}//获取当前的年月日时分秒var arr = [];function getNowTime() {arr = [];var nowtime = new Date();var year = nowtime.getFullYear() + \"年\";var month = nowtime.getMonth() + 1 + \"月\";var day = nowtime.getDate() + \"日\";var centerTime = year + month + day;arr.push(centerTime);arr.push(nowtime.getHours());arr.push(nowtime.getMinutes());arr.push(nowtime.getSeconds());}//获取当前的时间getNowTime();$(\".centerTime\").text(arr[0]).animate({fontSize: 12}, 500);//获取小时汉字var hour = getHanTime(24, \"时\");//遍历hour数组动态产生标签hour.map(function (val, index) {var hourstr = $(\"<div class=\'hour_list\'><span>\" + val + \"</span></div>\");$(\".hour\").append(hourstr);});//给小时添加动画$(\".hour_list\").each(function (index) {var delaytime = 1000 / 24 * index$(this).delay(delaytime).animate({color: \"#000\"}, 500, function () {$(this).css(\"transform\", \"rotatez(\" + (-index * 15) + \"deg)\");});});//获取分钟汉字var minute = getHanTime(60, \"分\");//遍历minute数组动态产生标签minute.map(function (val, index) {var minutestr = $(\"<div class=\'minute_list\'><span>\" + val + \"</span></div>\");$(\".minute\").append(minutestr);});//给分添加动画$(\".minute_list\").each(function (index) {var delaytime = 1000 / 60 * index$(this).delay(delaytime).animate({color: \"#000\"}, 500, function () {$(this).css(\"transform\", \"rotatez(\" + (-index * 6) + \"deg)\");});});//获取秒汉字var seconds = getHanTime(60, \"秒\");//遍历seconds数组动态产生标签seconds.map(function (val, index) {var secondsstr = $(\"<div class=\'seconds_list\'><span>\" + val + \"</span></div>\");$(\".seconds\").append(secondsstr);});//给秒添加动画$(\".seconds_list\").each(function (index) {var delaytime = 1000 / 60 * index$(this).delay(delaytime).animate({color: \"#000\"}, 500, function () {$(this).css(\"transform\", \"rotatez(\" + (-index * 6) + \"deg)\");});}).last().queue(function () {//时表盘转getNowTime();$(\".box>div\").addClass(\"trans\");$(\".hour\").animate({color: \"#000\"}, 0, function () {$(this).css(\"transform\", \"rotatez(\" + ((arr[1] - 1) / 24 * 360) + \"deg)\");});$(\".minute\").delay(100).animate({color: \"#000\"}, 0, function () {$(this).css(\"transform\", \"rotatez(\" + ((arr[2] - 1) / 60 * 360) + \"deg)\");})$(\".seconds\").delay(200).animate({color: \"#000\"}, 0, function () {$(this).css(\"transform\", \"rotatez(\" + ((arr[3] - 1) / 60 * 360) + \"deg)\");setAnimate();//开启自动旋转})});//自动旋转的动画function setAnimate() {$(\".seconds\").animate({color: \"#000\"}, 1000, function () {//获取当前的时间getNowTime();if (arr[1] == 1) {$(\".hour\").removeClass(\"trans\").css(\"transform\", \"rotatez(-15deg)\");}$(\".box>div\").addClass(\"trans\");$(\".hour\").css(\"transform\", \"rotatez(\" + ((arr[1] - 1) / 24 * 360) + \"deg)\");$(\".minute\").css(\"transform\", \"rotatez(\" + (((arr[2] == 0 ? 60 : arr[2]) - 1) / 60 * 360) + \"deg)\");$(\".seconds\").css(\"transform\", \"rotatez(\" + (((arr[3] == 0 ? 60 : arr[3]) - 1) / 60 * 360) + \"deg)\");setTimeout(function () {//过度动画执行完成if (arr[3] == 0) {$(\".seconds\").removeClass(\"trans\").css(\"transform\", \"rotatez(-6deg)\");}if (arr[2] == 0&&arr[3]==0) {$(\".minute\").removeClass(\"trans\").css(\"transform\", \"rotatez(-6deg)\");}}, 500);}).queue(function () {$(this).dequeue();setAnimate();});}});</script></body></html>
