自己设计模拟的钟表时间日期。使用HTML5+CSS3+JS，SVG绘图。
截图：
代码：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>模拟钟表时间</title> <script src="jquery-1.8.3/jquery.min.js"></script> <script> window.onload = function() { //显示当前时间 var myVar = setInterval( function() { myTimer() }, 1000 ); //时间函数 function myTimer() { var today = new Date(); var w;//星期几 switch(today.getUTCDay()){ case 1: w="一"; break; case 2: w="二"; break; case 3: w="三"; break; case 4: w="四"; break; case 5: w="五"; break; case 6: w="六"; break; case 7: w="天"; break; } var d = today.getUTCFullYear()+"年" +(today.getUTCMonth()+1)+"月"+today.getUTCDate()+"日" +" 星期"+w; var t = today.toLocaleTimeString(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); //数字时间显示 document.getElementById("digit_time").innerHTML = d+"<br>"+t; //24:60:60 //时间转换为指针旋转度数 //时指针:24 if(h >= 12) { $("#svg_s3").css("transform", "rotate(" + (h - 12) * 30 + "deg)"); } else { $("#svg_s3").css("transform", "rotate(" + h * 30 + "deg)"); }; //分指针:60 $("#svg_s2").css("transform", "rotate(" + m * 6 + "deg)"); //秒指针:60 $("#svg_s1").css("transform", "rotate(" + s * 6 + "deg)"); } } </script> <style type="text/css"> /*时钟容器*/ #clock { width: 250px; height: 250px; margin: 20px auto; border-radius: 50%; position: relative; } /*数字时刻区*/ .tag { width: 60px; height: 30px; font-size: 16px; color: blue; line-height: 30px; text-align: center; border: 1px solid red; position: absolute; left: 95px; top: 110px; } /*数字时刻:1-12*/ .tag:first-child { transform: rotateZ(210deg) translateY(100px); } .tag:nth-child(2) { transform: rotateZ(240deg) translateY(100px); } .tag:nth-child(3) { transform: rotateZ(270deg) translateY(100px); } .tag:nth-child(4) { transform: rotateZ(300deg) translateY(100px); } .tag:nth-child(5) { transform: rotateZ(330deg) translateY(100px); } .tag:nth-child(6) { transform: rotateZ(0deg) translateY(100px); } .tag:nth-child(7) { transform: rotateZ(30deg) translateY(100px); } .tag:nth-child(8) { transform: rotateZ(60deg) translateY(100px); } .tag:nth-child(9) { transform: rotateZ(90deg) translateY(100px); } .tag:nth-child(10) { transform: rotateZ(120deg) translateY(100px); } .tag:nth-child(11) { transform: rotateZ(150deg) translateY(100px); } .tag:nth-child(12) { transform: rotateZ(-180deg) translateY(100px); } /*中心指针区域*/ #center { width: 150px; height: 150px; position: absolute; left: 50%; /*盒子左上角点距离左边框50%*/ top: 50%; /*盒子左上角点距离上边框50%*/ transform: translate(-50%, -50%); } /*秒指针*/ #svg_s1 { width: 150px; height: 150px; border-radius: 50%; position: absolute; z-index: 1; } /*分指针*/ #svg_s2 { width: 150px; height: 150px; border-radius: 50%; position: absolute; z-index: 2; } /*时指针*/ #svg_s3 { width: 150px; height: 150px; border-radius: 50%; position: absolute; z-index: 3; } /*数字时间*/ #digit_time { width: 180px; height: 60px; line-height: 30px; border: solid 1px green; color: red; font-size: larger; text-align: center; position: absolute; top: 270px; left: 35px; } </style> </head> <body> <div id="clock"> <!--时钟数字--> <div class="tag"> <svg width="30" height="30" id="tag_num"> <text x="-10" y="-15" transform="rotate(150)" fill="blue">1</text> </svg> </div> <div class="tag"> <svg width="30" height="30" id="tag_num"> <text x="0" y="-15" transform="rotate(120)" fill="blue">2</text> </svg> </div> <div class="tag"> <svg width="30" height="30" id="tag_num"> <text x="10" y="-10" transform="rotate(90)" fill="blue">3</text> </svg> </div> <div class="tag"> <svg width="30" height="30" id="tag_num"> <text x="15" y="0" transform="rotate(60)" fill="blue">4</text> </svg> </div> <div class="tag"> <svg width="30" height="30" id="tag_num"> <text x="15" y="15" transform="rotate(30)" fill="blue">5</text> </svg> </div> <div class="tag"> <svg width="30" height="30" id="tag_num"> <text x="10" y="20" transform="rotate(0)" fill="blue">6</text> </svg> </div> <div class="tag"> <svg width="30" height="30" id="tag_num"> <text x="0" y="25" transform="rotate(-30)" fill="blue">7</text> </svg> </div> <div class="tag"> <svg width="30" height="30" id="tag_num"> <text x="-10" y="30" transform="rotate(-60)" fill="blue">8</text> </svg> </div> <div class="tag"> <svg width="30" height="30" id="tag_num"> <text x="-15" y="25" transform="rotate(-90)" fill="blue">9</text> </svg> </div> <div class="tag"> <svg width="30" height="30" id="tag_num"> <text x="-30" y="15" transform="rotate(-120)" fill="blue">10</text> </svg> </div> <div class="tag"> <svg width="30" height="30" id="tag_num"> <text x="-30" y="0" transform="rotate(-150)" fill="blue">11</text> </svg> </div> <div class="tag"> <svg width="30" height="30" id="tag_num"> <text x="-25" y="-10" transform="rotate(-180)" fill="blue">12</text> </svg> </div> <!--指针区域--> <div id="center"> <!--秒指针--> <svg id="svg_s1" width="150" height="150"> <circle cx="75" cy="75" r="5" stroke="red" fill="transparent" stroke-width="1" /> <line x1="75" y1="70" x2="75" y2="5" stroke="red" fill="transparent" stroke-width="1" /> <polygon points="73 5,75 0,77 5" style="fill:transparent;stroke:red;stroke-width:1"> </svg> <!--分指针--> <svg id="svg_s2" width="150" height="150"> <circle cx="75" cy="75" r="4" stroke="green" fill="transparent" stroke-width="1" /> <line x1="75" y1="71" x2="75" y2="15" stroke="green" fill="transparent" stroke-width="2" /> <polygon points="73 15,75 10,77 15" style="fill:transparent;stroke:green;stroke-width:1"> </svg> <!--时指针--> <svg id="svg_s3" width="150" height="150"> <circle cx="75" cy="75" r="3" stroke="blue" fill="transparent" stroke-width="1" /> <line x1="75" y1="72" x2="75" y2="35" stroke="blue" fill="transparent" stroke-width="3" /> <polygon points="73 35,75 30,77 35" style="fill:transparent;stroke:blue;stroke-width:1"> </svg> </div> <!--数字时间--> <div id="digit_time"></div> </div> </body> </html>
