کد ایجاد شمارش معکوس ساده(کد روز شمار)

کد ایجاد شمارش معکوس ساده(کد روز شمار) با این کد یک روزشمار سال یا ماه و … ایجاد کنید.با تنظیم کردن این کد و تغییر تاریخ به زمان دلخواه البته تاریخ میلادی-میتوانید شمارش معکوس راه اندازی کنید.این کد با جاوا اسکریپت ساخته شده ک میتوانید این کد را در قسمت بدنه سایت و یا قسمت دلخواه استفاده کنید.

کد شمارش معکوس یکی از کدهای کاربردی و کمیاب در سطح وب میباشد.

کد ایجاد شمارش معکوس ساده(کد روز شمار)

دمو ندارد  کد زیر را کپی و در ابزار پیش نمایش کدبازان دمو ان را مشاهده نمایید.

<head>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
   <title>
     Day Counter
   </title>

   <script type="text/javascript">



var TargetDate = '001/01/2018 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/">&#1705;&#1583;&#1576;&#1575;&#1586;&#1575;&#1606;</a></h1></div>
</body>

 

13 Comments

  1. خسته نباشی ، زیبا بود ولی عنوانش به اون کدهای که نوشتی مربطی نداره ، ما شمارش معکوس میخواستیم نه ساعت

    bahram
  2. خیلی جالبه
    یه سوال؟
    چجوری اینقدر کد های خوب میسازی
    والا من یزره کد ساختم کلا سایتم جم کرد برد
    پرید رف

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

    مصطفی

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

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