【源码案例】15款JavaScript基于canvas时钟特效，附源代码
|
admin
2024年10月13日 22:26
本文热度 267
|
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>
<div style="text-align:center;margin:20px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>web前端开发公众号平台,网址：www.webqdkf.com。</p><p>源码:<a href="http://www.webqdkf.com/" target="_blank">每日一练</a></p></div></body></html>
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;}
JS: 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<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); }}
该文章在 2024/10/14 12:25:47 编辑过
|
|
400 186 1886
