ホームページ > 記事 > ウェブフロントエンド > シンプルなストップウォッチエフェクトをjsで実装する方法
シンプルなストップウォッチエフェクトをjsで実装する方法
- 王林転載
- 2020-03-14 11:24:462087ブラウズ
説明:
シンプルなストップウォッチを実装します。スタート ボタンをクリックするとタイミングが開始され、スタート ボタンが一時停止に変わり、
一時停止をクリックします。タイミングを一時停止するには、「リセット」をクリックして初期状態に戻します。
効果:
(推奨チュートリアル: javascript チュートリアル)
コードは次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#showTime
{
width: 300px;
height: 60px;
font-size: 60px;
line-height: 60px;
}
</style>
</head>
<body>
<div>
<div id="showTime">00:00:00</div>
<button id="startBn">启动</button>
<button id="restBn">复位</button>
</div>
<script>
//——————
var time,showTime,startBn,restBn,pauseDate;
//布尔开关
var bool=false;
//暂停的累计时间
var pauseTime=0;
init();
function init() {
showTime=document.getElementById("showTime");
startBn=document.getElementById("startBn");
restBn=document.getElementById("restBn");
startBn.addEventListener("click",clickHandler);//开始按钮 ~ 暂停按钮
restBn.addEventListener("click",clickHandler);//复位按钮
setInterval(animation,16);
}
//转化时间函数
function animation() {
if(!bool) return;
//前时间减去上次开启时间减去暂停累计时间
var times=new Date().getTime()-time-pauseTime;
var minutes=Math.floor(times/60000);//毫秒转化为分钟
var seconds=Math.floor((times-minutes*60000)/1000);//已知分钟
将time减去分钟 除去1000得出 秒
var ms=Math.floor((times-minutes*60000-seconds*1000)/10);//
showTime.innerHTML=
(minutes<10 ? "0" +minutes : minutes)+":"
+(seconds<10 ? "0"+seconds :seconds)+":"
+(ms<10 ? "0"+ms : ms);
}
//点击时的事件
function clickHandler(e) {
e= e || window.event;
if(this===startBn){
bool=!bool;
if(bool){
this.innerHTML="暂停";
//如果我们上一次暂停时间是空，表示没有暂停过，因此，直接返回0
//如果上次的暂停时间是有值得，用当前毫秒数减去上次的毫秒数，这样就会得到暂停时间
pauseTime+=(!pauseDate ? 0 : new Date().getTime()-pauseDate);
if(time) return;
time=new Date().getTime();
return;//是为bool判断跳出
}
this.innerHTML="启动";
pauseDate=new Date().getTime();
return;//是为this是否等于startBn判断跳出
}
startBn.innerHTML="启动";
pauseTime=0;
pauseDate=null;
bool=false;
time=0;
showTime.innerHTML="00:00:00";
}
</script>
</body>
</html>さらにクールな JavaScript 特殊効果コードは、次の場所から入手できます: javascript 特殊効果
以上がシンプルなストップウォッチエフェクトをjsで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はjb51.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。