jQuery_jquery に基づいた美しく実用的なカウントダウン サンプル コードを実装する
カウントダウン エフェクトには、オリンピックのカウントダウン、大学入学試験のカウントダウン、休日のカウントダウンなど、幅広い用途があります。このセクションでは、より美しく実用的なカウントダウン エフェクトを共有します。
コード例は次のとおりです:
<!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 の実行を停止します。
上記の内容は、編集者が共有した、美しく実用的なカウントダウン サンプル コードです。この記事が皆様のお役に立てれば幸いです。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7364
15
1628
14
1353
52
1265
25
1214
29
JavaScriptの文字列文字を交換します
Mar 11, 2025 am 12:07 AM
JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi
カスタムGoogle検索APIセットアップチュートリアル
Mar 04, 2025 am 01:06 AM
このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です！検索をyに制限することができます
8見事なjQueryページレイアウトプラグイン
Mar 06, 2025 am 12:48 AM
楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます
独自のAjax Webアプリケーションを構築します
Mar 09, 2025 am 12:11 AM
それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました
＆＃x27; this＆＃x27; JavaScriptで？
Mar 04, 2025 am 01:15 AM
コアポイント これは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。 現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。 関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした
モバイル開発用のモバイルチートシート10個
Mar 05, 2025 am 12:43 AM
この投稿は、Android、BlackBerry、およびiPhoneアプリ開発用の有用なチートシート、リファレンスガイド、クイックレシピ、コードスニペットをコンパイルします。 開発者がいないべきではありません！ タッチジェスチャーリファレンスガイド（PDF） Desigの貴重なリソース
ソースビューアーでjQueryの知識を向上させます
Mar 05, 2025 am 12:54 AM
jQueryは素晴らしいJavaScriptフレームワークです。ただし、他のライブラリと同様に、何が起こっているのかを発見するためにフードの下に入る必要がある場合があります。おそらく、バグをトレースしているか、jQueryが特定のUIをどのように達成するかに興味があるからです
独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？
Mar 18, 2025 pm 03:12 PM
記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。
