<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700" type="text/css"> <title>CSS3时钟</title> <style> body { /*background-color: #ccc;*/ } ol,ul { margin: 0; padding: 0; list-style: none; } h1{ text-align: center; color: #333; margin-top: 40px; font-family: ‘Microsoft Yahei‘; } .clock{ position: relative; width: 200px; height: 200px; border-radius: 100%; background-color: #292a38; margin: 50px auto; } .pointer li.circle{ position: absolute; top: 50%; left: 50%; transform-origin: left center; background:#fff; width: 10px; height: 10px; border-radius: 100%; margin-top: -5px; margin-left: -5px; } /*.line-demo{ position: absolute; left: 50%; top: 50%; transform: rotate(-60deg) translate(75px,-50%); transform-origin: left center; width: 20px; height: 10px; background-color: red; z-index: 1; } */ /*刻度*/ .line-hour li,.line-min li{ position: absolute; left: 50%; top: 50%; transform-origin:left center; background-color: #fff; } .line-hour li{ width: 10px; height: 2px; } .line-min li{ width: 5px; height: 2px; } /*数字*/ .number { position: absolute; height: 150px; width: 150px; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: ‘Microsoft Yahei‘; font-size: 15px; color: #fff; } .number li { position: absolute; transform: translate(-50%, -50%); } /*指针*/ .pointer li{ position: absolute; top: 50%; left: 50%; transform-origin: left center; background:#fff; } .pointer li.hour{ width: 45px; height: 3px; margin-top: -1px; } .pointer li.min{ width: 60px; height: 2px; margin-top: -1px; } .pointer li.sec{ width: 45px; height: 3px; margin-top: -1px; } </style> </head> <body> <h1>css 始终效果演示</h1> <div class="clock"> <ul class="line-min"></ul> <ul class="line-hour"> <li class="line-demo"></li> </ul> <ol class="number"></ol> <ul class="pointer"> <li class="hour"></li> <li class="min"></li> <li class="sec"></li> <li class="circle"></li> </ul> </div> <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script> <script> $(function(){ function init(){ drawLines($(‘.line-min‘),60,85); drawLines($(‘.line-hour‘),12,80); drawNumbers($(‘.number‘)); move(); } init(); // 绘制钟表刻度线 //@param wrap 刻度线的父容器 //@param total 刻度线的总个数 //@param translateX 刻度线在x轴方向的偏移量 function drawLines(wrap,total,translateX){ var gap = 360/total; var strHtml = ""; for(var i=0;i<total;i++){ strHtml += ‘<li style="transform:rotate(‘+(i*gap)+‘deg)translate(‘+translateX+‘px,-50%)"></li>‘; } wrap.html(strHtml); } // 绘制时钟数字 //@param wrap 数字的父容器 function drawNumbers(wrap){ var radius = wrap.width() / 2; var strHtml = ‘‘; for(var i=1;i<=12;i++){ var myAngle = (i-3)/6 * Math.PI; var myX = radius + radius*Math.cos(myAngle), //x= r+rcos(0) myY = radius + radius*Math.sin(myAngle); //y= r+rsin(0) strHtml += ‘<li style="left:‘ + myX + ‘px; top:‘ +myY + ‘px">‘ +i + ‘</li>‘; } wrap.html(strHtml); } //钟表走动,转动秒针、分针、时针 function move(){ //获取指针 var domHour = $(‘.hour‘), domMin = $(‘.min‘), domSec = $(‘.sec‘); setInterval(function(){ var now = new Date(), hour = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); var secAngle = sec*6 - 90, minAngle = min*6 + sec*0.1 - 90, hourAngle = hour*30 + min*0.5 - 90; domSec.css(‘transform‘,‘rotate(‘+secAngle+‘deg)‘); domMin.css(‘transform‘,‘rotate(‘+minAngle+‘deg)‘); domHour.css(‘transform‘,‘rotate(‘+hourAngle+‘deg)‘); document.title = hour + ‘:‘ + min + ‘:‘ +sec; },1000); } }) </script> </body> </html>
原文地址:https://www.cnblogs.com/Byme/p/8331323.html
时间: 2024-11-02 22:42:51