jquery css 时间,jQuery+css实现的时钟效果(兼容各浏览器)

本文实例讲述了jQuery+css实现的时钟效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

这里没有做太多的修饰，简单的实现了一下功能，另外，用的是js的setTimeout方法，当时间长了之后，会有一定的延时，建议，在每隔多少分钟执行一次时钟校准！哈哈，都有误差的嘛，反正我是没给你校。

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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('

');

minute.push(text);

minute.push('

');

wrapper.append(minute.join(''));

}

function createHour(po, r, text) {

var minute = [];

minute.push('

');

minute.push(text);

minute.push('

');

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('

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('

');

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);

});

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; }

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》

希望本文所述对大家jQuery程序设计有所帮助。