یک طراح وب » script http://aliha.ir لحظاتی با سی اس اس، جی کوئری و پی اچ پی. Sun, 16 Oct 2011 09:19:03 +0000 fa hourly 1 http://wordpress.org/?v=3.0.1 با کمک جی‌کوئری، یک شمارنده برای افتتاح سایت‌تان طراحی کنید http://aliha.ir/2009/10/08/coming-soon-page-with-jquery/ http://aliha.ir/2009/10/08/coming-soon-page-with-jquery/#comments Thu, 08 Oct 2009 15:55:38 +0000 علیها http://aliha.ir/?p=1256 از من می‌پرسید به نظرم به‌تر هست همیشه برای کارهای‌تان ارزش قائل شوید. چون اولین گام ِ موفقیت، اهمیت دادن به آن کار است. پس چه به‌تر که از همان آغاز، یک شروع ِ جالب داشته باشیم.

بگذریم. می‌خواهیم یک چیز ِ کوچولو درست کنیم که تا زمان ِ آغاز به‌کار ِ سایت یا وبلاگ و یا هرچیز ِ دیگری که هست، تعداد روزها و ساعات ِ باقی‌مانده را برای بازدیدکننده‌گان بشمارد. مثلا بگوید “به‌زودی تا ۵ روز و ۸ ساعت و ۲۷ دقیقه و ۴۰ ثانیه‌ی دیگر سایت افتتاح خواهد شد” یا یک همچین‌چیزی :)

coming-soon

کار ِ سختی نیست. اول، کتاب‌خانه‌ی جی‌کوئری را از اینجا بگیرید (اگر اجازه نداد، از اینجا بگیرید).

سپس این اسکریپت را دریافت کنید.

یک فایل با نام index.html بسازید و کدهای زیر را در آن بگذارید:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>به‌زودی...</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="countdown.js"></script>
</head>
<body>
<center><div id="count_down_container"></div></center>
<script type="text/javascript">
var currentyear=new Date().getFullYear()
var target_date=new cdtime("count_down_container", "december 31, "+currentyear+" 18:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>
</body>
</html>

در خط ِ ۱۲، تاریخ ِ مربوط به پایان ِ شمارنده را باید تعیین کنید. مثلا من آن را روی آخرین روز ِ سال گذاشته‌ام. یعنی ۳۱اُم دسامبر و همچنین هجده ساعت هم به آن اضافه کرده‌ام.

حالا دستورات ِ سی‌اس‌اس ِ زیر را هم اضافه کنید:

body {background-color: #ddeef6;}
#count_down_container {color: #e43c01; font: bold 150px Georgia; direction: rtl;}
sup {font: bold 13px Tahoma; color: #666; margin-left: 60px;}

در انتخاب‌گر ِ count_down_container، دستورات مربوط به فونت و ظاهر ِ اعداد ِ شمارنده را تعریف می‌کنیم.

خب، تمام شد دیگر. نمونه‌ی این شمارنده را اینجا ببینید و آن را کامل دریافت کنید:

download-zips

25 دیدگاه | فرستادن به: del.icio.us

ایرساوب

]]> http://aliha.ir/2009/10/08/coming-soon-page-with-jquery/feed/ 25