کد ساخت روزشمار گرافیکی و زیبا
کد ساخت روزشمار گرافیکی و زیبا با این کد شما میتوانید برای پروژه ها و کارهای خود یک روزشمار بسیار زیبا ایجاد کنید این کد روز شمار که قسمتهای مورد نیاز به ویرایشش در کد تگ گذاری شده و خیلی راحت میتوانید شخصی سازی کنید را در ادامه مطلب برای شما قرار میدم امیدوارم مفید واقع بشه.
<!-- روزشمار گرافیکی و زیبا برای شما دوستان کدبازانی --> <script type="text/javascript"> /* تاریخ زیر را برای تنظیم ساعت سال و.. ویرایش کنید*/ var TargetDate = '07/13/2020 14:00:00'; // MM/DD/YYYY HH:MM:SS (ex: 11/29/2012 23:59:59). Note: Add a Time Zone offset (UTC+HHMM) at the end if you want to use Client Computer's Time. window.useServerTime = true; // Use website server time (instead of client computer time). Important Note: to use this feature, your web server must support SSI or a server-side script, and you should change the filename extension to one of server-processed extensions, such as: .shtml, .ssi, .php, .asp, .jsp, etc. window.customFix = -100; // To adjust the delay (in ms). window.CountActive = true; window.countUp = true; // Count up from the target Date after Count down finished. Instead of showing the below Finished message. var FinishedText = "Time<font color=Cyan>'</font>s Up!"; //You can use HTML here, too. var interval = 995; //ms (*for advanced users only!) var blink = 320; //ms (use 0 to disable blinking) var pluralSign = 's'; // (i.e.: 1 Second, 2 Seconds) var padding = false; // LeadingZero. (enabled: 05 Seconds, disabled: 5 Seconds) var _segment = false; var Damping = 10; //Ease Effect </script> <style type="text/css"> <!-- /* DRS - Day Countdown Style */ *{ -webkit-transition: 200ms; -moz-transition: 200ms; -ms-transition: 200ms; -o-transition: 200ms; transition: 200ms; } BODY{ overflow: auto; cursor: default; background: rgb(30,30,30) url(https://p30city.net/images/Thememoch/misc/page_bg.jpg) repeat center fixed; } .CountDown{ margin: auto; position: relative; } .CountDown, .CountDown TR, .CountDown TD{ border: 0px hidden transparent; } DIV.CountDown{ } .CountDown .count, .CountDown .titles{ text-align: center; } TABLE.CountDown{ margin-top: 20%; border: 0px ridge silver; width: auto; // Main GBG /* opacity: 0.7; -moz-opacity: 0.7; -webkit-opacity: 0.7; -o-opacity: 0.7; filter:alpha(opacity=70) */ } .CountDown .count, .CountDown .err, .CountDown .finish{ font-family: Ubuntu, 'Tahoma', Arial, Helvetica, sans-serif; text-shadow: 1px 1px 0px black; color: rgb(0,128,255); font-size: 48pt; } .titles{ font-size: 10pt; text-transform: uppercase; letter-spacing: 2px; height: auto; background: rgba(5,4,6,7.3); } .CountDown .titles{ font-family: "Trebuchet MS", Ubuntu, 'Myriad pro', 'Segoe UI', Tahoma, Arial, Helvetica, sans-serif; } .CountDown .tabledash{ border-bottom: 0px solid rgb(0,110,240); color: white; width: 50%; } .CountDown .err, .CountDown .finish{ text-shadow: 2px 2px 0px black; color: white; width: 50%; display: block; text-align: center; } .CountDown .err{ border-top: 4px solid red; } .CountDown .finish{ border-bottom: 4px solid rgb(0,110,240); } .hidden{ display: none; } #title_s, #count_s.blink{color: #378cff;} #title_m, #count_m.blink{color: #9cdb7d;} #title_h, #count_h.blink{color: #ff6565;} #title_d, #count_d.blink{color: #ffdc50;} #title_n, #count_n.blink{color: orange;} #title_w, #count_w.blink{color: green;} #title_y, #count_y.blink{color: purple;} .blink{ //extra css3 styles } .CountDown .count{color: white;} .titles td{background-color: transparent;} .clock { float: left; margin:0 15px; } .clock .surface { background: url('circle-bg.png') no-repeat center; position: relative; height: 50%; width: 50%; } .clock .glass { background: url('circle-gs.png') no-repeat center; position: absolute; width: 188px; height: 188px; } .text{ position: absolute; top: 45px; left: 42px; width: 100px; height: 100px; } .text span{ display: block; } .count{ text-align: center; line-height: 50px; margin-top: 15px; width: 100px; } .title{ width: 100px; text-align: center; font-size: 13px; line-height: 20px; } /* End Of DRS-Style */ --> </style> <script type="text/javascript"> <!-- Stytles when it's loaded in frames if (self !== top) //Check for the master frame { document.write('<style type="text/css">BODY{background: transparent;} DIV.CountDown{margin: 0px;} </style>') } // End of check --> </script> </head> <body> <span style="display: none; visibility: hidden;" class="err" title="about">Day Countdown Script, Produced by DRS David Soft --- david.soft@yahoo.com</span><!-- Please do not remove this line if possible, thank you. --> <table class="CountDown" id="CountDown" cellspacing="1"> <tbody><tr id="count_main"> <td class="clock"> <div class="surface"> <div class="glass"></div> <canvas id="Canvas_y" width="188" height="188"> </canvas> <div class="text"> <span id="count_y" class="count ">2</span> <span id="title_y" class="titles">year</span> </div> </div> </td> <td class="clock"> <div class="surface"> <div class="glass"></div> <canvas id="Canvas_n" width="188" height="188"> </canvas> <div class="text"> <span id="count_n" class="count ">8</span> <span id="title_n" class="titles">Months</span> </div> </div> </td> <td class="clock"> <div class="surface"> <div class="glass"></div> <canvas id="Canvas_w" width="188" height="188"> </canvas> <div class="text"> <span id="count_w" class="count ">1</span> <span id="title_w" class="titles">Week</span> </div> </div> </td> <td class="clock"> <div class="surface"> <div class="glass"></div> <canvas id="Canvas_d" width="188" height="188"> </canvas> <div class="text"> <span id="count_d" class="count ">1</span> <span id="title_d" class="titles">Day</span> </div> </div> </td> <td class="clock"> <div class="surface"> <div class="glass"></div> <canvas id="Canvas_h" width="188" height="188"> </canvas> <div class="text"> <span id="count_h" class="count ">4</span> <span id="title_h" class="titles">Hours</span> </div> </div> </td> <td class="clock"> <div class="surface"> <div class="glass"></div> <canvas id="Canvas_m" width="188" height="188"> </canvas> <div class="text"> <span id="count_m" class="count ">37</span> <span id="title_m" class="titles">Minutes</span> </div> </div> </td> <td class="clock"> <div class="surface"> <div class="glass"></div> <canvas id="Canvas_s" width="188" height="188"> </canvas> <div class="text"> <span id="count_s" class="count ">32</span> <span id="title_s" class="titles">Seconds</span> </div> </div> </td> </tr> <tr> <td colspan="7" class="tabledash" id="tabledash"> <noscript> <style type="text/css"> .CountDown .titles, .CountDown .count{ display: none; } .CountDown .tabledash{ border-bottom: 0px hidden transparent; } </style> <div class='err'> Scripts are Disabled. </div> </noscript> <div id="tablefinish" class="finish" style="display: none;"> [Counting Finished] </div> </td> </tr> </tbody></table> <script type="text/javascript"> <!-- Begin of Day Countdown Script // Produced by DRS David Soft // david.soft@yahoo.com function stopCount(){ window.CountActive = false; } function startCount(){ window.CountActive = true; finish(-1); calculate(); } var Amount = {Y:0,N:0,W:0,D:0,H:0,M:0,S:0}; window.Remain = Amount; var table={ all: element("CountDown"), count: { y : element("count_y"), n : element("count_n"), w : element("count_w"), d : element("count_d"), h : element("count_h"), m : element("count_m"), s : element("count_s"), all: element("count_main") }, title: { y : element("title_y"), n : element("title_n"), w : element("title_w"), d : element("title_d"), h : element("title_h"), m : element("title_m"), s : element("title_s") }, dash: element("tabledash"), finish: element("tablefinish") } var ServerTime = {//diffrent methods of getting server date SSI: '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->', PHP: '<? print date("F d, Y H:i:s", time())?>', ASP: '<% Response.Write(DateTime.Now.ToString())%>', JSP: '<%@page contentType="text/html" import="java.util.*" %> <%= new java.util.Date() %>', } for(method in ServerTime) if(ServerTime[method].toLowerCase().indexOf('date') == -1){ var ServerTime = ServerTime[method]; break; } if (typeof ServerTime == 'object') window.useServerTime = false; if (window.useServerTime) { var serverDate = new Date(ServerTime); var clientDate = new Date(); window.diffrence = (serverDate.valueOf()-clientDate.valueOf()); } window.diffrence = window.diffrence || 0; function getDNow(cus){ var cus = cus || new Date(); var cus = new Date( cus.valueOf() + window.diffrence + window.customFix ); var date_now = new Date(cus); return date_now; } function calcage(secs, num1, num2) { return ((Math.floor(secs/num1))%num2); } var DaysInMonth = [ ۳۱,۲۹,۳۱, ۳۰,۳۱,۳۰, ۳۱,۳۱,۳۰, ۳۱,۳۰,۳۱]; function isLeap(Year){ return (Year % 4 == 0 && Year % 100 != 0) || (Year % 400 == 0); } function calculate(dthen, dnow){ var dthen = dthen || new Date(TargetDate); var dnow = dnow || getDNow(); ddiff = new Date(dthen-dnow); gsecs = Math.floor(ddiff.valueOf()/1000); if (window.countUp) gsecs = Math.abs(gsecs); if (gsecs < 0 && !window.countUp) finish(FinishedText); else CountBack(gsecs); } function CountBack(secs) { window.Remain={ Y: 0, N: 0, W: 0, D: calcage(secs,86400,100000), H: calcage(secs,3600,24), M: calcage(secs,60,60), S: calcage(secs,1,60) } var dnow = getDNow(); for (thisYear = dnow.getFullYear(); Remain.D >= (isLeap(thisYear+1)?366:365); thisYear++) { Remain.D -= isLeap(thisYear+1)?366:365; Remain.Y ++; } for (thisMonth = dnow.getMonth(); Remain.D >= DaysInMonth[thisMonth];thisMonth++) { Remain.D -= DaysInMonth[thisMonth]; Remain.N ++; if (thisMonth==11) thisMonth=0; } if (Remain.D >= 7) { Remain.W = Math.floor(Remain.D / 7); Remain.D = Remain.D % 7; } Remain_all = ''; for (R in Remain){ r = R.toLowerCase(); Remain_all += Remain[R].toString(); if(parseInt(Remain_all) <= 0){ classNames.add(table.count[r].parentNode.parentNode.parentNode, 'hidden'); } else { classNames.remove(table.count[r].parentNode.parentNode.parentNode, 'hidden'); } Update_TXT(table.count[r], Remain[R]); AutoPlural(table.title[r], Remain[R]); } if (window.CountActive) setTimeout("calculate()", interval); } function finish(customEvent){ if(customEvent === -1){ table.count.all.style.display = ''; table.finish.style.display = 'none'; } else{ if(typeof customEvent == 'string'){ table.finish.innerHTML = customEvent; } table.count.all.style.display = 'none'; table.finish.style.display = ''; } } function image(txt){ var segments = ''; for (s=0;s<txt.length;s++) segments += _segment.replace(/%s/g, txt[s]); return segments; } function Update_TXT(obj, text){ if (!obj || !obj.innerHTML) return false; text = text.toString(); if (text.length < 2 && window.padding) text = "0" + text; if (typeof _segment == 'string') text = image(text); obj.oldInnerHTML = obj.innerHTML; obj.innerHTML = obj.innerHTML.replace(new RegExp(' ', 'gi'), '') if (obj.innerHTML == '') obj.innerHTML = window.padding?'00':'0'; if (obj.innerHTML != text) { if (blink && blink > 0) { window.clearTimeout(blinkIn); var blinkIn = window.setTimeout ("classNames.add (element('"+obj.id+"'), 'blink')", 1); window.clearTimeout(blinkOut); var blinkOut = window.setTimeout ("classNames.remove(element('"+obj.id+"'), 'blink')", 1 + blink); } obj.innerHTML = text; } return obj.oldInnerHTML; } function AutoPlural(obj, num){ if ((typeof pluralSign != 'string' || pluralSign == "") || (!obj || !obj.innerHTML) || (!num && num != 0)) return false; num = num.toString(); text = obj.innerHTML; while (text.slice(-1) == ' ') text = text.slice(0,-1) if (text.slice(-pluralSign.length) == pluralSign) text = text.slice(0,-pluralSign.length) if (num > 1) text += pluralSign; obj.innerHTML = text; } function element(id){ if (document.getElementById) { var return_var = document.getElementById(id); } else if (document.all) { var return_var = document.all[id]; } else if (document.layers) { var return_var = document.layers[id]; } else { alert("Can not fetch Element with '"+id+"' id."); } return return_var; } if (document.getElementsByClassName == undefined) document.getElementsByClassName = function (className, node, tag){ node = node || this; tag = tag || '*'; els = node.getElementsByTagName(tag); wnt = new Array; for (var count=0 ; els.length > count ; count ++) if ( (els[count]) && (els[count].className.indexOf(className) != -1) && (new RegExp("(?:^|\\s)" + className + "(?:$|\\s)")).test(els[count].className) ) wnt = wnt.concat(els[count]); return wnt; } var classNames = { add: function (object, className) { if (!this.has(object, className)) object.className += ' ' + className; }, has: function (object, className) { if (object.className.indexOf(className)==-1) return false; else return true; }, remove: function (object, className) { if (this.has(object, className)) object.className = object.className.replace(className, '').replace(new RegExp(' ', 'gi'), ' ') }, replace: function (object, classNamesArray) { this.add(object, classNamesArray[0]); this.remove(object, classNamesArray[1]); } } function getStyle(x, styleProp) { if (!x) return; if (x.currentStyle) var y = x.currentStyle[styleProp]; else if (window.getComputedStyle) var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); return y; } function Progress(glob){ var canvas = element('Canvas_'+glob.r); var ctx = canvas.getContext("2d"); if(!glob.color) glob.color = getStyle(element('title_'+glob.r), 'color') ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.strokeStyle = glob.color; ctx.shadowBlur = 5; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowColor = glob.glow || glob.color; ctx.arc(94,94,85, deg(0), deg(glob.amount)); ctx.lineWidth = 17; ctx.stroke(); } function Ease(){ for (R in Remain){ Amount[R] += (Remain[R] - Amount[R]) / Damping Progress({r: R.toLowerCase(), amount: 360 * Amount[R] / Total[R] }) } window.clearTimeout(window.e); window.e = window.setTimeout('Ease()', 30) } function deg(deg) { return (Math.PI/180)*deg - (Math.PI/180)*90 } var Total = {Y:10,N:12,W:4,D:DaysInMonth[getDNow().getMonth()],H:60,M:60,S:60}; // All Scripts all loaded, so starting them. calculate(); Ease(); // End of Scripts --> </script><div style="position:absolute;top:-200%;"><h1><a href="https://www.codebazan.ir/">کدبازان</a></h1></div> </body><style type="text/css"> body{ background-color:#999; } </style>