Posted in Javascript onJanuary 27, 2016
本文实例讲述了jQuery+css实现的时钟效果。分享给大家供大家参考，具体如下：
运行效果截图如下：
这里没有做太多的修饰，简单的实现了一下功能，另外，用的是js的setTimeout方法，当时间长了之后，会有一定的延时，建议，在每隔多少分钟执行一次时钟校准！哈哈，都有误差的嘛，反正我是没给你校。
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" >
var addRadian = Math.PI / 30;
var wrapper = null;
var minutes = 0;
var hours = 0;
var secondsLineLength = 14;
var secondLineLength = 20;
function cloneObj(obj1) {
var tempObj = {};
for (var i in obj1) {
if (obj1.hasOwnProperty(i)) {
tempObj[i] = obj1[i];
}
}
return tempObj;
}
function createMinute(po, r, text) {
var minute = [];
minute.push('<div class="minute" style="left:');
minute.push(po.x);
minute.push('px; top:');
minute.push(po.y);
minute.push('px;" >');
minute.push(text);
minute.push('</div>');
wrapper.append(minute.join(''));
}
function createHour(po, r, text) {
var minute = [];
minute.push('<div class="hour" style="left:');
minute.push(po.x);
minute.push('px; top:');
minute.push(po.y);
minute.push('px;" >');
minute.push(text);
minute.push('</div>');
wrapper.append(minute.join(''));
}
function initSeconds(text, center, range) {
var now_seconds = new Date().getSeconds();
now_seconds = now_seconds > 0 ? now_seconds - 1 : 0;
for (var i = 0; i < secondsLineLength + 1; i++) {
createFlower(center, '●', range, (i + 1) * secondLineLength, Math.PI / 2 + (now_seconds) * addRadian, true, i == secondsLineLength ? true : false);
}
}
function initMinutes(r, text, center) {
var x = 0,
y = 0;
for (var i = 0; i < 60; i++) {
x = center.x - Math.cos(Math.PI / 2 + i * addRadian) * (r + secondLineLength);
y = center.y - Math.sin(Math.PI / 2 + i * addRadian) * (r + secondLineLength);
createMinute({x: x,y: y}, r, text);
}
minutes = new Date().getMinutes();
waldedMinute(minutes);
}
function initHours(r, text, center) {
var x = 0,
y = 0;
for (var i = 0; i < 60; i+=5) {
x = center.x - Math.cos(Math.PI / 2 + i * addRadian) * (r + secondLineLength);
y = center.y - Math.sin(Math.PI / 2 + i * addRadian) * (r + secondLineLength);
createHour({ x: x, y: y }, r, text);
}
hours = new Date().getHours();
waldedHour(hours);
}
function waldedMinute(index) {
var index = Math.floor((index % 60)) > 0 ? Math.floor((index % 60)) + 1 : 0;
wrapper.find(".minute:lt(" + index + ")").css('color', "green");
if (index > 0) {
wrapper.find(".minute:eq(0)").css('color', '#DDDDDD');
}
}
function waldedHour(index) {
var index = Math.floor((index%12)) > 0 ? Math.floor((index%12)) + 1:0;
wrapper.find(".hour:lt(" + index + ")").css('color', "green");
if(index > 0) {
wrapper.find(".hour:eq(0)").css('color', '#494949');
}
}
function animation(obj, r, radian, range, center, text, last) {
logNowTime();
radian += addRadian;
var x = center.x - Math.cos(radian) * r;
var y = center.y - Math.sin(radian) * r;
obj.css({ "left": x, "top": y });
if (last && radian > Math.PI * 5 / 2 - 0.1) {
radian = Math.PI / 2;
minutes++;
if (minutes < 60) {
} else {
if (minutes % 60 == 0) {
hours++;
if (hours % 12 != 0) {
} else {
wrapper.find(".hour").css('color', "#494949");
}
waldedHour(hours);
} else {
wrapper.find(".minute").css('color', "#DDDDDD");
}
}
waldedMinute(minutes);
}
setTimeout(function () {
animation(obj, r, radian, range, center, text, last);
}, 1000);
}
function createFlower(center, text, range, r, radian, autoAnimate, last) {
var flower = [];
flower.push('<div class="second"');
flower.push(' style="left:');
flower.push(center.x);
flower.push('px; top:');
flower.push(center.y);
flower.push('px;');
flower.push(autoAnimate ? '" >' : 'color:red;" >');
flower.push(text);
flower.push('</div>');
flower = $(flower.join(''));
flower.appendTo(wrapper);
//var r = (index + 1) * secondLineLength;
if (autoAnimate) {
animation(flower, r, radian, range, center, text, last);
}
}
// 查看当前时间
function logNowTime() {
var date = new Date(),
hour = date.getHours(),
minute = date.getMinutes(),
second = date.getSeconds();
hour = hour < 10 ? "0" + hour : hour;
minute = minute < 10 ? "0" + minute : minute;
second = second < 10 ? "0" + second : second;
$("#time").html("当前时间-" + hour + ":" + minute + ":" + second);
}
$(document).ready(function () {
wrapper = $("#wrapper"),
width = wrapper.width(),
height = wrapper.height(),
offLeft = parseInt(wrapper.offset().left),
range = {
x: offLeft,
y: 0,
x1: offLeft + width,
y1: height
},
center = {
x: Math.round(width / 2) + offLeft,
y: Math.round(height / 2)
};
initHours(secondLineLength * secondsLineLength + 40, '●', center);
initMinutes(secondLineLength * secondsLineLength + 20, '●', center);
initSeconds('●', center, range);
});
</script>
<style type="text/css" >
body { margin:0; padding:0; }
#wrapper { margin:0 auto; width:1000px; height:780px; background:black; }
.second { width:12px; height:12px; position:absolute; text-shadow:1px 1px 1px green; color:Green; }
.minute { color:#DDDDDD; position:absolute;}
.hour { color:#494949; position:absolute;}
#time { font-size:30px; line-height:30px; text-shadow:2px 2px 2px green; text-align:center; }
</style>
</head>
<body>
<div id="time"></div>
<div id="wrapper" >
</div>
</body>
</html>
希望本文所述对大家jQuery程序设计有所帮助。
jQuery+css实现的时钟效果(兼容各浏览器)
- Author -
m1870164声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@