ホームページ > 記事 > ウェブフロントエンド > JSで実装したカウントダウンエフェクト例（2例）_JavaScriptスキル
JSで実装したカウントダウンエフェクト例（2例）_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 15:23:571371ブラウズ
この記事の例では、JS によって実装されたカウントダウン効果について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
一部の Web サイトでは、登録時にボタンのカウントダウン効果を使用することがよくあります。これは、登録に関する注意事項を強制的に読むことを目的としています。非常に実用的な効果です。さらに、オンライン試験を受けると必ずカウントダウン効果が発生します。このカウントダウン効果はどのようにして実現されるのでしょうか。次に、Js を使用してカウントダウン効果、特定のコードを実装します:
HTML ページ:
<html>
<head>
<title>倒计时</title>
<!--以下为css样式-->
<style type= "text/css">
.daojishi h2
{
font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;
font-size:14px;
margin-bottom:5px;
color:#151515;
}
.daojishi #timer
{
font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;
font-size:14px;
color:#151515;
font-weight:bold;
}
</style>
<script type = "text/javascript" src = "timer.js">
</script>
</head>
<body onload = "timer()">
<div class = "daojishi">
<h2>剩余时间为：</h2>
<div id = "timer">
</div>
</div>
</body>
</html>
タイマー.js:
function timer()
{
var ts = (new Date(2018, 11, 11, 9, 0, 0)) - (new Date());//计算剩余的毫秒数
var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数
var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数
var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数
var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数
dd = checkTime(dd);
hh = checkTime(hh);
mm = checkTime(mm);
ss = checkTime(ss);
document.getElementById("timer").innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒";
setInterval("timer()",1000);
}
function checkTime(i)
{
if (i < 10) {
i = "0" + i;
}
return i;
}
実行中のエフェクトのスクリーンショットは次のとおりです:
別の JS カウントダウン エフェクトを見てみましょう:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时js代码</title>
</head>
<body>
<DIV id="CountMsg" class="HotDate">
<span id="t_d">00天</span>
<span id="t_h">00时</span>
<span id="t_m">00分</span>
<span id="t_s">00秒</span>
</DIV>
<script type="text/javascript">
function getRTime(){
var EndTime= new Date('2016/05/1 10:00:00'); //截止时间
var NowTime = new Date();
var t =EndTime.getTime() - NowTime.getTime();
/*var d=Math.floor(t/1000/60/60/24);
t-=d*(1000*60*60*24);
var h=Math.floor(t/1000/60/60);
t-=h*60*60*1000;
var m=Math.floor(t/1000/60);
t-=m*60*1000;
var s=Math.floor(t/1000);*/
var d=Math.floor(t/1000/60/60/24);
var h=Math.floor(t/1000/60/60%24);
var m=Math.floor(t/1000/60%60);
var s=Math.floor(t/1000%60);
document.getElementById("t_d").innerHTML = d + "天";
document.getElementById("t_h").innerHTML = h + "时";
document.getElementById("t_m").innerHTML = m + "分";
document.getElementById("t_s").innerHTML = s + "秒";
}
setInterval(getRTime,1000);
</script>
</body>
</html>
実行中のエフェクトのスクリーンショットは次のとおりです:
読者は自分の好みに応じて使用するカウントダウン コードを選択できます。
この記事が JavaScript プログラミングのすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。