经验分享程序开发文档资料数据资源其它资源

15款基于canvas时钟特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

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

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图1:

15款基于canvas时钟特效代码

部分效果截图2:

15款基于canvas时钟特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15款基于canvas时钟特效</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
</head>
<body>

<div class="zzsc-content">
	<canvas id="clock1_" width="200px" height="200px">
	</canvas>
	<canvas id="clock2_" width="200px" height="200px">
	</canvas>
	<canvas id="clock3_" width="200px" height="200px">
	</canvas>
	<canvas id="clock4_" width="200px" height="200px">
	</canvas>
	<canvas id="clock5_" width="200px" height="200px">
	</canvas>
	<canvas id="clock6_" width="200px" height="200px">
	</canvas>
	<canvas id="clock7_" width="200px" height="200px">
	</canvas>
	<canvas id="clock8_" width="200px" height="200px">
	</canvas>
	<canvas id="clock9_" width="200px" height="200px">
	</canvas>
	<canvas id="clock10_" width="200px" height="200px">
	</canvas>
	<canvas id="clock11_" width="200px" height="200px">
	</canvas>
	<canvas id="clock12_" width="200px" height="200px">
	</canvas>
	<canvas id="clock13_" width="200px" height="200px">
	</canvas>
	<canvas id="clock14_" width="200px" height="200px">
	</canvas>
	<canvas id="clock15_" width="200px" height="200px">
	</canvas>
</div>

<script src="js/canvas_clock.js"></script>
<script>
	  clockd1_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_24h": true,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd2_={
			  "indicate": true,
			  "dial1_color": "#666600",
			  "time_24h": true,
			  "timeoffset":0,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd3_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_24h": true,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd4_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd5_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_24h": true,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd6_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_add_color": "#ccc",
			  "time_24h": true,
			  "timeoffset":0,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd7_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_24h": true,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd8_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_24h": true,
			  "date_add":5,
			  "date_add_color": "#999",
			 };
	  clockd9_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_24h": true,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd10_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_24h": true,
			  "track": "#4b4b00",
			 };
	  clockd11_={
			  "dial1_color": "#666600",
			  "time_24h": true,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd12_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_24h": true,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd13_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_24h": true,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd14_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "time_add": 1,
			  "time_24h": true,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd15_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_24h": true,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	 
	  var c = document.getElementById('clock1_');
	  cns1_ = c.getContext('2d');
	  var c = document.getElementById('clock2_');
	  cns2_ = c.getContext('2d');
	  var c = document.getElementById('clock3_');
	  cns3_ = c.getContext('2d');
	  var c = document.getElementById('clock4_');
	  cns4_ = c.getContext('2d');
	  var c = document.getElementById('clock5_');
	  cns5_ = c.getContext('2d');
	  var c = document.getElementById('clock6_');
	  cns6_ = c.getContext('2d');
	  var c = document.getElementById('clock7_');
	  cns7_ = c.getContext('2d');
	  var c = document.getElementById('clock8_');
	  cns8_ = c.getContext('2d');
	  var c = document.getElementById('clock9_');
	  cns9_ = c.getContext('2d');
	  var c = document.getElementById('clock10_');
	  cns10_ = c.getContext('2d');
	  var c = document.getElementById('clock11_');
	  cns11_ = c.getContext('2d');
	  var c = document.getElementById('clock12_');
	  cns12_ = c.getContext('2d');
	  var c = document.getElementById('clock13_');
	  cns13_ = c.getContext('2d');
	  var c = document.getElementById('clock14_');
	  cns14_ = c.getContext('2d');
	  var c = document.getElementById('clock15_');
	  cns15_ = c.getContext('2d');
		
	  clock_conti(200,cns1_,clockd1_);
	  clock_digital(200,cns2_,clockd2_);
	  clock_norm(200,cns3_,clockd3_);
	  clock_binary(200,cns4_,clockd4_);
	  clock_follow(200,cns5_,clockd5_);
	  clock_circles(200,cns6_,clockd6_);
	  clock_dots(200,cns7_,clockd7_);
	  clock_roulette(200,cns8_,clockd8_);
	  clock_num(200,cns9_,clockd9_);
	  clock_planets(200,cns10_,clockd10_);
	  clock_digitalran(200,cns11_,clockd11_);
	  clock_bars(200,cns12_,clockd12_);
	  clock_grow(200,cns13_,clockd13_);
	  clock_random(200,cns14_,clockd14_);
	  clock_reverse(200,cns15_,clockd15_);
</script>
</body>
</html>

JS代码(canvas_clock.js):

/** Name:canvas_clock.js* Author:Michael Kruger* Brief:** This is a canvas based library with 15 different clocks that can be embedded in webpages.* For more info please visit:www.krugaroo.com#canvasClock** Copyright 2016 Krugaroo* More Info:www.krugaroo.com#canvasClock** License:MIT License** Copyright (c) 2016 Michael Kruger,Krugaroo** Permission is hereby granted,free of charge,to any person obtaining a copy* of this software and associated documentation files (the "Software"),to deal* in the Software without restriction,including without limitation the rights* to use,copy,modify,merge,publish,distribute,sublicense,and/or sell* copies of the Software,and to permit persons to whom the Software is* furnished to do so,subject to the following conditions:** The above copyright notice and this permission notice shall be included in* all copies or substantial portions of the Software.** THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,EXPRESS OR* IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER* LIABILITY,WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN* THE SOFTWARE.*/
day_arr=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
	month_arr=["January","February","March","April","May","June","July","August","September","October","November","December"];
	function clock_conti(size,cns,clockd){
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
if((clockd.hasOwnProperty("indicate") && clockd.indicate==true) || !clockd.hasOwnProperty("indicate")){
	indicator(size,cns,clockd);
}
if(clockd.hasOwnProperty("time_add") && clockd.time_add){
	time_add((size/2),size/5*3,size,cns,clockd);
}
if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/5*3+size/10,size,cns,clockd);
}
var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var milisec=now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours()%12;
	cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=1;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/3,-1.57+sec*0.1046+milisec/1000*0.1046,-1.569+sec*0.1046+milisec/1000*0.1046,0);
	cns.stroke();
	cns.closePath();
	cns.beginPath();
	cns.lineWidth=1;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/15,1.57+sec*0.1046+milisec/1000*0.1046,1.569+sec*0.1046+milisec/1000*0.1046,1);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=2;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/3,-1.57+min*0.1046+sec/60*0.1046,-1.569+min*0.1046+sec/60*0.1046,0);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=3;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/4,-1.57+hour*0.523+min/60*0.523,-1.569+hour*0.523+min/60*0.523,0);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=2;
	cns.arc((size/2),(size/2),size/80,0,6.28,0);
	cns.fill();
	cns.closePath();
	clockd.timer=setTimeout(function(){
	clock_conti(size,cns,clockd)}
,50);
}
function clock_digital(size,cns,clockd){
	var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var milisec=now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours();
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
if(hour<10){
	hour="0"+hour;
}
if(min<10){
	min="0"+min;
}
if(sec<10){
	sec="0"+sec;
}
cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333";
	cns.textBaseline="middle";
	cns.textAlign="center";
	cns.font=size/8+"px Arial";
	cns.fillText(hour+":"+min+":"+sec,(size/2),size/2.5);
	if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/5*3+size/10,size,cns,clockd);
}
clockd.timer=setTimeout(function(){
	clock_digital(size,cns,clockd)}
,50);
}
function clock_reverse(size,cns,clockd){
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
if((clockd.hasOwnProperty("indicate") && clockd.indicate==true) || !clockd.hasOwnProperty("indicate")){
	indicator(size,cns,clockd);
}
if(clockd.hasOwnProperty("time_add") && clockd.time_add){
	time_add((size/2),size/5*3,size,cns,clockd);
}
if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/5*3+size/10,size,cns,clockd);
}
var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var milisec=now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours()%12;
	cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=1;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/3,-1.57-sec*0.1046,-1.569-sec*0.1046,0);
	cns.stroke();
	cns.closePath();
	cns.beginPath();
	cns.lineWidth=1;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/15,1.57-sec*0.1046,1.569-sec*0.1046,1);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=2;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/3,-1.57-min*0.1046,-1.569-min*0.1046,0);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=3;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/4,-1.57-hour*0.523-min/60*0.523,-1.569-hour*0.523-min/60*0.523,0);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=2;
	cns.arc((size/2),(size/2),size/80,0,6.28,0);
	cns.fill();
	cns.closePath();
	clockd.timer=setTimeout(function(){
	clock_reverse(size,cns,clockd)}
,50);
}
function clock_norm(size,cns,clockd){
	var br=[60,120,180];
	var r2=[10,20,30];
	var r3=[40,80,120];
	var r4=[4,5,7];
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
if((clockd.hasOwnProperty("indicate") && clockd.indicate==true) || !clockd.hasOwnProperty("indicate")){
	indicator(size,cns,clockd);
}
if(clockd.hasOwnProperty("time_add") && clockd.time_add){
	time_add((size/2),size/5*3,size,cns,clockd);
}
if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/5*3+size/10,size,cns,clockd);
}
var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var milisec=now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours()%12;
	cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=1;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/3,-1.57+sec*0.1046,-1.569+sec*0.1046,0);
	cns.stroke();
	cns.closePath();
	cns.beginPath();
	cns.lineWidth=1;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/15,1.57+sec*0.1046,1.569+sec*0.1046,1);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=2;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/3,-1.57+min*0.1046,-1.569+min*0.1046,0);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=3;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/4,-1.57+hour*0.523+min/60*0.523,-1.569+hour*0.523+min/60*0.523,0);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=2;
	cns.arc((size/2),(size/2),size/60,0,6.28,0);
	cns.fill();
	cns.closePath();
	clockd.timer=setTimeout(function(){
	clock_norm(size,cns,clockd)}
,50);
}
function clock_follow(size,cns,clockd){
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
if((clockd.hasOwnProperty("indicate") && clockd.indicate==true) || !clockd.hasOwnProperty("indicate")){
	indicator(size,cns,clockd);
}
var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var milisec=now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours()%12;
	cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=1;
	cns.arc((size/2),(size/2),size/3,-1.57,-1.569+sec*0.1046+milisec/1000*0.1046,0);
	cns.lineTo((size/2),(size/2));
	cns.stroke();
	cns.closePath();
	cns.beginPath();
	cns.lineWidth=1;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/17,1.57+sec*0.1046+milisec/1000*0.1046,1.569+sec*0.1046+milisec/1000*0.1046,1);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.beginPath();
	cns.lineWidth=2;
	cns.arc((size/2),(size/2),size/3.5,-1.57,-1.569+min*0.1046+sec/60*0.1046,0);
	cns.lineTo((size/2),(size/2));
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.beginPath();
	cns.lineWidth=2;
	cns.arc((size/2),(size/2),size/4.5,-1.57,-1.569+hour*0.523+min/60*0.523,0);
	cns.lineTo((size/2),(size/2));
	cns.stroke();
	cns.closePath();
	cns.beginPath();
	cns.lineWidth=2;
	cns.arc((size/2),(size/2),size/60,0,6.28,0);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("time_add") && clockd.time_add){
	time_add((size/2),size/5*3,size,cns,clockd);
}
if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/5*3+size/15,size,cns,clockd);
}
clockd.timer=setTimeout(function(){
	clock_follow(size,cns,clockd)}
,50);
}
function clock_circles(size,cns,clockd){
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
if((clockd.hasOwnProperty("indicate") && clockd.indicate==true) || !clockd.hasOwnProperty("indicate")){
	indicator(size,cns,clockd);
}
var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var milisec=now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours()%12;
	cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/3,-1.57,-1.569+sec*0.1046+milisec/1000*0.1046,0);
	cns.lineTo((size/2),(size/2));
	cns.fill();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/3.5,-1.57,-1.569+min*0.1046+sec/60*0.1046,0);
	cns.lineTo((size/2),(size/2));
	cns.fill();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/4.5,-1.57,-1.569+hour*0.523+min/60*0.523,0);
	cns.lineTo((size/2),(size/2));
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("time_add") && clockd.time_add){
	time_add((size/2),size/6*3,size,cns,clockd);
}
if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/6*3+size/10,size,cns,clockd);
}
clockd.timer=setTimeout(function(){
	clock_circles(size,cns,clockd)}
,50);
}
function clock_grow(size,cns,clockd){
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
if((clockd.hasOwnProperty("indicate") && clockd.indicate==true) || !clockd.hasOwnProperty("indicate")){
	indicator(size,cns,clockd);
}
if(clockd.hasOwnProperty("time_add") && clockd.time_add){
	time_add((size/2),size/5*3,size,cns,clockd);
}
if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/5*3+size/10,size,cns,clockd);
}
var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var milisec=now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours()%12;
	cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=1;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),sec*size/200+size/15,-1.57+sec*0.1046+milisec/1000*0.1046,-1.569+sec*0.1046+milisec/1000*0.1046,0);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.lineCap="round";
	cns.lineWidth=1;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),min*size/200+sec/60*size/200+size/15,-1.57+min*0.1046+sec/60*0.1046,-1.569+min*0.1046+sec/60*0.1046,0);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.lineCap="round";
	cns.lineWidth=2;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),hour*size/200*3+min/60*size/200*3+size/15,-1.57+hour*0.523+min/60*0.523,-1.569+hour*0.523+min/60*0.523,0);
	cns.stroke();
	cns.closePath();
	cns.beginPath();
	cns.lineWidth=2;
	cns.arc((size/2),(size/2),size/60,0,6.28,0);
	cns.fill();
	cns.closePath();
	clockd.timer=setTimeout(function(){
	clock_grow(size,cns,clockd)}
,50);
}
function clock_dots(size,cns,clockd){
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
if((clockd.hasOwnProperty("indicate") && clockd.indicate==true) || !clockd.hasOwnProperty("indicate")){
	indicator(size,cns,clockd);
}
if(clockd.hasOwnProperty("time_add") && clockd.time_add){
	time_add((size/2),size/6*3,size,cns,clockd);
}
if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/6*3+size/10,size,cns,clockd);
}
var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var milisec=now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours()%12;
	cns.fillStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.lineCap="round";
	for(var a=0;
	a<(sec+1);
	a++){
	var r=parseInt(a)*0.1046;
	var calc=Math.cos(r-1.57)*(size/2.8);
	var y=Math.sin(r-1.57)*(size/2.8);
	cns.beginPath();
	cns.arc(calc+(size/2),y+(size/2),size/100,0,6.28,0);
	cns.fill();
	cns.closePath();
}
cns.fillStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.lineCap="round";
	for(var a=0;
	a<(min+1);
	a++){
	var r=parseInt(a)*0.1046;
	var calc=Math.cos(r-1.57)*(size/3.4);
	var y=Math.sin(r-1.57)*(size/3.4);
	cns.beginPath();
	cns.arc(calc+(size/2),y+(size/2),size/100,0,6.28,0);
	cns.fill();
	cns.closePath();
}
cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.lineCap="round";
	for(var a=0;
	a<(hour+1);
	a++){
	var r=parseInt(a)*0.523;
	var calc=Math.cos(r-1.57)*(size/4.5);
	var y=Math.sin(r-1.57)*(size/4.5);
	cns.beginPath();
	cns.arc(calc+(size/2),y+(size/2),size/100,0,6.28,0);
	cns.fill();
	cns.closePath();
}
clockd.timer=setTimeout(function(){
	clock_dots(size,cns,clockd)}
,50);
}
function clock_num(size,cns,clockd){
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
if((clockd.hasOwnProperty("indicate") && clockd.indicate==true) || !clockd.hasOwnProperty("indicate")){
	indicator(size,cns,clockd);
}
if(clockd.hasOwnProperty("time_add") && clockd.time_add){
	time_add((size/2),size/5*3,size,cns,clockd);
}
if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/5*3+size/10,size,cns,clockd);
}
var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var milisec=now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours()%12;
	cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.lineCap="round";
	cns.beginPath();
	cns.lineWidth=1;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/3.2,-1.57+sec*0.1046+milisec/1000*0.1046,-1.569+sec*0.1046+milisec/1000*0.1046,0);
	cns.stroke();
	cns.closePath();
	cns.textBaseline="middle";
	cns.textAlign="center";
	cns.font=(size/35+5)+"px Arial";
	cns.fillText(sec,Math.cos(-1.57+sec*0.1046+milisec/1000*0.1046)*size/3+(size/2),Math.sin(-1.57+sec*0.1046+milisec/1000*0.1046)*size/3+(size/2)) cns.beginPath();
	cns.lineWidth=1;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/15,1.57+sec*0.1046+milisec/1000*0.1046,1.569+sec*0.1046+milisec/1000*0.1046,1);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.beginPath();
	cns.lineWidth=2;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/3.2,-1.57+min*0.1046+sec/60*0.1046,-1.569+min*0.1046+sec/60*0.1046,0);
	cns.stroke();
	cns.closePath();
	cns.fillText(min,Math.cos(-1.57+min*0.1046+sec/60*0.1046)*size/3+(size/2),Math.sin(-1.57+min*0.1046+sec/60*0.1046)*size/3+(size/2)) cns.fillStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.beginPath();
	cns.lineWidth=3;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/4,-1.57+hour*0.523+min/60*0.523,-1.569+hour*0.523+min/60*0.523,0);
	cns.stroke();
	cns.closePath();
	if(hour==0){
	var hour2=12;
}
else{
	var hour2=hour;
}
cns.fillText(hour2,Math.cos(-1.57+hour*0.523+min/60*0.523)*size/3.5+(size/2),Math.sin(-1.57+hour*0.523+min/60*0.523)*size/3.5+(size/2)) cns.beginPath();
	cns.lineWidth=2;
	cns.arc((size/2),(size/2),size/80,0,6.28,0);
	cns.fill();
	cns.closePath();
	clockd.timer=setTimeout(function(){
	clock_num(size,cns,clockd)}
,50);
}
function clock_random(size,cns,clockd){
	var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var milisec=now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours();
	if(!clockd.hasOwnProperty("track")){
	clockd["track"]=20;
}
clockd["track"]=parseInt(clockd["track"])+1;
	if(parseInt(clockd["track"])>=20){
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/5*3+size/10,size,cns,clockd);
}
var hourx=Math.floor(Math.random()*size/1.5)+Math.floor((size/2)/10);
	var houry=Math.floor(Math.random()*size/1.5)+Math.floor((size/2)/10);
	cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.strokeStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	//if(hour==0){
	hour=12;
}
else{
	hour=hour;
}
if(hour<10){
	hour="0"+hour;
}
if(min<10){
	min="0"+min;
}
if(sec<10){
	sec="0"+sec;
}
cns.textBaseline="middle";
	cns.textAlign="left";
	cns.font=(size/15)+"pt Arial";
	cns.fillText(hour+":"+min+":"+sec,hourx,houry);
	clockd["track"]=0;
}
clockd.timer=setTimeout(function(){
	clock_random(size,cns,clockd)}
,50);
}
function clock_digitalran(size,cns,clockd){
	var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours();
	var hexarr=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
	var a=Math.floor(Math.random()*16);
	var b=Math.floor(Math.random()*16);
	var c=Math.floor(Math.random()*16);
	var d=Math.floor(Math.random()*16);
	var e=Math.floor(Math.random()*16);
	var f=Math.floor(Math.random()*16);
	if(clockd.hasOwnProperty("track")){
	clockd["track"]+=1;
}
else{
	clockd["track"]=20;
}
if(parseInt(clockd["track"])==20){
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/3*2,size,cns,clockd);
}
if(hour==0){
	var hour2=12;
}
else{
	var hour2=hour;
}
if(hour<10){
	hour="0"+hour;
}
if(min<10){
	min="0"+min;
}
if(sec<10){
	sec="0"+sec;
}
cns.strokeStyle="#333333";
	cns.fillStyle="#"+hexarr[a]+hexarr[b]+hexarr[c]+hexarr[d]+hexarr[e]+hexarr[f];
	cns.textBaseline="middle";
	cns.textAlign="center";
	cns.font=size/7+"px Arial";
	cns.fillText(hour2+":"+min+":"+sec,(size/2),size/2.5);
	clockd["track"]=0;
}
clockd.timer=setTimeout(function(){
	clock_digitalran(size,cns,clockd)}
,50);
}
function clock_bars(size,cns,clockd){
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var mili=now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours()%12;
	if((clockd.hasOwnProperty("indicate") && clockd.indicate==true) || !clockd.hasOwnProperty("indicate")){
	cns.strokeStyle=(clockd.hasOwnProperty("indicate_color"))?clockd["indicate_color"]:"#333333";
	for(var a=0;
	a<13;
	a++){
	if(a%3==0){
	cns.lineWidth=2;
}
else{
	cns.lineWidth=1;
}
cns.beginPath();
	cns.moveTo(size/7+size/7.1,size/8+a*size/1.3/12);
	cns.lineTo(size/2.38,size/8+a*size/1.3/12);
	cns.stroke();
	cns.closePath();
	cns.beginPath();
	cns.moveTo(size/2.35+size/7.1,size/8+a*size/1.3/12);
	cns.lineTo(size/1.45,size/8+a*size/1.3/12);
	cns.stroke();
	cns.closePath();
}
cns.beginPath();
	cns.moveTo(size/7+size/7.1*1.5,size/8);
	cns.lineTo(size/7+size/7.1*1.5,size/8+size/1.3);
	cns.stroke();
	cns.closePath();
	cns.beginPath();
	cns.moveTo(size/2.38+size/7.1*1.5,size/8);
	cns.lineTo(size/2.38+size/7.1*1.5,size/8+size/1.3);
	cns.stroke();
	cns.closePath();
}
if(clockd.hasOwnProperty("time_add") && clockd.time_add){
	time_add((size/2),size/20,size,cns,clockd);
}
if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/14*13,size,cns,clockd);
}
cns.strokeStyle=(clockd.hasOwnProperty("indicate_color"))?clockd["indicate_color"]:"#333333";
	cns.lineCap="round";
	cns.fillStyle=(clockd.hasOwnProperty("indicate_color"))?clockd["indicate_color"]:"#333333";
	cns.beginPath();
	cns.rect(size/7.4,size/8,size/6.8,size/1.3);
	cns.rect(size/2.38,size/8,size/6.8,size/1.3);
	cns.rect(size/1.45,size/8,size/6.8,size/1.3);
	cns.stroke();
	cns.closePath();
	cns.beginPath();
	cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.rect(size/7.4,size/8+size/1.3-(size/1.3)*(hour*60+min)/720,size/6.8,(size/1.3)*(hour*60+min)/720);
	cns.fill() cns.closePath();
	cns.beginPath() cns.fillStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.rect(size/2.38,size/8+size/1.3-(size/1.3)*(min*60+sec)/3600,size/6.8,(size/1.3)*(min*60+sec)/3600);
	cns.fill();
	cns.closePath();
	cns.beginPath();
	cns.fillStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.rect(size/1.45,size/8+size/1.3-(size/1.3)*(sec*1000+mili)/60000,size/6.8,(size/1.3)*(sec*1000+mili)/60000);
	cns.fill();
	cns.closePath();
	clockd.timer=setTimeout(function(){
	clock_bars(size,cns,clockd)}
,50);
}
function clock_planets(size,cns,clockd){
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
if((clockd.hasOwnProperty("indicate") && clockd.indicate==true) || !clockd.hasOwnProperty("indicate")){
	indicator(size,cns,clockd);
}
if(clockd.hasOwnProperty("time_add") && clockd.time_add){
	time_add((size/2),size/5*3,size,cns,clockd);
}
if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/5*3+size/10,size,cns,clockd);
}
var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var milisec=now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours()%12;
	if(clockd.hasOwnProperty("track")){
	cns.fillStyle=clockd["track"];
}
else{
	cns.fillStyle="#DAA520";
}
cns.beginPath();
	cns.lineWidth=3;
	cns.moveTo((size/2),(size/2));
	cns.arc((size/2),(size/2),size/25,0,6.29,0);
	cns.lineTo((size/2),(size/2));
	cns.fill();
	cns.closePath();
	var r=parseInt(milisec)*0.00628;
	var calcms=Math.cos(r-1.57)*(size/25);
	var yms=Math.sin(r-1.57)*(size/25);
	var r=parseInt(sec)*0.1046+parseInt(milisec)/1000*0.1046;
	var calc=Math.cos(r-1.57)*(size/5);
	var y=Math.sin(r-1.57)*(size/5);
	var r=parseInt(min)*0.1046+parseInt(sec)/60*0.1046;
	var calcm=Math.cos(r-1.57)*(size/3.2);
	var ym=Math.sin(r-1.57)*(size/3.2);
	var r=parseInt(hour)*0.523+parseInt(min)/60*0.523;
	var calcu=Math.cos(r-1.57)*(size/2.5);
	var yu=Math.sin(r-1.57)*(size/2.5);
	if(clockd.hasOwnProperty("indicate_color")){
	cns.strokeStyle=clockd["indicate_color"];
}
else{
	cns.strokeStyle="#333";
}
cns.closePath();
	cns.beginPath();
	cns.lineWidth=1;
	cns.arc((size/2),(size/2),(size/5),0,6.28,0);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.beginPath();
	cns.lineWidth=3;
	cns.arc(calc+(size/2),y+(size/2),size/42,0,6.28,0);
	cns.fill();
	cns.closePath();
	cns.beginPath();
	cns.lineWidth=1;
	cns.arc((size/2)+calc,(size/2)+y,size/24,0,6.28,0);
	cns.stroke();
	cns.closePath();
	cns.beginPath();
	cns.lineWidth=3;
	cns.arc((size/2)+calc+calcms,(size/2)+y+yms,size/110,0,6.28,0);
	cns.fill();
	cns.beginPath();
	cns.lineWidth=1;
	cns.arc((size/2),(size/2),size/3.2,0,6.28,0);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.beginPath();
	cns.lineWidth=3;
	cns.arc(calcm+(size/2),ym+(size/2),size/24,0,6.28,0);
	cns.fill();
	cns.closePath();
	cns.beginPath();
	cns.lineWidth=1;
	cns.arc((size/2),(size/2),size/2.5,0,6.28,0);
	cns.stroke();
	cns.closePath();
	cns.fillStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.beginPath();
	cns.lineWidth=3;
	cns.arc(calcu+(size/2),yu+(size/2),size/22,0,6.28,0);
	cns.fill();
	cns.closePath();
	clockd.timer=setTimeout(function(){
	clock_planets(size,cns,clockd)}
,50);
}
function clock_roulette(size,cns,clockd){
	var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var milisec=now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours()%12;
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
var a=hour-2;
	var b=hour-1;
	var c=hour+1;
	var d=hour+2;
	var e=hour+3;
	if(a<0){
	a=24+a;
}
if(b<0){
	b=24+b;
}
if(c>23){
	c=c-24;
}
if(d>23){
	d=d-24;
}
if(e>23){
	e=e-24;
}
var f=hour;
	if(a<10){
	a="0"+a;
}
if(b<10){
	b="0"+b;
}
if(c<10){
	c="0"+c;
}
if(d<10){
	d="0"+d;
}
if(e<10){
	e="0"+e;
}
if(f<10){
	f="0"+f;
}
cns.font=size/10+"pt Arial";
	cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.fillText(a,size/5,size/10-size/5*min/60-size/5*sec/36000);
	cns.fillText(b,size/5,size/10+size/5-size/5*min/60-size/5*sec/36000);
	cns.globalAlpha=0.3;
	cns.fillText(f,size/5,size/10+2*size/5-size/5*min/60-size/5*sec/3600);
	cns.globalAlpha=1;
	cns.fillText(c,size/5,size/10+3*size/5-size/5*min/60-size/5*sec/3600);
	cns.fillText(d,size/5,size/10+4*size/5-size/5*min/60-size/5*sec/3600);
	cns.fillText(e,size/5,size/10+5*size/5-size/5*min/60-size/5*sec/3600);
	var a=min-2;
	var b=min-1;
	var c=min+1;
	var d=min+2;
	var e=min+3;
	if(a<0){
	a=60+a;
}
if(b<0){
	b=60+b;
}
if(c>59){
	c=c-60;
}
if(d>59){
	d=d-60;
}
if(e>59){
	e=e-60;
}
var f=min;
	if(a<10){
	a="0"+a;
}
if(b<10){
	b="0"+b;
}
if(c<10){
	c="0"+c;
}
if(d<10){
	d="0"+d;
}
if(e<10){
	e="0"+e;
}
if(f<10){
	f="0"+f;
}
cns.fillStyle=(clockd.hasOwnProperty("dial2_color"))?clockd["dial2_color"]:"#333333";
	cns.fillText(a,size/2,size/10-size/5*sec/60-size/5*milisec/60000);
	cns.fillText(b,size/2,size/10+size/5-size/5*sec/60-size/5*milisec/60000);
	cns.globalAlpha=0.3;
	cns.fillText(f,size/2,size/10+2*size/5-size/5*sec/60-size/5*milisec/60000);
	cns.globalAlpha=1;
	cns.fillText(c,size/2,size/10+3*size/5-size/5*sec/60-size/5*milisec/60000);
	cns.fillText(d,size/2,size/10+4*size/5-size/5*sec/60-size/5*milisec/60000);
	cns.fillText(e,size/2,size/10+5*size/5-size/5*sec/60-size/5*milisec/60000);
	var a=sec-2;
	var b=sec-1;
	var c=sec+1;
	var d=sec+2;
	var e=sec+3;
	if(a<0){
	a=60+a;
}
if(b<0){
	b=60+b;
}
if(c>59){
	c=c-60;
}
if(d>59){
	d=d-60;
}
if(e>59){
	e=e-60;
}
var f=sec;
	if(a<10){
	a="0"+a;
}
if(b<10){
	b="0"+b;
}
if(c<10){
	c="0"+c;
}
if(d<10){
	d="0"+d;
}
if(e<10){
	e="0"+e;
}
if(f<10){
	f="0"+f;
}
cns.fillStyle=(clockd.hasOwnProperty("dial3_color"))?clockd["dial3_color"]:"#333333";
	cns.fillText(a,size/5*4,size/10-size/5*milisec/1000);
	cns.fillText(b,size/5*4,size/10+size/5-size/5*milisec/1000);
	cns.globalAlpha=0.3;
	cns.fillText(f,size/5*4,size/10+2*size/5-size/5*milisec/1000);
	cns.globalAlpha=1;
	cns.fillText(c,size/5*4,size/10+3*size/5-size/5*milisec/1000);
	cns.fillText(d,size/5*4,size/10+4*size/5-size/5*milisec/1000);
	cns.fillText(e,size/5*4,size/10+5*size/5-size/5*milisec/1000);
	if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/5*3+size/10,size,cns,clockd);
}
if(clockd.hasOwnProperty("indicate") && clockd.indicate){
	cns.strokeStyle=(clockd.hasOwnProperty("indicate_color"))?clockd["indicate_color"]:"#333333";
	cns.beginPath();
	cns.moveTo(0,(size/2));
	cns.lineTo(size,(size/2));
	cns.stroke() cns.closePath();
}
clockd.timer=setTimeout(function(){
	clock_roulette(size,cns,clockd)}
,50);
}
function clock_binary(size,cns,clockd){
	var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var milisec=now.getMilliseconds();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours()%12;
	cns.clearRect(0,0,size,size);
	cns.beginPath();
	if(clockd.hasOwnProperty("bg_color")){
	cns.fillStyle=clockd["bg_color"];
}
else{
	cns.fillStyle="#ffffff";
}
cns.rect(0,0,size,size);
	cns.fill();
	cns.closePath();
	if(clockd.hasOwnProperty("bgLoaded") && clockd.bgLoaded==1){
	if(clockd.hasOwnProperty("bg_opacity")){
	cns.globalAlpha=clockd["bg_opacity"];
	cns.drawImage(clockd.bgImage,0,0,size,size);
	cns.globalAlpha=1;
}
}
hourstr="";
	if(hour<1){
	hourstr="0";
}
while(hour>0){
	hourstr=hour%2+hourstr;
	hour=hour-hour%2;
	hour=hour/2;
}
if(hourstr.length<6){
	while(hourstr.length<6){
	hourstr="0"+hourstr;
}
}
minstr="";
	if(min<1){
	minstr="0";
}
while(min>0){
	minstr=min%2+minstr;
	min=min-min%2;
	min=min/2;
}
if(minstr.length<6){
	while(minstr.length<6){
	minstr="0"+minstr;
}
}
secstr="";
	if(sec<1){
	secstr="0";
}
while(sec>0){
	secstr=sec%2+secstr;
	sec=sec-sec%2;
	sec=sec/2;
}
if(secstr.length<6){
	while(secstr.length<6){
	secstr="0"+secstr;
}
}
cns.fillStyle=(clockd.hasOwnProperty("dial1_color"))?clockd["dial1_color"]:"#333333";
	cns.textBaseline="middle";
	cns.textAlign="center";
	cns.font=size/8+"px Courier New";
	cns.fillText(hourstr,(size/2),size/5);
	cns.fillText(minstr,(size/2),size/5*2);
	cns.fillText(secstr,(size/2),size/5*3);
	if(clockd.hasOwnProperty("date_add") && clockd.date_add){
	date_add((size/2),size/5*3+size/10,size,cns,clockd);
}
clockd.timer=setTimeout(function(){
	clock_binary(size,cns,clockd)}
,50);
}
function clock_stop(clockd){
	clearTimeout(clockd.timer);
}
function clock_loadBG(src,clockd){
	clockd.bgImage = new Image();
	clockd.bgImage.onload = function(){
	clockd.bgLoaded=1;
}
;
	clockd.bgImage.src = src;
	if(!clockd.hasOwnProperty("bg_opacity")){
	clockd.bg_opacity=1;
}
}
function indicator(size,cns,clockd){
	if(clockd.hasOwnProperty("indicate_color")){
	cns.strokeStyle=clockd["indicate_color"];
}
else{
	cns.strokeStyle="#333";
}
cns.lineWidth=2;
	for(var a=0;
	a<12;
	a++){
	var r=parseInt(a)*0.523;
	var calc=Math.cos(r-1.57);
	var y=Math.sin(r-1.57);
	if(a%3==0){
	var ekstra=size/50;
}
else{
	var ekstra=0;
}
cns.beginPath();
	cns.moveTo(calc*(size/3+ekstra)+(size/2),y*(size/3+ekstra)+(size/2));
	cns.lineTo(calc*size/3.25+(size/2),y*size/3.25+(size/2));
	cns.stroke();
	cns.fill();
	cns.closePath();
}
}
function time_add(x,y,size,cns,clockd){
	if(!clockd.hasOwnProperty("time_add")){
	return;
}
var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=(clockd.hasOwnProperty("time_24h") && clockd["time_24h"])?now.getHours():now.getHours()%12;
	if(hour==0){
	hour=12;
}
if(hour<10){
	hour="0"+hour;
}
if(min<10){
	min="0"+min;
}
if(sec<10){
	sec="0"+sec;
}
cns.lineWidth=1;
	cns.fillStyle=(clockd.hasOwnProperty("time_add_color")?clockd["time_add_color"]:"#333");
	cns.textBaseline="middle";
	cns.textAlign="center";
	cns.font=size/15+"px Arial";
	switch(parseInt(clockd["time_add"])){
	case 1:cns.fillText(hour+":"+min+":"+sec,x,y);
	break;
	case 2:cns.fillText(hour+":"+min,x,y);
	break;
	case 3:hour=now.getHours();
	if(hour<10){
	hour="0"+hour;
}
cns.fillText(hour+":"+min+":"+sec,x,y);
	break;
	default:hour=now.getHours();
	if(hour<10){
	hour="0"+hour;
}
cns.fillText(hour+":"+min,x,y);
}
}
function date_add(x,y,size,cns,clockd){
	if(!clockd.hasOwnProperty("date_add")){
	return;
}
var now=new Date();
	var time_off=(clockd.hasOwnProperty("timeoffset"))?clockd["timeoffset"]:0;
	now.setTime(now.getTime()+time_off*1000);
	var day=now.getDate();
	var year=now.getFullYear();
	var month=now.getMonth()+1;
	if((month)<10){
	month="0"+(month);
}
if(day<10){
	day="0"+day;
}
cns.lineWidth=1;
	cns.fillStyle=clockd["date_add_color"];
	cns.textBaseline="middle";
	cns.textAlign="center";
	cns.font=size/20+"px Arial";
	switch(parseInt(clockd["date_add"])){
	case 1:cns.fillText(day+"/"+month+"/"+year,x,y);
	break;
	case 2:cns.fillText(month+"/"+day+"/"+year,x,y);
	break;
	case 3:day=now.getDay();
	cns.fillText(day_arr[day],x,y);
	break;
	case 4:month=now.getMonth();
	cns.fillText(month_arr[month]+" "+day,x,y);
	break;
	default:month=now.getMonth();
	cns.fillText(day+" "+month_arr[month],x,y);
}
}

CSS代码(zzsc.css):

body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.htmleaf-container{margin:0 auto;}
.zzsc-content{padding:1em;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
6.27 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
6.27 KB
立即下载
萧卿
了解
打赏作者 鼓励作者
Html JS 其它特效1
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章