jQuery+css實(shí)現(xiàn)的時(shí)鐘效果(兼容各瀏覽器)
更新時(shí)間：2016年01月27日 15:42:33 作者：m1870164
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的時(shí)鐘效果,使用js的setTimeout方法實(shí)時(shí)修改頁(yè)面元素,實(shí)現(xiàn)動(dòng)態(tài)顯示時(shí)鐘的功能.該代碼可兼容各瀏覽器,需要的朋友可以參考下
本文實(shí)例講述了jQuery+css實(shí)現(xiàn)的時(shí)鐘效果。分享給大家供大家參考，具體如下：
運(yùn)行效果截圖如下：
這里沒(méi)有做太多的修飾，簡(jiǎn)單的實(shí)現(xiàn)了一下功能，另外，用的是js的setTimeout方法，當(dāng)時(shí)間長(zhǎng)了之后，會(huì)有一定的延時(shí)，建議，在每隔多少分鐘執(zhí)行一次時(shí)鐘校準(zhǔn)！哈哈，都有誤差的嘛，反正我是沒(méi)給你校。
具體代碼如下：
<!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);
}
}
// 查看當(dāng)前時(shí)間
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("當(dāng)前時(shí)間-" + 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>
更多關(guān)于jQuery特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見經(jīng)典特效匯總》及《jQuery動(dòng)畫與特效用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jquery+html5時(shí)鐘特效代碼分享（可設(shè)置鬧鐘并且語(yǔ)音提醒）
- jquery+html5制作超酷的圓盤時(shí)鐘表
- jquery制作LED 時(shí)鐘特效
- jquery制作圖片時(shí)鐘特效
- jquery模擬LCD 時(shí)鐘的html文件源代碼
- 基于jQuery和CSS3制作數(shù)字時(shí)鐘附源碼下載(jquery篇)
- jQuery超酷平面式時(shí)鐘效果代碼分享
- jQuery CSS3相結(jié)合實(shí)現(xiàn)時(shí)鐘插件
- 基于Jquery和CSS3制作數(shù)字時(shí)鐘附源碼下載(CSS3篇)
- jQuery實(shí)現(xiàn)的電子時(shí)鐘效果完整示例
相關(guān)文章
本代碼將實(shí)現(xiàn)以下樣式及功能：日歷標(biāo)題背景色、日歷標(biāo)題字體色、日歷背景色、日歷字體色、假日字體色、背景水印色、是否顯示上月和下月的日期，感興趣的朋友可以了解下哈2013-04-04
jQuery-1.9.1源碼分析系列（十）事件系統(tǒng)之事件體系結(jié)構(gòu)
這篇文章主要介紹了jQuery-1.9.1源碼分析系列（十）事件系統(tǒng)之事件體系結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2015-11-11
本篇文章主要介紹了JQuery實(shí)現(xiàn)圖片輪播效果的制作原理以及實(shí)現(xiàn)代碼，文章末尾附上源碼下載，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05
詳解jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法
這篇文章主要介紹了jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法，需要的朋友可以參考下2015-11-11
JQuery實(shí)現(xiàn)定時(shí)刷新功能代碼
在網(wǎng)頁(yè)開發(fā)中，經(jīng)常會(huì)需要不斷的刷新某個(gè)頁(yè)面或某個(gè)局部數(shù)據(jù)。這時(shí)候就需要用到定時(shí)刷新來(lái)實(shí)現(xiàn)了。接下來(lái)通過(guò)本文給大家分享jquery實(shí)現(xiàn)定時(shí)刷新功能，需要的朋友參考下吧2017-05-05
本文給大家匯總了2014年最熱門的9款jQuery特效插件，小伙伴們根據(jù)自己的需求直接帶走吧。2014-12-12
jquery.validate表單驗(yàn)證插件使用詳解
這篇文章主要為大家詳細(xì)介紹了jquery.validate表單驗(yàn)證插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06![jQuery學(xué)習(xí)筆記[1] jQuery中的DOM操作](http://img.jbzj.com/images/xgimg/bcimg7.png)
jQuery學(xué)習(xí)筆記[1] jQuery中的DOM操作
jQuery中的DOM操作實(shí)現(xiàn)說(shuō)明，學(xué)習(xí)DOM操作的朋友可以參考下。2010-12-12
jQuery循環(huán)滾動(dòng)展示代碼 可應(yīng)用到文字和圖片上
循環(huán)滾動(dòng)展示的文字和圖片每個(gè)人都見過(guò)，實(shí)現(xiàn)類似效果的 JS 也很多。但如果只用于幾個(gè)條目或三五張圖片，體積龐大的 JS 會(huì)浪費(fèi)資源2012-05-05
深入學(xué)習(xí)jQuery Validate表單驗(yàn)證（二）
這篇文章主要針對(duì)jQuery Validate表單驗(yàn)證為大家進(jìn)行詳細(xì)介紹，通過(guò)name屬性來(lái)關(guān)聯(lián)字段來(lái)驗(yàn)證，改變默認(rèn)的提示信息，將校驗(yàn)規(guī)則寫到j(luò)s代碼中，感興趣的小伙伴們可以參考一下2016-01-01