Cấp bậc tác giả:

HTML

Bộ đếm thời gian giảm dần

Được viết bởi QuangIT ngày 17/04/2013 lúc 08:22 PM
Với bộ định thời gian đơn giản này, bạn sẽ dễ dàng thông báo cho khách truy cập biết trang web sẽ chuyển tới. Đoạn mã khá ngắn gọn và rất dễ để chỉnh sửa phù hợp nhu cầu, vì vậy đoạn mã chỉ thuần JavaScript và bạn phải sử dụng CSS để trang trí thêm nếu muốn có một hiệu ứng bắt mắt hơn.
  • 0
  • 1387

Bộ đếm thời gian giảm dần


Với bộ định thời gian đơn giản này, bạn sẽ dễ dàng thông báo cho khách truy cập biết trang web sẽ chuyển tới. Đoạn mã khá ngắn gọn và rất dễ để chỉnh sửa phù hợp nhu cầu, vì vậy đoạn mã chỉ thuần JavaScript và bạn phải sử dụng CSS để trang trí thêm nếu muốn có một hiệu ứng bắt mắt hơn.

CSS:

<style type="text/css">

html {

 background:#222;

 height:100%;

}

body {

 font:normal 76% verdana,tahoma,arial;color:#fff;

}

a {

 color:#99ffff;

}

a:hover {

 color:#ffff00;

}

h1, h2 {

 font:normal 1em georgia,helvetica,arial;

 letter-spacing:-0.5px; /* it isn't web 2.0 otherwise, right? ;) */

}

p {

 margin:0.5em 0px 1.25em 0px;

 padding:0px;

 line-height:1.7em;

}


/*COUNTER SPECIFIC STYLES */

.counter{

width: 610px;

}

.counter ul.countdown{

list-style-type: none;

color: white;

font-weight: bold;

text-align: center;

}

.counter ul.countdown li{

float: left;

background: url(digit.png) no-repeat;

height:110px;

width: 105px;

padding-top: 15px;

}

.counter ul.countdown li div{

font-size: 15px;

}

.counter ul.countdown li div.countdown_num{

font-size: 48px;

}

.counter ul.countdown li.no_countdown{

padding-top:4px;

background:transparent;

height:110px;

width:180px;

}

</style>


HTML:


<div id="counter" class="counter">

<ul class="countdown">

<li><div class="countdown_num" id="countdown_day"></div><div>Days</div></li>

<li><div class="countdown_num" id="countdown_hour"></div><div>Hours</div></li>

<li><div class="countdown_num" id="countdown_min"></div><div>Minutes</div></li>

<li><div class="countdown_num" id="countdown_sec"></div><div>Seconds</div></li>

</ul>

</div>

<div id="expired" style="display:none;">

The deadline has passed.

</div>

<script type="text/javascript">

/*

Countdown Timer

Based on the "Count down until any date script" - By JavaScript Kit (www.javascriptkit.com)

Author: (c) 2009 Elbert Bautista

URL: http://www.egTheBlog.com

Licence : Open Source MIT Licence


*/

var current="Expired"

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")


function countdown(yr,m,d){

theyear=yr;themonth=m;theday=d

var today=new Date()

var todayy=today.getYear()

if (todayy < 1000)

todayy+=1900

var todaym=today.getMonth()

var todayd=today.getDate()

var todayh=today.getHours()

var todaymin=today.getMinutes()

var todaysec=today.getSeconds()

var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec

futurestring=montharray[m-1]+" "+d+", "+yr

dd=Date.parse(futurestring)-Date.parse(todaystring)

dday=Math.floor(dd/(60*60*1000*24)*1)

dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)

dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)

dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)

if(dday==0&&dhour==0&&dmin==0&&dsec==1){

document.getElementById('counter').style.display='none';

document.getElementById('expired').style.display='block';

return

}

else{

document.getElementById('countdown_day').innerHTML=dday;

document.getElementById('countdown_hour').innerHTML=dhour;

document.getElementById('countdown_min').innerHTML=dmin;

document.getElementById('countdown_sec').innerHTML=dsec;

setTimeout("countdown(theyear,themonth,theday)",1000)

}

}


var deadline=new Date();

deadline.setDate(deadline.getDate()+5);

var deadlineYear = deadline.getYear();

if (deadlineYear < 1000)

deadlineYear+=1900

//enter the count down date using the format year/month/day

countdown(deadlineYear, deadline.getMonth()+1, deadline.getDate());

</script>


Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML