(注意要用“jquery.min.js”)
效果如上
<!doctype html> <html> <head> <meta charset="utf-8"> <title>模拟数字钟</title> <script src="js/jquery.min.js"></script> <style> @import url("https://fonts.googleapis.com/css?family=BenchNine:300,400"); *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } html { height: 100%; /* background: linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6)); */ background: linear-gradient(to right, #C6FFDD, #FBD786, #f7797d); /* background: linear-gradient(to right, #03001e, #7303c0, #ec38bc, #fdeff9); */ overflow: hidden; font-family: 'BenchNine', sans-serif; } /* 表针 */ .clock-container { position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 480px; height: 480px; border-radius: 50%; overflow: hidden; background: #dd5d96; -webkit-box-shadow: 0 0 25px 3px #000, 0 0 10px rgba(0, 0, 0, 0.8) inset; box-shadow: 0 0 25px 3px #dd5d96, 0 0 10px rgba(0, 0, 0, 0.8) inset; } .clock-container .spear { position: absolute; width: 220px; height: 1px; background: #be1561; left: 50%; top: 50%; transform: translateY(-50%); z-index: 200; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); } .clock-container .spear:after { content: ''; position: absolute; border: 7px solid transparent; border-right-color: #be1561; right: 0; top: -7px; } .clock-container .spear:before { content: ''; position: absolute; border: 7px solid transparent; border-left-color: #be1561; left: 2px; top: -7px; } /* 表盘样式颜色阴影之类 */ .clock-container .clock-analog { width: 440px; height: 440px; border-radius: 50%; margin: 20px; background: #fff; z-index: 5; position: relative; -webkit-box-shadow: 0 0 25px 3px #000 inset; box-shadow: 0 0 25px 3px #000 inset; } /* 旋转表盘 */ .clock-container .clock-analog .second, .clock-container .clock-analog .minute, .clock-container .clock-analog .hour { width: 20px; height: 20px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 100; transition: 0.2s 0.2s ease-in; transform: rotate(90deg); } .clock-container .clock-analog .second span, .clock-container .clock-analog .minute span, .clock-container .clock-analog .hour span { position: absolute; width: 20px; height: 20px; line-height: 20px; text-align: center; transform-origin: 50%; z-index: 5; } /* 刻度 */ .clock-container .clock-analog .second span:after, .clock-container .clock-analog .minute span:after, .clock-container .clock-analog .hour span:after { content: ''; width: 4px; height: 1px; background: #000; position: absolute; left: 130%; top: -10%; opacity: 0.3; } .clock-container .clock-analog .second span:nth-child(5n+2):after, .clock-container .clock-analog .minute span:nth-child(5n+2):after, .clock-container .clock-analog .hour span:nth-child(5n+2):after { width: 7px; opacity: 1; left: 110%; } .clock-container .clock-analog .hour { z-index: 150; font-size: 32px; font-weight: 400; } .clock-container .clock-analog .hour span:after { opacity: 1; width: 4px; height: 1px; color: #666; -webkit-transform: translate(5px, 12px); transform: translate(5px, 12px); } .clock-container .clock-analog .hour:after { content: ''; background: #fff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 250px; height: 250px; border-radius: 50%; box-shadow: 0 0 15px 2px #682a46 inset; } .clock-container .clock-analog .minute { color: #fff; font-size: 16px; } .clock-container .clock-analog .minute span:after { background: #fff; -webkit-transform: translate(10px, -7px) rotate(-9deg); transform: translate(10px, -7px) rotate(-9deg); } .clock-container .clock-analog .minute:after { content: ''; background: #de5d96; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 350px; height: 350px; border-radius: 50%; box-shadow: 0 0 25px 2px #682a46 inset; } .clock-container .clock-analog .second { font-size: 12px; } .clock-container .clock-analog .second span:after { -webkit-transform: translate(5px, -10px); transform: translate(5px, -10px); } .clock-container .clock-analog .dail { width: 20px; height: 20px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 100; } .clock-container .clock-analog .dail span { width: 20px; height: 20px; line-height: 20px; -webkit-transform-origin: 50%; transform-origin: 50%; text-indent: 1000px; overflow: hidden; position: absolute; } .clock-container .clock-analog .dail span:after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background-color: #c4eaf3; *zoom: 1; filter: progid: DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF7D7E7D', endColorstr='#FF0E0E0E'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBlMGUwZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: linear-gradient(to right, #627377 0%, #c4eaf3 100%); left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .clock-container .clock-analog .dail span:nth-child(5n+1):after { width: 8px; } .clock-container .clock-digital { position: absolute; z-index: 200; height: 444px; width: 224px; background: #5abdd6; opacity: 0.9; left: 18px; top: 18px; border-radius: 220px 0 0 220px; box-shadow: 5px 0 15px #213a3f; } .clock-container .clock-digital:after { content: ''; position: absolute; border: 15px solid #c4eaf3; border-right: none; height: 400px; width: 200px; border-radius: 220px 0 0 220px; left: 25px; top: 25px; } .clock-container .clock-digital .time { background: #de5d96; position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #fff; border-radius: 50px; font-size: 24px; padding: 2px 20px; box-shadow: 0 0 15px #de5d96 inset; } .clock-container .clock-digital .day { background: #de5d96; position: absolute; right: 20px; bottom: 100px; color: #fff; border-radius: 20px; box-shadow: 0 0 15px #de5d96 inset; padding: 2px 20px; font-size: 16px; } .clock-container .clock-digital .date { background: #de5d96; position: absolute; right: 20px; top: 100px; color: #fff; border-radius: 20px; font-size: 16px; box-shadow: 0 0 10px #de5d96 inset; padding: 2px 20px; } </style> </head> <body> <div class="clock-container"> <div class="clock-digital"> <div class="date"></div> <div class="time"></div> <div class="day"> </div> </div> <div class="clock-analog"> <div class="spear"></div> <div class="hour"></div> <div class="minute"></div> <!-- 秒盘 --> <div class="second"></div> <!-- 表盘外的标记点 --> <div class="dail"></div> </div> </div> <script> (function() { var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; function getTime() { var date = new Date(), second = date.getSeconds(), minute = date.getMinutes(), hour = date.getHours(), time = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }), day = date.getDay(), month = date.getMonth(), date = date.getDate() + ' . ' + months[month], ds = second * -6, dm = minute * -6, dh = hour * -30; $('.second').css('transform', 'rotate(' + ds + 'deg)'); $('.minute').css('transform', 'rotate(' + dm + 'deg)'); $('.hour').css('transform', 'rotate(' + dh + 'deg)'); $('.time').text(time); $('.day').text(days[day]); $('.date').text(date) } function dailer(selector, size) { for (var s = 0; s < 60; s++) { $(selector).append('<span style="transform: rotate(' + 6 * s + 'deg) translateX(' + size + 'px)">' + s + '</span>') } } dailer('.second', 195); dailer('.minute', 145); dailer('.dail', 230); for (var s = 1; s < 13; s++) { $('.hour').append('<span style="transform: rotate(' + 30 * s + 'deg) translateX(100px)">' + s + '</span>') } setInterval(getTime, 1000); getTime(); }()); </script> </body> </html>