JS简易计时器

最新推荐文章于 2023-12-04 16:55:42 发布

西瓜你个皮皮

最新推荐文章于 2023-12-04 16:55:42 发布

阅读量553

点赞数 1

分类专栏：笔记文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_44907289/article/details/105255967

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JS简易计时器

涉及功能：

动态加载下拉框
ES6拼接html字符串
定时器的设置和清除
str.padStart(targetLength [, padString])

问题总结：

JS字符串拼接：传统拼接用“ ” 和 + 来拼接；ES6用 ` (反引号，不是单引号！！！）标识，用${ }引用变量，{ }可引用表达式（对象，数组，函数等）。
padStart(2, ‘0’) 字符串补全长度。padStart()用于头部补全，padEnd()用于尾部补全。

在这里插入图片描述

var hourChoose = document.getElementById("hour");
var minChoose = document.getElementById("min");
var secChoose = document.getElementById("sec");

var timer = 0;


//动态加载下拉框
function setSelect(el, num) {
	for (var i = 0; i < num; i++) {
		el.innerHTML += `<option value ="${i}">${i}</option>`;  //` `ES6拼接html字符串,用${i}替换了+'i'+
	}
}

setSelect(hourChoose, 24);
setSelect(minChoose, 60);
setSelect(secChoose, 60);



var startBtn = document.querySelector(".btn_start");
var continueBtn = document.querySelector(".btn_continue");
var pauseBtn = document.querySelector(".btn_pause");
var resetBtn = document.querySelector(".btn_reset");

startBtn.onclick = function() {
	//获取值
	var hour = hourChoose.value;
	var min = minChoose.value;
	var sec = secChoose.value;
	// console.log(hour,min,sec);
    //计算总时间
	var totalNum = hour * 3600 / 1 + min * 60 / 1 + sec / 1;
	
    //设置定时器
	timer = setInterval(function() {
		//时间结束时清除定时器,否则值为负
		if (totalNum == 0) {
			clearInterval(timer);
			alert("⏲计时结束!!!");
			return;
		}
		totalNum--;
		rederTime(totalNum);
	}, 1000)
}

var time_hour=document.getElementById('time_hour');
var time_min=document.getElementById('time_min');
var time_sec=document.getElementById('time_sec');

continueBtn.onclick=function(){
	var hour=time_hour.innerHTML;
	var min=time_min.innerHTML;
	var sec=time_sec.innerHTML;
	var totalNum = hour * 3600 / 1 + min * 60 / 1 + sec / 1;
	
	
	timer = setInterval(function() {
		if (totalNum == 0) {
			clearInterval(timer);
			alert("⏲计时结束!!!");
			return;
		}
		totalNum--;
		rederTime(totalNum);
	}, 1000)
}

pauseBtn.onclick=function(){
	clearInterval(timer);
}

resetBtn.onclick=function(){
	clearInterval(timer);
	rederTime(0);

}

//设置事件渲染数据
function rederTime(num) {
	//转换时分秒   str.padStart(targetLength [, padString])用另一个字符串填充当前字符串,填充从当前字符串的开始(左侧)
	var hour = parseInt(num / 3600).toString().padStart(2, '0');
	var min = parseInt((num - hour * 3600) / 60).toString().padStart(2,'0');
	var sec = parseInt(num % 60).toString().padStart(2, '0');

	time_hour.innerHTML = hour;
	time_min.innerHTML = min;
	time_sec.innerHTML = sec;
}

html代码：

<body>
		<div id="home">
			<select id="hour">
			</select>
			<label>时</label>
			
			<select id="min">
			</select>
			<label>分</label>
			
			<select id="sec">
			</select>
			<label>秒</label>
			
			<button class="btn_start">开始</button>
			<button class="btn_pause">暂停</button>
			<button class="btn_continue">继续</button>
			<button class="btn_reset">清零</button>
		</div>
		<div id="box">
			<div id="time_hour">00</div>
			<div id="point">:</div>
			<div id="time_min">00</div>
			<div id="point">:</div>
			<div id="time_sec">00</div>
		</div>
		<script src="01.js" type="text/javascript" charset="utf-8"></script>
	</body>

css代码：

#home{
	display: flex;
	justify-content: center;
	margin-top: 10%;
	border-radius: 5px;
}
#hour{
	width: 100px;
	height: 30px;
	padding: 6px 12px;
}
#min{
	width: 100px;
	height: 30px;
}
#sec{
	width: 100px;
	height: 30px;
}
label{
	font-size: 20px;
	margin-right: 15px;
}
.btn_start{
	width: 100px;
	height: 30px;
	border-radius: 5px;
	margin-left: 20px;
	margin-right: 5px;
	color:white;
	background-color: aquamarine;
	
}
.btn_reset{
	width: 100px;
	height: 30px;
	border-radius: 5px;
	margin-left: 10px;
	color:white;
	background-color: #FF557F;
}
.btn_continue{
	width: 100px;
	height: 30px;
	border-radius: 5px;
	margin-left: 10px;
	color: wheat;
	background-color: aqua;
	}
.btn_pause{
	width: 100px;
	height: 30px;
	border-radius: 5px;
	margin-left: 10px;
	color:wheat;
	background-color: aqua;
}

#box{
	 display: flex;
	 justify-content: center;
	 margin-top: 100px;
}
#box>div{
	font-size: 200px;
	color: #ff557f;
}

西瓜你个皮皮

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS简易计时器

JS简易计时器涉及功能：动态加载下拉框ES6拼接html字符串定时器的设置和清除str.padStart(targetLength [, padString])问题总结：JS字符串拼接：传统拼接用“ ” 和 + 来拼接；ES6用 ` (反引号，不是单引号！！！）标识，用${ }引用变量，{ }可引用表达式（对象，数组，函数等）。padStart(2, ‘0’) 字符串补全长...
复制链接

扫一扫