JavaScript定时器案例：显示年月日时分秒+每隔60s发送一次短信

本文主要是介绍JavaScript定时器案例：显示年月日时分秒+每隔60s发送一次短信，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JavaScript定时器案例：显示年月日时分秒+每隔60s发送一次短信

1 显示年月日时分秒
- 1.1 案例说明
- 1.2 编写HTML部分代码
- 1.3 编写JavaScript部分代码
- 1.4 全部代码
2 每隔60s发送一次短信
- 2.1 案例说明
- 2.2 编写HTML部分代码
- 2.3 编写JavaScript部分代码
- 2.4 全部代码

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的数字之前补0function 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的数字之前补0function 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>