jQuery_jquery に基づいた美しく実用的なカウントダウンサンプルコードを実装する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery_jquery に基づいた美しく実用的なカウントダウンサンプルコードを実装する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:22 PM

カウントダウンエフェクトには、オリンピックのカウントダウン、大学入学試験のカウントダウン、休日のカウントダウンなど、幅広い用途があります。このセクションでは、より美しく実用的なカウントダウンエフェクトを共有します。

コード例は次のとおりです:

<!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&#63;"0"+hour:hour);
   $(minute_elem).text(minute<10&#63;"0"+minute:minute); 
   $(second_elem).text(second<10&#63;"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 の実行を停止します。

上記の内容は、編集者が共有した、美しく実用的なカウントダウンサンプルコードです。この記事が皆様のお役に立てれば幸いです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホット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）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7338

Java チュートリアル

1627

CakePHP チュートリアル

1352

Laravel チュートリアル

1265

PHP チュートリアル

1210

Related knowledge

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に制限することができます

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

例JSONファイルの例 Mar 03, 2025 am 12:35 AM

この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。キー価値ペア表記を使用して、あらゆる種類を保存できます

8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

＆＃x27; this＆＃x27; JavaScriptで？ Mar 04, 2025 am 01:15 AM

コアポイントこれは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした