The example of this article describes the clock effect of JQUERY+CSS implementation. Share to everyone for your reference, specific as follows:
The screenshot of the running effect is as follows:
Here did not do too much modification, simple implementation of the function, in addition, with the SetTimeout method of JS, when the time is long, there will be a certain delay, it is recommended that in every number of minutes to perform a clock calibration! Haha, there are errors, anyway, I did not give you the school.
The specific code is as follows:
<! 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);
}
}
// View the current time
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 ("Current time-" + 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>
More about jquery effects related content readers can view the site topics: "jquery Common Classic Effects summary" and "jquery animation and special effects usage Summary"
I hope this article will help you with the jquery program design.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
