jquery 使用计时器显示当前时间和停止当前时间

2021/4/17 18:28:50

编程Tag： jQuery function var 计时器当前 timer now currentTime

本文主要是介绍jquery 使用计时器显示当前时间和停止当前时间，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!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>
    <script src="./js/jquery-3.6.0.js"></script>
    <script>
       $(function(){

            var timer;
        //    为btnStart按钮绑定事件  开始显示
        $("#btnStart").click(function(){
            //启动计时器
            timer=setInterval(()=>{
                // 获取当前时间
                var now=new Date();
                var year=now.getFullYear();
                var month=now.getMonth()+1;
                var day=now.getDate();
                var hour=now.getHours();
                var minute=now.getMinutes();
                var second=now.getSeconds();

                var currentTime=year+"年"+month+"月"+day+"日"+hour+"时"+minute+"分"+second+"秒";
                $("#currentTime").text(currentTime);
            },1000)
        })

        // 为btnStop按钮绑定事件 停止显示
        $("#btnStop").click(function(){
            // 停止计时器
            clearTimeout(timer)
        })
       }) 
    </script>
</head>
<body>
    <button id="btnStart">开始显示当前时间</button>
        <button id="btnStop">停止显示当前时间</button>
        <h2 id="currentTime"></h2>
</body>
</html>

这篇关于jquery 使用计时器显示当前时间和停止当前时间的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jquery 使用计时器显示当前时间和停止当前时间

相关编程文章