jQuery+CSS3实现黑色圆形时钟代码

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

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

以下是 jQuery+CSS3实现黑色圆形时钟代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery+CSS3实现黑色圆形时钟代码</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6_demo/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6_demo/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.3.6_demo/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.6_demo/jquery.easyui.min.js"></script>
<script language="JavaScript">
	$(document).ready(function clock(){
		var time = new Date();
		var hour = time.getHours();
		var minutes = time.getUTCMinutes();
		var second = time.getSeconds();
		var secondtime = second * 6;
		var minutestime = minutes * 6;
		var hourtime = hour * 30 + minutes/2;
			$(".second").css("-moz-transform","rotate(" + secondtime + "deg)");
			$(".minutes").css("-moz-transform","rotate(" + minutestime + "deg)");
			$(".hour").css("-moz-transform","rotate(" + hourtime + "deg)");
			$(".second").css("-ms-transform","rotate(" + secondtime + "deg)");
			$(".minutes").css("-ms-transform","rotate(" + minutestime + "deg)");
			$(".hour").css("-ms-transform","rotate(" + hourtime + "deg)");
			$(".second").css("-webkit-transform","rotate(" + secondtime + "deg)");
			$(".minutes").css("-webkit-transform","rotate(" + minutestime + "deg)");
			$(".hour").css("-webkit-transform","rotate(" + hourtime + "deg)");
			$(".second").css("-o-transform","rotate(" + secondtime + "deg)");
			$(".minutes").css("-o-transform","rotate(" + minutestime + "deg)");
			$(".hour").css("-o-transform","rotate(" + hourtime + "deg)");
		if(second%2 == 0){
			$(".top1").show();
			$(".top").hide();
		}else{
			$(".top1").hide();
			$(".top").show();
		}
		setTimeout(clock,1000)
		});
</script>
<style>
	.icon_clock{background-image: url("image/clock-icon.png");width: 700px;height:700px;margin: 0 auto;
		padding-top:50px; background-repeat: no-repeat}
	.hour{background-image: url("image/时针.png");width: 37px;height: 290px;background-repeat: no-repeat;margin-left:326px;;
		margin-top: 145px;display: block;position: absolute;z-index: 11;-moz-transform:rotate(45deg);
	}
	.second{;background-image: url("image/秒针.png");width: 37px;height: 330px;background-repeat: no-repeat;margin-left:326px;;
		margin-top: 125px;display: block;position: absolute;z-index: 13;-moz-transform:rotate(900deg);
	}
	.minutes{background-image: url("image/分针.png");width: 37px;height: 290px;background-repeat: no-repeat;margin-left:326px;;
	;margin-top: 145px;display: block;position: absolute;z-index: 12;  -moz-transform:rotate(60deg);
	}
	.top{position: absolute;z-index: 1;background-color: rgba(255, 0, 0, 0);background-image: url("image/12.png");background-repeat: no-repeat;
	width: 50px;height: 50px;margin-left: 321px;margin-top: 123px;}
	.top1{position: absolute;z-index: 2;background-color: rgba(255, 0, 0, 0);background-image: url("image/12.png");background-repeat: no-repeat;
	width: 50px;height: 50px;margin-left: 315px;margin-top: 110px;background-size: 120% 120%;display: none}
	.ball{position: absolute;z-index: 2;background-image: url("image/qiu.png");background-repeat: no-repeat;width: 255px;height: 50px;margin-left:215px;margin-top: 260px;
		animation:rond 3s infinite;background-color: rgba(255, 0, 0, 0);
		-webkit-animation:rond 3s infinite;}

	@keyframes rond {
		0% {transform : rotate(0deg);}
		100% {transform : rotate(360deg);}
	}

	@-webkit-keyframes rond {
		0%{-webkit-transform : rotate(0deg);}
		100%{-webkit-transform : rotate(360deg);}
	}
</style>
</head>
<body>

<div class="icon_clock">
	<div class="hour"></div>
	<div class="second" id="second"></div>
	<div class="minutes"></div>
	<div class="top"></div>
	<div class="top1"></div>
	<div class="ball"></div>
	<div class="top1"></div>
</div>
</body>
</html>

JS代码(easyloader.js):

/** * jQuery EasyUI 1.3.6 * * Copyright (c) 2009-2014 www.jeasyui.com. All rights reserved. * * Licensed under the GPL license:http://www.gnu.org/licenses/gpl.txt * To use it on other terms please contact us at info@jeasyui.com * */
(function(){
	var _1={
	draggable:{
	js:"jquery.draggable.js"}
,droppable:{
	js:"jquery.droppable.js"}
,resizable:{
	js:"jquery.resizable.js"}
,linkbutton:{
	js:"jquery.linkbutton.js",css:"linkbutton.css"}
,progressbar:{
	js:"jquery.progressbar.js",css:"progressbar.css"}
,tooltip:{
	js:"jquery.tooltip.js",css:"tooltip.css"}
,pagination:{
	js:"jquery.pagination.js",css:"pagination.css",dependencies:["linkbutton"]}
,datagrid:{
	js:"jquery.datagrid.js",css:"datagrid.css",dependencies:["panel","resizable","linkbutton","pagination"]}
,treegrid:{
	js:"jquery.treegrid.js",css:"tree.css",dependencies:["datagrid"]}
,propertygrid:{
	js:"jquery.propertygrid.js",css:"propertygrid.css",dependencies:["datagrid"]}
,panel:{
	js:"jquery.panel.js",css:"panel.css"}
,window:{
	js:"jquery.window.js",css:"window.css",dependencies:["resizable","draggable","panel"]}
,dialog:{
	js:"jquery.dialog.js",css:"dialog.css",dependencies:["linkbutton","window"]}
,messager:{
	js:"jquery.messager.js",css:"messager.css",dependencies:["linkbutton","window","progressbar"]}
,layout:{
	js:"jquery.layout.js",css:"layout.css",dependencies:["resizable","panel"]}
,form:{
	js:"jquery.form.js"}
,menu:{
	js:"jquery.menu.js",css:"menu.css"}
,tabs:{
	js:"jquery.tabs.js",css:"tabs.css",dependencies:["panel","linkbutton"]}
,menubutton:{
	js:"jquery.menubutton.js",css:"menubutton.css",dependencies:["linkbutton","menu"]}
,splitbutton:{
	js:"jquery.splitbutton.js",css:"splitbutton.css",dependencies:["menubutton"]}
,accordion:{
	js:"jquery.accordion.js",css:"accordion.css",dependencies:["panel"]}
,calendar:{
	js:"jquery.calendar.js",css:"calendar.css"}
,combo:{
	js:"jquery.combo.js",css:"combo.css",dependencies:["panel","validatebox"]}
,combobox:{
	js:"jquery.combobox.js",css:"combobox.css",dependencies:["combo"]}
,combotree:{
	js:"jquery.combotree.js",dependencies:["combo","tree"]}
,combogrid:{
	js:"jquery.combogrid.js",dependencies:["combo","datagrid"]}
,validatebox:{
	js:"jquery.validatebox.js",css:"validatebox.css",dependencies:["tooltip"]}
,numberbox:{
	js:"jquery.numberbox.js",dependencies:["validatebox"]}
,searchbox:{
	js:"jquery.searchbox.js",css:"searchbox.css",dependencies:["menubutton"]}
,spinner:{
	js:"jquery.spinner.js",css:"spinner.css",dependencies:["validatebox"]}
,numberspinner:{
	js:"jquery.numberspinner.js",dependencies:["spinner","numberbox"]}
,timespinner:{
	js:"jquery.timespinner.js",dependencies:["spinner"]}
,tree:{
	js:"jquery.tree.js",css:"tree.css",dependencies:["draggable","droppable"]}
,datebox:{
	js:"jquery.datebox.js",css:"datebox.css",dependencies:["calendar","combo"]}
,datetimebox:{
	js:"jquery.datetimebox.js",dependencies:["datebox","timespinner"]}
,slider:{
	js:"jquery.slider.js",dependencies:["draggable"]}
,tooltip:{
	js:"jquery.tooltip.js"}
,parser:{
	js:"jquery.parser.js"}
}
;
	var _2={
	"af":"easyui-lang-af.js","ar":"easyui-lang-ar.js","bg":"easyui-lang-bg.js","ca":"easyui-lang-ca.js","cs":"easyui-lang-cs.js","cz":"easyui-lang-cz.js","da":"easyui-lang-da.js","de":"easyui-lang-de.js","el":"easyui-lang-el.js","en":"easyui-lang-en.js","es":"easyui-lang-es.js","fr":"easyui-lang-fr.js","it":"easyui-lang-it.js","jp":"easyui-lang-jp.js","nl":"easyui-lang-nl.js","pl":"easyui-lang-pl.js","pt_BR":"easyui-lang-pt_BR.js","ru":"easyui-lang-ru.js","sv_SE":"easyui-lang-sv_SE.js","tr":"easyui-lang-tr.js","zh_CN":"easyui-lang-zh_CN.js","zh_TW":"easyui-lang-zh_TW.js"}
;
	var _3={
}
;
	function _4(_5,_6){
	var _7=false;
	var _8=document.createElement("script");
	_8.type="text/javascript";
	_8.language="javascript";
	_8.src=_5;
	_8.onload=_8.onreadystatechange=function(){
	if(!_7&&(!_8.readyState||_8.readyState=="loaded"||_8.readyState=="complete")){
	_7=true;
	_8.onload=_8.onreadystatechange=null;
	if(_6){
	_6.call(_8);
}
}
}
;
	document.getElementsByTagName("head")[0].appendChild(_8);
}
;
	function _9(_a,_b){
	_4(_a,function(){
	document.getElementsByTagName("head")[0].removeChild(this);
	if(_b){
	_b();
}
}
);
}
;
	function _c(_d,_e){
	var _f=document.createElement("link");
	_f.rel="stylesheet";
	_f.type="text/css";
	_f.media="screen";
	_f.href=_d;
	document.getElementsByTagName("head")[0].appendChild(_f);
	if(_e){
	_e.call(_f);
}
}
;
	function _10(_11,_12){
	_3[_11]="loading";
	var _13=_1[_11];
	var _14="loading";
	var _15=(easyloader.css&&_13["css"])?"loading":"loaded";
	if(easyloader.css&&_13["css"]){
	if(/^http/i.test(_13["css"])){
	var url=_13["css"];
}
else{
	var url=easyloader.base+"themes/"+easyloader.theme+"/"+_13["css"];
}
_c(url,function(){
	_15="loaded";
	if(_14=="loaded"&&_15=="loaded"){
	_16();
}
}
);
}
if(/^http/i.test(_13["js"])){
	var url=_13["js"];
}
else{
	var url=easyloader.base+"plugins/"+_13["js"];
}
_4(url,function(){
	_14="loaded";
	if(_14=="loaded"&&_15=="loaded"){
	_16();
}
}
);
	function _16(){
	_3[_11]="loaded";
	easyloader.onProgress(_11);
	if(_12){
	_12();
}
}
;
}
;
	function _17(_18,_19){
	var mm=[];
	var _1a=false;
	if(typeof _18=="string"){
	add(_18);
}
else{
	for(var i=0;
	i<_18.length;
	i++){
	add(_18[i]);
}
}
function add(_1b){
	if(!_1[_1b]){
	return;
}
var d=_1[_1b]["dependencies"];
	if(d){
	for(var i=0;
	i<d.length;
	i++){
	add(d[i]);
}
}
mm.push(_1b);
}
;
	function _1c(){
	if(_19){
	_19();
}
easyloader.onLoad(_18);
}
;
	var _1d=0;
	function _1e(){
	if(mm.length){
	var m=mm[0];
	if(!_3[m]){
	_1a=true;
	_10(m,function(){
	mm.shift();
	_1e();
}
);
}
else{
	if(_3[m]=="loaded"){
	mm.shift();
	_1e();
}
else{
	if(_1d<easyloader.timeout){
	_1d+=10;
	setTimeout(arguments.callee,10);
}
}
}
}
else{
	if(easyloader.locale&&_1a==true&&_2[easyloader.locale]){
	var url=easyloader.base+"locale/"+_2[easyloader.locale];
	_9(url,function(){
	_1c();
}
);
}
else{
	_1c();
}
}
}
;
	_1e();
}
;
	easyloader={
	modules:_1,locales:_2,base:".",theme:"default",css:true,locale:null,timeout:2000,load:function(_1f,_20){
	if(/\.css$/i.test(_1f)){
	if(/^http/i.test(_1f)){
	_c(_1f,_20);
}
else{
	_c(easyloader.base+_1f,_20);
}
}
else{
	if(/\.js$/i.test(_1f)){
	if(/^http/i.test(_1f)){
	_4(_1f,_20);
}
else{
	_4(easyloader.base+_1f,_20);
}
}
else{
	_17(_1f,_20);
}
}
}
,onProgress:function(_21){
}
,onLoad:function(_22){
}
}
;
	var _23=document.getElementsByTagName("script");
	for(var i=0;
	i<_23.length;
	i++){
	var src=_23[i].src;
	if(!src){
	continue;
}
var m=src.match(/easyloader\.js(\W|$)/i);
	if(m){
	easyloader.base=src.substring(0,m.index);
}
}
window.using=easyloader.load;
	if(window.jQuery){
	jQuery(function(){
	easyloader.load("parser",function(){
	jQuery.parser.parse();
}
);
}
);
}
}
)();

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