ホームページ  >  記事  >  ウェブフロントエンド  >  Javascript はカウントダウン ジャンプを実装します page_javascript スキル

Javascript はカウントダウン ジャンプを実装します page_javascript スキル

WBOY
WBOYオリジナル
2016-05-16 15:19:381085ブラウズ
多くの Web ページには同様の効果があります。つまり、指定された時間が経過すると、カウントダウン効果が発生します。この章では、この効果を実現する方法を紹介します。は次のとおりです:

<script type="text/javascript"> 
var t=10;
setInterval("refer()",1000); 
function refer(){ 
 if(t==0){ 
 location.href="http://www.jb51.net";
 } 
 document.getElementById('show').innerHTML=""+t+"秒后跳转到脚本之家";
 t--;
} 
</script> 
<span id="show"></span> 
上記のコードは目的の効果を実現しており、10 秒後に指定されたページにジャンプできます。実装プロセスを以下に紹介します。
1. 実装原則:
原理は非常に簡単です。つまり、setInterval() タイマー関数を使用して、refer() 関数を 1 秒ごとに実行することで、一度も実行せずに t を 1 減らすことができ、同時に現在の値を書き込むことができます。 t の値を div に入力します。t が 0 になると、つまりカウントダウンが完了すると、指定したページにジャンプします。原理はほぼ同じです。
2. 関連記事:
1. setInterval() 関数については、「setInterval() 関数の使用法の詳細な説明」の章を参照してください。
2.location.href は、Location オブジェクトhref 属性の章を参照できます。
3. innerHTML 属性については、js の innerHTML 属性の使用法の章を参照してください。

2 つの簡単なジャンプ コードを紹介し、以下に示すようにさまざまな時限ジャンプ コードを要約します。

(1) setTimeout関数を使用してタイミングジャンプを実装します(ボディ領域に以下のコードを記述します)

<script type="text/javascript"> 
//3秒钟之后跳转到指定的页面 
setTimeout(window.location.href='http://www.jb51.net',3); 
</script> 

(2) HTML コードの実装。ページの先頭領域ブロックに次のコードを追加します。

<!--5秒钟后跳转到指定的页面--> 
<meta http-equiv="refresh" content="5;url=http://www.jb51.net" /> 

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