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

Posted 橘猫吃不胖~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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发送一次短信的主要内容,如果未能解决你的问题,请参考以下文章

基于单片机定时器---年月日时分秒的算法

java 获取服务器的时间,年月日时分秒

excel中如何把年月日时分秒如:20191009053020分成两列

excel中如何将年月日和时分秒分开

在jsp页面中得到的时间:年月日时分秒,但在时间控件wdatepicker中不能显示出时分秒,只显示出年月日。求

java获取的日期只显示年月日不显示时分秒,怎么处理