JavaScript定时器案例：显示年月日时分秒+每隔60s发送一次短信
1 显示年月日时分秒
1.1 案例说明
在网页上显示当前的时间，XX年XX月XX日XX时XX分XX秒。
效果图：
1.2 编写HTML部分代码
html部分代码非常简单，只需要写一个div即可，用来将时间显示在其中，代码为：
<div></div>
1.3 编写JavaScript部分代码
首先要获取页面中的div元素：
//获取div元素
let div = document.querySelector("div");
接着定义一个函数，使月日时分秒中小于10的数字前面补一个0：
//判断传入的数字是否大于10，如果小于10给小于10的数字之前补0
function f(d) {
d = d > 10 ? d : "0" + d;
return d;
}
然后写一个函数来获取并显示当前的时间：
//写一个函数用来显示时间
function showTime() {
let today = new Date();//实例化日期对象，没有传入参数默认为今天的日期
let year = today.getFullYear();//获取今天的年份
let month = today.getMonth() + 1;//获取今天的月份，月份默认0为1月，因此加1显示本月
let day = today.getDate();//获取今天是本月的哪天
let hour = today.getHours();//获取今天的小时数
let minute = today.getMinutes();//获取现在的分钟数
let second = today.getSeconds();//获取现在的秒数
//定义要显示在div中的字符串，让月日时分秒调用f()函数
let str = year + "年" + f(month) + "月" + f(day) + "日" + f(hour) + "时" + f(minute) + "分" + f(second) + "秒";
//将字符串显示在div中
div.innerHTML = str;
//定时器，使每秒调用一次showTime函数
setTimeout(showTime, 1000);
}
最后让页面加载完成后开始调用showTime()函数：
//让页面加载后开始显示时间
window.onload = showTime();
JavaScript部分就完成了。
1.4 全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script>
//获取div元素
let div = document.querySelector("div");
//判断传入的数字是否大于10，如果小于10给小于10的数字之前补0
function f(d) {
d = d > 10 ? d : "0" + d;
return d;
}
//写一个函数用来显示时间
function showTime() {
let today = new Date();//实例化日期对象，没有传入参数默认为今天的日期
let year = today.getFullYear();//获取今天的年份
let month = today.getMonth() + 1;//获取今天的月份，月份默认0为1月，因此加1显示本月
let day = today.getDate();//获取今天是本月的哪天
let hour = today.getHours();//获取今天的小时数
let minute = today.getMinutes();//获取现在的分钟数
let second = today.getSeconds();//获取现在的秒数
//定义要显示在div中的字符串
let str = year + "年" + f(month) + "月" + f(day) + "日" + f(hour) + "时" + f(minute) + "分" + f(second) + "秒";
//将字符串显示在div中
div.innerHTML = str;
//定时器，使每秒调用一次showTime函数
setTimeout(showTime, 1000);
}
//让页面加载后开始显示时间
window.onload = showTime();
</script>
</body>
</html>
2 每隔60s发送一次短信
2.1 案例说明
网页中发送验证码短信时，点击按钮之后开始倒计时60秒，60秒之内按钮不能使用，60秒过后按钮恢复正常。（注：不能实现发短信功能，只能实现效果）
实现思路：
在页面中放一个文本框和一个“发送”按钮。
在文本框中输入手机号码，然后单击“发送”按钮，就可以发送短信。
在按钮单击之后，按钮上的文字会变为“还剩x秒再次单击”。
效果图如下，点击按钮之前：
点击按钮后，按钮改变：
倒计时完成后，按钮恢复：
2.2 编写HTML部分代码
HTML部分需要写一个文本框以及一个按钮。
手机号码：
<input type="text">
<button>发送</button>
2.3 编写JavaScript部分代码
JavaScript部分需要对按钮添加事件，当点击按钮后，按钮不可用，并且按钮上的倒计时会每秒钟变化，当倒计时结束后，按钮恢复原来的样子。
<script>
//获取button元素
let btn = document.querySelector("button");
//给button按钮添加click事件
btn.addEventListener("click", function () {
btn.disabled = true;//按钮不可用
let time = 59;//倒计的时间
//创建定时器
let timer = setInterval(function () {
if (time == 0) {
//按钮可用
btn.disabled = false;
//文字改变
btn.innerHTML = "发送";
//清除定时器效果
clearInterval(timer);
} else {
btn.innerHTML = "还剩" + time + "秒";
time--;
}
}, 1000);//每隔1s调用一次
})
</script>
2.4 全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
手机号码：
<input type="text">
<button>发送</button>
<script>
//获取button元素
let btn = document.querySelector("button");
//给button按钮添加click事件
btn.addEventListener("click", function () {
btn.disabled = true;//按钮不可用
let time = 59;//倒计的时间
//创建定时器
let timer = setInterval(function () {
if (time == 0) {
//按钮可用
btn.disabled = false;
//文字改变
btn.innerHTML = "发送";
//清除定时器效果
clearInterval(timer);
} else {
btn.innerHTML = "还剩" + time + "秒";
time--;
}
}, 1000);//每隔1s调用一次
})
</script>
</body>
</html>