JavaScript定时器案例:显示年月日时分秒+每隔60s发送一次短信
Posted 橘猫吃不胖~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript定时器案例:显示年月日时分秒+每隔60s发送一次短信相关的知识,希望对你有一定的参考价值。
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>
以上是关于JavaScript定时器案例:显示年月日时分秒+每隔60s发送一次短信的主要内容,如果未能解决你的问题,请参考以下文章
excel中如何把年月日时分秒如:20191009053020分成两列