function add_date4(i)// 매서드가 될 함수 구현 { var currentDate4;//계산된 날 currentDate4 = this.getDate() + i*1;// 현재날짜에 더해(빼)줄날짜를계산 this.setDate(currentDate4);//계산된날짜로 다시 세팅 } // Constructor for CoolClock4 objects window.CoolClock4 = function(options) { return this.init(options); } var page_clock4 = -2; var time_h4 = 18; //time_h4 =3; var time_m4 = 20; var time_s4 = 49; //var time_s = 0; //var server_clock = 1746782449+1; var time_second4 = 0; var addnum4=0; offset_check4 = null; offset_check4 = ; ctio_date = 05 + '/'+ 9; ctio_tomorrow_date = 05 + '/'+ 10; //alert(ctio_date); //alert(ctio_tomorrow_date); kasi_h = time_h4; //ctio_dis = 9 + 4 ; ctio_dis = 9 + 5 ; ctio_ch4 = kasi_h - ctio_dis; ctio_ch4 = ctio_ch4 + offset_check4; if ( ctio_ch4 < 0 ) { ctio_ch4 = ctio_ch4 + 24; } if ( ctio_ch4 >= 24 ) { ctio_ch4 = ctio_ch4 - 24; } if (offset_check4 >= 2 || offset_check4 <= -2 ) { offset_check4 = 0; } else { //alert(offset_check4); } //alert(offset_check4); // Config contains some defaults, and clock skins CoolClock4.config = { tickDelay: 1000, longTickDelay: 15000, defaultRadius: 85, renderRadius: 100, defaultSkin: "chunkySwiss", defaultFont: "28px Lucida Console", // Should be in skin probably... // (TODO: allow skinning of digital display) showSecs: false, showAmPm: true, skins: { // There are more skins in moreskins.js // Try making your own skin by copy/pasting one of these and tweaking it swissRail: { }, chunkySwiss: { }, chunkySwissOnBlack: { } }, // Test for IE so we can nurse excanvas in a couple of places isIE: !!document.all, // Will store (a reference to) each clock here, indexed by the id of the canvas element clockTracker: {}, // For giving a unique id to CoolClock4 canvases with no id noIdCount: 0 }; // Define the CoolClock4 object's methods CoolClock4.prototype = { // Initialise using the parameters parsed from the colon delimited class init: function(options) { // Parse and store the options this.canvasId = options.canvasId; this.skinId = options.skinId || CoolClock4.config.defaultSkin; this.font = options.font || CoolClock4.config.defaultFont; this.displayRadius = options.displayRadius || CoolClock4.config.defaultRadius; this.renderRadius = options.renderRadius || CoolClock4.config.renderRadius; this.showSecondHand = typeof options.showSecondHand == "boolean" ? options.showSecondHand : true; this.gmtOffset = (options.gmtOffset != null && options.gmtOffset != '') ? parseFloat(options.gmtOffset) : null; this.showDigital = typeof options.showDigital == "boolean" ? options.showDigital : false; this.logClock = typeof options.logClock == "boolean" ? options.logClock : false; this.logClockRev = typeof options.logClock == "boolean" ? options.logClockRev : false; this.tickDelay = CoolClock4.config[ this.showSecondHand ? "tickDelay" : "longTickDelay" ]; // Get the canvas element this.canvas = document.getElementById(this.canvasId); // Make the canvas the requested size. It's always square. this.canvas.setAttribute("width",this.displayRadius*2); this.canvas.setAttribute("height",this.displayRadius*2); this.canvas.style.width = this.displayRadius*2 + "px"; this.canvas.style.height = this.displayRadius*2 + "px"; // Determine by what factor to relate skin values to canvas positions. // renderRadius is the max skin positional value before leaving the // canvas. displayRadius is half the width and height of the canvas in // pixels. If they are equal, there is a 1:1 relation of skin position // values to canvas pixels. Setting both to 200 allows 100px of space // around clock skins to add your own things: this is due to current // skins maxing out at a positional value of 100. this.scale = this.displayRadius / this.renderRadius; // Initialise canvas context this.ctx = this.canvas.getContext("2d"); this.ctx.scale(this.scale,this.scale); // Keep track of this object CoolClock4.config.clockTracker[this.canvasId] = this; // should we be running the clock? this.active = true; this.tickTimeout = null; // Start the clock going this.tick(); return this; }, // Draw a circle at point x,y with params as defined in skin fullCircleAt: function(x,y,skin) { this.ctx.save(); this.ctx.globalAlpha = skin.alpha; this.ctx.lineWidth = skin.lineWidth; if (!CoolClock4.config.isIE) { this.ctx.beginPath(); } if (CoolClock4.config.isIE) { // excanvas doesn't scale line width so we will do it here this.ctx.lineWidth = this.ctx.lineWidth * this.scale; } this.ctx.arc(x, y, skin.radius, 0, 2*Math.PI, false); if (CoolClock4.config.isIE) { // excanvas doesn't close the circle so let's fill in the tiny gap this.ctx.arc(x, y, skin.radius, -0.1, 0.1, false); } if (skin.fillColor) { this.ctx.fillStyle = skin.fillColor this.ctx.fill(); } if (skin.color) { this.ctx.strokeStyle = skin.color; this.ctx.stroke(); } this.ctx.restore(); }, // Draw some text centered vertically and horizontally drawTextAt: function(theText,x,y,skin) { if (!skin) skin = this.getSkin(); this.ctx.save(); this.ctx.font = skin.font || this.font; var tSize = this.ctx.measureText(theText); // TextMetrics rarely returns a height property: use baseline instead. if (!tSize.height) { tSize.height = 0; this.ctx.textBaseline = 'middle'; } this.ctx.fillText(theText, x - tSize.width/2, y - tSize.height/2); this.ctx.restore(); }, lpad2: function(num) { return (num < 10 ? '0' : '') + num; }, tickAngle: function(second) { // Log algorithm by David Bradshaw var tweak = 3; // If it's lower the one second mark looks wrong (?) if (this.logClock) { return second == 0 ? 0 : (Math.log(second*tweak) / Math.log(60*tweak)); } else if (this.logClockRev) { // Flip the seconds then flip the angle (trickiness) second = (60 - second) % 60; return 1.0 - (second == 0 ? 0 : (Math.log(second*tweak) / Math.log(60*tweak))); } else { return second/60.0; } }, timeText: function(hour,min,sec) { if( hour >=0 && hour <= 9) { var str_hour = '0'+ String(hour); } else { var str_hour = String(hour); } if( hour < 07 || hour >= 18 ) { if ( sec%2 ) { this.ctx.fillStyle = "rgba(186, 26, 26, 1)"; } else { this.ctx.fillStyle = "#ffffff"; } } else { if ( sec%2 ) { this.ctx.fillStyle = "#aaaaaa"; } else { this.ctx.fillStyle = "#ffffff"; } } var c = CoolClock4.config; return '' + (c.showAmPm ? ((hour%12)==0 ? str_hour : str_hour ) : str_hour) + ':' + this.lpad2(min) + (c.showSecs ? ':' + this.lpad2(sec) : '') + (c.showAmPm ? ( hour < 07 || hour >= 18 ? ' ' + ctio_date : ' ' + ctio_date) : ' ' +ctio_date) ; }, // Draw a radial line by rotating then drawing a straight line // Ha ha, I think I've accidentally used Taus, (see http://tauday.com/) radialLineAtAngle: function(angleFraction,skin) { this.ctx.save(); this.ctx.translate(this.renderRadius,this.renderRadius); this.ctx.rotate(Math.PI * (2.0 * angleFraction - 0.5)); this.ctx.globalAlpha = skin.alpha; this.ctx.strokeStyle = skin.color; this.ctx.lineWidth = skin.lineWidth; if (CoolClock4.config.isIE) // excanvas doesn't scale line width so we will do it here this.ctx.lineWidth = this.ctx.lineWidth * this.scale; if (skin.radius) { this.fullCircleAt(skin.startAt,0,skin) } else { this.ctx.beginPath(); this.ctx.moveTo(skin.startAt,0) this.ctx.lineTo(skin.endAt,0); this.ctx.stroke(); } this.ctx.restore(); }, render: function(hour,min,sec) { hour = hour; // Get the skin var skin = this.getSkin(); // Clear this.ctx.clearRect(0,0,this.renderRadius*2,this.renderRadius*2); // Draw the outer edge of the clock if (skin.outerBorder) this.fullCircleAt(this.renderRadius,this.renderRadius,skin.outerBorder); // Draw the tick marks. Every 5th one is a big one for (var i=0;i<60;i++) { (i%5) && skin.smallIndicator && this.radialLineAtAngle(this.tickAngle(i),skin.smallIndicator); !(i%5) && skin.largeIndicator && this.radialLineAtAngle(this.tickAngle(i),skin.largeIndicator); } // Write the time if (this.showDigital) { this.drawTextAt( this.timeText(hour,min,sec), this.renderRadius, this.renderRadius+this.renderRadius/2 ); } var hourA = (hour%12)*5 + min/12.0, minA = min + sec/60.0, secA = sec; // Draw the hands if (skin.hourHand) this.radialLineAtAngle(this.tickAngle(hourA),skin.hourHand); if (skin.minuteHand) this.radialLineAtAngle(this.tickAngle(minA),skin.minuteHand); if (this.showSecondHand && skin.secondHand) this.radialLineAtAngle(this.tickAngle(secA),skin.secondHand); // Hands decoration - not in IE if (!CoolClock4.config.isIE) { if (skin.hourDecoration) this.radialLineAtAngle(this.tickAngle(hourA), skin.hourDecoration); if (skin.minDecoration) this.radialLineAtAngle(this.tickAngle(minA), skin.minDecoration); if (this.showSecondHand && skin.secondDecoration) this.radialLineAtAngle(this.tickAngle(secA),skin.secondDecoration); } if (this.extraRender) { this.extraRender(hour,min,sec); } }, // Check the time and display the clock refreshDisplay: function() { // Use GMT + gmtOffset var now = new Date(); if (offset_check4 == 0) { if ( time_second4 < 60) { page_clock4 = page_clock4 + 1; time_second4 = time_s4 + page_clock4; } else { page_clock4 = 1; time_s4 = 0; time_second4 = 0; time_m4 = time_m4 + 1; if (time_m4 >= 60 ) { time_m4 = 0; ctio_ch4 = ctio_ch4 +1; if (ctio_ch4 >= 24 ) { ctio_ch4 = ctio_ch4 - 24; Date.prototype.addDate = add_date4;// Date 객체에 메서드 정의 var odate4 = new Date();// 현재날짜객체 생성 var year4=2025; var month4=05-1; var day4=9; var odate4 = new Date(year4, month4, day4); // 2014-03-01 - 월은 0에서부터 시작된다. addnum4 = addnum4 +1; odate4.addDate(addnum4);// 내일날짜 var yeartoday4 = odate4.getFullYear(); var monthtoday4 = odate4.getMonth()+1; var dayofmonthtoday4 = odate4.getDate(); //alert(yeartoday4+"/"+monthtoday4+"/"+dayofmonthtoday4); //alert(odate4); //ctio_date = ctio_tomorrow_date; ctio_date = monthtoday4+"/"+dayofmonthtoday4; //var test = 1; //ctio_date = monthtoday4+"/"+dayofmonthtoday4+"/"+ test; //alert(ctio_date); } } } now.setHours(ctio_ch4, time_m4, time_second4, 1000); this.render(now.getHours(),now.getMinutes(),now.getSeconds()); } else { if ( time_second4 < 60) { page_clock4 = page_clock4 + 1; time_second4 = time_s4 + page_clock4; } else { page_clock4 = 1; time_s4 = 0; time_second4 = 0; time_m4 = time_m4 + 1; if (time_m4 >= 60 ) { time_m4 = 0; ctio_ch4 = ctio_ch4 +1; if (ctio_ch4 >= 24 ) { ctio_ch4 = ctio_ch4 - 24; Date.prototype.addDate = add_date4;// Date 객체에 메서드 정의 var odate4 = new Date();// 현재날짜객체 생성 var year4=2025; var month4=05-1; var day4=9; var odate4 = new Date(year4, month4, day4); // 2014-03-01 - 월은 0에서부터 시작된다. addnum4 = addnum4 +1; odate4.addDate(addnum4);// 내일날짜 var yeartoday4 = odate4.getFullYear(); var monthtoday4 = odate4.getMonth()+1; var dayofmonthtoday4 = odate4.getDate(); //alert(yeartoday4+"/"+monthtoday4+"/"+dayofmonthtoday4); //alert(odate4); //ctio_date = ctio_tomorrow_date; ctio_date = monthtoday4+"/"+dayofmonthtoday4; //var test = 1; //ctio_date = monthtoday4+"/"+dayofmonthtoday4+"/"+ test; //alert(ctio_date); } } } //alert(offset_check4); now.setHours(ctio_ch4, time_m4, time_second4, 1000); this.render(now.getHours(),now.getMinutes(),now.getSeconds()); } }, // Set timeout to trigger a tick in the future nextTick: function() { this.tickTimeout = setTimeout("CoolClock4.config.clockTracker['"+this.canvasId+"'].tick()",this.tickDelay); }, // Check the canvas element hasn't been removed stillHere: function() { return document.getElementById(this.canvasId) != null; }, // Stop this clock stop: function() { this.active = false; clearTimeout(this.tickTimeout); }, // Start this clock start: function() { if (!this.active) { this.active = true; this.tick(); } }, // Main tick handler. Refresh the clock then setup the next tick tick: function() { if (this.stillHere() && this.active) { this.refreshDisplay() this.nextTick(); } }, getSkin: function() { var skin = CoolClock4.config.skins[this.skinId]; if (!skin) skin = CoolClock4.config.skins[CoolClock4.config.defaultSkin]; return skin; } }; // Find all canvas elements that have the CoolClock4 class and turns them into clocks CoolClock4.findAndCreateClocks = function() { // (Let's not use a jQuery selector here so it's easier to use frameworks other than jQuery) var canvases = document.getElementsByTagName("canvas"); for (var i=0;i // If you do have jQuery and it's loaded already then we can do it right now if (window.jQuery) jQuery(document).ready(CoolClock4.findAndCreateClocks);