پلاگین ساخت شمارش معکوس

به نام خدا

در این پست قصد داریم تا پلاگینی را به شما معرفی کنیم که با استفاده از آن می توانید یک شمارش معکوس ایجاد نمایید.

ابتدا فایلهای پلاگین را از اینجا دانلود نمایید.

سپس کد زیر را در تگ head وارد نمایید:

 <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

بعد از آن کدهای زیر را وارد نمایید:

<div style="color:#fff;">
	<h1><center > ...... <a href="http://www.tarahsite.net" >طراح سایت</a> ......</center></h1>
    <h2> <center>	WWW.TARAHSITE.NET	</center></h2>
    <hr />
    </div>
    
	<div id="wrapping">
		<div id="clock-ticker" class="clearfix">
			<div class="block">
				<span class="flip-top" id="numdays">8</span>
				<span class="flip-btm"></span>
				<footer class="label">Days(روز)</footer>
			</div>
			
			<div class="block">
				<span class="flip-top" id="numhours">14</span>
				<span class="flip-btm"></span>
				<footer class="label">Hours(ساعت)</footer>
			</div>
			
			<div class="block">
				<span class="flip-top" id="nummins">34</span>
				<span class="flip-btm"></span>
				<footer class="label">Mins(دقیقه)</footer>
			</div>
			
			<div class="block">
				<span class="flip-top" id="numsecs">9</span>
				<span class="flip-btm"></span>
				<footer class="label">Secs(ثانیه)</footer><br>

			</div>
		</div>
	</div>
	
<script type="text/javascript">
$(document).ready(function(){
	var theDaysBox  = $("#numdays");
	var theHoursBox = $("#numhours");
	var theMinsBox  = $("#nummins");
	var theSecsBox  = $("#numsecs");
	
	var refreshId = setInterval(function() {
	  var currentSeconds = theSecsBox.text();
	  var currentMins    = theMinsBox.text();
	  var currentHours   = theHoursBox.text();
	  var currentDays    = theDaysBox.text();
	  
	  if(currentSeconds == 0 && currentMins == 0 && currentHours == 0 && currentDays == 0) {
	  	// if everything rusn out our timer is done!!
	  	// do some exciting code in here when your countdown timer finishes
	  	
	  } else if(currentSeconds == 0 && currentMins == 0 && currentHours == 0) {
	  	// if the seconds and minutes and hours run out we subtract 1 day
	  	theDaysBox.html(currentDays-1);
	  	theHoursBox.html("23");
	  	theMinsBox.html("59");
	  	theSecsBox.html("59");
	  } else if(currentSeconds == 0 && currentMins == 0) {
	  	// if the seconds and minutes run out we need to subtract 1 hour
	  	theHoursBox.html(currentHours-1);
	  	theMinsBox.html("59");
	  	theSecsBox.html("59");
	  } else if(currentSeconds == 0) {
	  	// if the seconds run out we need to subtract 1 minute
	  	theMinsBox.html(currentMins-1);
	  	theSecsBox.html("59");
	  } else {
      	theSecsBox.html(currentSeconds-1);
      }
   }, ۱۰۰۰);
});
</script>

در این پلاگین ، عدد ۱۰۰۰ نشان دهنده تغییر تایمر در هر ثانیه است که شما می توانید مقدار آن را تغییر دهید.

همچنین می توانید مقدار اعداد روز، ساعت ، دقیقه و ثانیه را نیز تغییر دهید.

مشاهده دمو