کد ساخت روزشمار گرافیکی و زیبا

کد ساخت روزشمار گرافیکی و زیبا با این کد شما میتوانید برای پروژه ها و کارهای خود یک روزشمار بسیار زیبا ایجاد کنید این کد روز شمار که قسمتهای مورد نیاز به ویرایشش در کد تگ گذاری شده و خیلی راحت میتوانید شخصی سازی کنید را در ادامه مطلب برای شما قرار میدم امیدوارم مفید واقع بشه.

کد روزشمار گرافیکی

<!-- 
روزشمار گرافیکی و زیبا برای شما دوستان کدبازانی
 -->

   <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>
&lt;style type="text/css"&gt;
.CountDown .titles, .CountDown .count{
	display: none;
}

.CountDown .tabledash{
	border-bottom: 0px hidden transparent;
}
&lt;/style&gt;

&lt;div class='err'&gt;
Scripts are Disabled.
&lt;/div&gt;
</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/">&#1705;&#1583;&#1576;&#1575;&#1586;&#1575;&#1606;</a></h1></div>
</body><style type="text/css">
body{
    background-color:#999;
}
</style>


 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *