基于jQuery的时钟特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是基于jQuery的时钟特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Sc.Chinaz.Com</title>

<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzineClock/jquery.tzineClock.css" />

<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript" src="jquery.tzineClock/jquery.tzineClock.js"></script>

<script type="text/javascript" src="script.js"></script>

</head>

<body>
<div id="fancyClock"></div>
</body>
</html>

JS代码(jquery.tzineClock.js):

/*! * jquery.tzineClock.js - Tutorialzine Colorful Clock Plugin * * Copyright (c) 2009 Martin Angelov * http://tutorialzine.com/ * * Licensed under MIT * http://www.opensource.org/licenses/mit-license.php * * Launch:December 2009 * Version:1.0 * Released:Monday 28th December,2009 - 00:00 */
(function($){
	// A global array used by the functions of the plug-in:var gVars ={
}
;
	// Extending the jQuery core:$.fn.tzineClock = function(opts){
	// "this" contains the elements that were selected when calling the plugin:$('elements').tzineClock();
	// If the selector returned more than one element,use the first one:var container = this.eq(0);
	if(!container){
	try{
	console.log("Invalid selector!");
}
catch(e){
}
return false;
}
if(!opts) opts ={
}
;
	var defaults ={
	/* Additional options will be added in future versions of the plugin. */
}
;
	/* Merging the provided options with the default ones (will be used in future versions of the plugin):*/
$.each(defaults,function(k,v){
	opts[k] = opts[k] || defaults[k];
}
)// Calling the setUp function and passing the container,// will be available to the setUp function as "this":setUp.call(container);
	return this;
}
function setUp(){
	// The colors of the dials:var colors = ['orange','blue','green'];
	var tmp;
	for(var i=0;
	i<3;
	i++){
	// Creating a new element and setting the color as a class name:tmp = $('<div>').attr('class',colors[i]+' clock').html('<div class="display"></div>'+'<div class="front left"></div>'+'<div class="rotate left">'+'<div class="bg left"></div>'+'</div>'+'<div class="rotate right">'+'<div class="bg right"></div>'+'</div>');
	// Appending to the container:$(this).append(tmp);
	// Assigning some of the elements as variables for speed:tmp.rotateLeft = tmp.find('.rotate.left');
	tmp.rotateRight = tmp.find('.rotate.right');
	tmp.display = tmp.find('.display');
	// Adding the dial as a global variable. Will be available as gVars.colorNamegVars[colors[i]] = tmp;
}
// Setting up a interval,executed every 1000 milliseconds:setInterval(function(){
	var currentTime = new Date();
	var h = currentTime.getHours();
	var m = currentTime.getMinutes();
	var s = currentTime.getSeconds();
	animation(gVars.green,s,60);
	animation(gVars.blue,m,60);
	animation(gVars.orange,h,24);
}
,1000);
}
function animation(clock,current,total){
	// Calculating the current angle:var angle = (360/total)*(current+1);
	var element;
	if(current==0){
	// Hiding the right half of the background:clock.rotateRight.hide();
	// Resetting the rotation of the left part:rotateElement(clock.rotateLeft,0);
}
if(angle<=180){
	// The left part is rotated,and the right is currently hidden:element = clock.rotateLeft;
}
else{
	// The first part of the rotation has completed,so we start rotating the right part:clock.rotateRight.show();
	clock.rotateLeft.show();
	rotateElement(clock.rotateLeft,180);
	element = clock.rotateRight;
	angle = angle-180;
}
rotateElement(element,angle);
	// Setting the text inside of the display element,inserting a leading zero if needed:clock.display.html(current<10?'0'+current:current);
}
function rotateElement(element,angle){
	// Rotating the element,depending on the browser:var rotate = 'rotate('+angle+'deg)';
	if(element.css('MozTransform')!=undefined)element.css('MozTransform',rotate);
	else if(element.css('WebkitTransform')!=undefined)element.css('WebkitTransform',rotate);
	// A version for internet explorer using filters,works but is a bit buggy (no surprise here):else if(element.css("filter")!=undefined){
	var cos = Math.cos(Math.PI * 2 / 360 * angle);
	var sin = Math.sin(Math.PI * 2 / 360 * angle);
	element.css("filter","progid:DXImageTransform.Microsoft.Matrix(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',FilterType='nearest neighbor')");
	element.css("left",-Math.floor((element.width()-200)/2));
	element.css("top",-Math.floor((element.height()-200)/2));
}
}
}
)(jQuery)

JS代码(script.js):

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
$('#fancyClock').tzineClock();
}
);

CSS代码(jquery.tzineClock.css):

.clock{/* The .clock div. Created dynamically by jQuery */
background-color:#252525;height:200px;width:200px;position:relative;overflow:hidden;float:left;}
.clock .rotate{/* There are two .rotate divs - one for each half of the background */
position:absolute;width:200px;height:200px;top:0;left:0;}
.rotate.right{display:none;z-index:11;}
.clock .bg,.clock .front{width:100px;height:200px;background-color:#252525;position:absolute;top:0;}
.clock .display{/* Holds the number of seconds,minutes or hours respectfully */
position:absolute;width:200px;font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;z-index:20;color:#F5F5F5;font-size:60px;text-align:center;top:65px;left:0;/* CSS3 text shadow:*/
text-shadow:4px 4px 5px #333333;}
/* The left part of the background:*/
.clock .bg.left{left:0;}
/* Individual styles for each color:*/
.orange .bg.left{background:url(img/bg_orange.png) no-repeat left top;}
.green .bg.left{background:url(img/bg_green.png) no-repeat left top;}
.blue .bg.left{background:url(img/bg_blue.png) no-repeat left top;}
/* The right part of the background:*/
.clock .bg.right{left:100px;}
.orange .bg.right{background:url(img/bg_orange.png) no-repeat right top;}
.green .bg.right{background:url(img/bg_green.png) no-repeat right top;}
.blue .bg.right{background:url(img/bg_blue.png) no-repeat right top;}
.clock .front.left{left:0;z-index:10;}

CSS代码(styles.css):

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{/* Simple page reset */
margin:0;padding:0;}
body{/* Setting default text color,background and a font stack */
color:#dddddd;font-size:13px;background:#302b23;font-family:Arial,Helvetica,sans-serif;}
#fancyClock{margin:40px auto;height:200px;border:1px solid #111111;width:600px;}
/* The styles below are only necessary for the demo page */
h1{background-color:#222222;border-bottom:1px solid black;font-family:"Myriad Pro",Arial,Helvetica,sans-serif;font-size:20px;font-weight:normal;margin-bottom:15px;padding:15px;text-align:center;}
h2{font-family:"Myriad Pro",Arial,Helvetica,sans-serif;font-size:12px;font-weight:normal;padding-right:140px;position:relative;right:0;text-align:right;text-transform:uppercase;top:-48px;}
a,a:visited{color:#0196e3;text-decoration:none;outline:none;}
a:hover{text-decoration:underline;}
p.tutInfo{/* The tutorial info on the bottom of the page */
padding:10px 0;text-align:center;position:absolute;bottom:0px;background-color:#222222;border-top:1px solid black;width:100%;}

附件:下载该文件资源,减少时间成本(增值服务)