ホームページ >ウェブフロントエンド >jsチュートリアル >jsでカウントダウン関数を実装するにはどうすればよいですか? (ミリ秒単位の精度)
jsでカウントダウン関数を実装するにはどうすればよいですか? (ミリ秒単位の精度)
- 藏色散人オリジナル
- 2018-08-06 15:16:544141ブラウズ
この記事では、js を使用してカウントダウンを実装する効果を主に紹介しており、それを必要とする友人は参考にしていただければ幸いです。
カウントダウンを実装するjsの具体的なコード例は以下の通りです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>js精确到毫秒的倒计时代码 </title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var times = 60 * 100; // 60秒
countTime = setInterval(function() {
times = --times < 0 ? 0 : times;
var ms = Math.floor(times / 100).toString();
if(ms.length <= 1) {
ms = "0" + ms;
}
var hm = Math.floor(times % 100).toString();
if(hm.length <= 1) {
hm = "0" + hm;
}
if(times == 0) {
alert("游戏结束");
clearInterval(countTime);
}
// 获取分钟、毫秒数
$(".a").html(ms);
$(".b").html(hm);
}, 10);
});
</script>
<style>
.warp{
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 40px;
font-family: "微软雅黑";
}
.warp strong{
width: 100px;
display: inline-block;
text-align: center;
font-family: georgia;
color: #C9302C;
}
</style>
</head>
<body>
<div class="warp">
<strong class="a">111</strong>秒 <strong class="b"></strong>毫秒</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
【おすすめ関連記事】
以上がjsでカウントダウン関数を実装するにはどうすればよいですか? (ミリ秒単位の精度)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。