ホームページ > 記事 > ウェブフロントエンド > jQuery_jquery に基づいた美しく実用的なカウントダウン サンプル コードを実装する
jQuery_jquery に基づいた美しく実用的なカウントダウン サンプル コードを実装する
- WBOYオリジナル
- 2016-05-16 15:22:411092ブラウズ
カウントダウン エフェクトには、オリンピックのカウントダウン、大学入学試験のカウントダウン、休日のカウントダウンなど、幅広い用途があります。このセクションでは、より美しく実用的なカウントダウン エフェクトを共有します。
コード例は次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>倒计时效果代码</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
.colockbox {
width:250px;
height:30px;
overflow:hidden;
color:#000000;
background:url(mytest/jQuery/colockbg.png) no-repeat;
margin:0px auto;
}
.colockbox span {
float:left;
display:block;
width:40px;
height:29px;
line-height:29px;
font-size:20px;
font-weight:bold;
text-align:center;
color:#ffffff;
margin-right:22px;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
countDown("2016/2/3 6:30:59","#colockbox1");
});
function countDown(time,id){
var day_elem=$(id).find('.day');
var hour_elem=$(id).find('.hour');
var minute_elem=$(id).find('.minute');
var second_elem=$(id).find('.second');
var end_time = new Date(time).getTime();
var sys_second = (end_time-new Date().getTime())/1000;
var timer = setInterval(function(){
if(sys_second>1) {
sys_second-=1;
var day=Math.floor((sys_second/3600)/24);
var hour=Math.floor((sys_second/3600)%24);
var minute=Math.floor((sys_second/60)%60);
var second=Math.floor(sys_second%60);
$(day_elem).text(day);
$(hour_elem).text(hour<10?"0"+hour:hour);
$(minute_elem).text(minute<10?"0"+minute:minute);
$(second_elem).text(second<10?"0"+second:second);
}
else {
clearInterval(timer);
}
}, 1000);
}
</script>
</head>
<body>
<div class="colockbox" id="colockbox1">
<span class="day">00</span>
<span class="hour">00</span>
<span class="minute">00</span>
<span class="second">00</span>
</div>
</body>
</html>
上記のコードは要件を満たしており、数秒から数日のカウントダウン効果を実現できます。実装プロセスを以下に紹介します。
1. 実装原則:
原理は比較的単純で、有効期限のタイムスタンプから現在の時刻のタイムスタンプを引いたものを取得し、この秒数を 3600 で割って数値を取得します。時間差を計算し、Take 24 を除算し、Math.floor() 関数を使用して日数を切り捨てます。この原則は、以下の時、分、秒を取得するために使用されます。タイマー関数を使用して、対応する関数を毎秒呼び出して、カウントダウン効果を実現します。
2. コードのコメント:
1.$(function(){})、ドキュメント構造が完全にロードされたら、関数内のコードを実行します。
2.countDown("2016/2/3 6:30:59","#colockbox1") で関数を呼び出します。最初のパラメータは有効期限、2 番目のパラメータは div の id 属性値です。
3.function countDown(time,id){}、この関数を宣言します。
4.var day_elem=$(id).find('.day')、div配下のclass属性値がdayであるオブジェクトを取得します。
5.varhour_elem=$(id).find('.hour')、div配下のclass属性値がhourであるオブジェクトを取得します。
6.var minutes_elem=$(id).find('.month') で、div配下のclass属性値がminuteであるオブジェクトを取得します。
7.var Second_elem=$(id).find('.second') は、div の 2 番目にある class 属性値を持つオブジェクトを取得します。
8.var end_time=new Date(time).getTime()、有効期限イベントのタイムスタンプを取得します。
9.var sys_second=(end_time-new Date().getTime())/1000、有効期限と現在時刻の差の秒数を取得します。
10.var timer=setInterval(function(){}, 1000)、関数を毎秒実行します。
11.if(sys_sec>1) (秒単位の差が 1 より大きい場合)。
12.sys_second-=1、2 番目から 1 を減算します。
13.var day=Math.floor((sys_second/3600)/24)、日数の差を取得します。
14.varhour=Math.floor((sys_second/3600)%24)、時間差を取得します。以下はモジュロ演算であることに注意してください。
15.var minutes=Math.floor((sys_秒/60)%60)、差分数を取得します。
16.var Second=Math.floor(sys_second%60)、秒数の差を取得します。
17.$(day_elem).text(day)、span要素に日を書き込みます。
18.$(hour_elem).text(hour
19.clearInterval(timer)、秒数の差が 0 になった場合、タイマー関数 setInterval の実行を停止します。
上記の内容は、編集者が共有した、美しく実用的なカウントダウン サンプル コードです。この記事が皆様のお役に立てれば幸いです。