首页 > 其他分享 >倒计时

倒计时

时间:2024-05-17 14:55:51浏览次数:19  
标签:function 60 totalTime 倒计时 parseInt time var

<!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>倒计时</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>

<body>

    <div id="time"></div>
    <div onclick="start()">开始</div>
    <div onclick="pasue()">暂停</div>
    <script>
        var totalTime = 1 * 60; // 1分钟
        var timeInter = null
        function timeFun() {
            timeInter = setInterval(updataTime, 1000)
        }

        function updataTime() {

            if (totalTime == 0) {
                clearInterval(timeInter);
                return false
            }
            totalTime = totalTime - 1;
            var timeStr = formateTime(totalTime);
            $("#time").html(timeStr);
            console.log('totalTime ', totalTime);
        }
        // 格式化时间
        function formateTime(time) {
            var h = 0;
            var m = 0;
            var s = time;
            var str = "";
            if (s >= 60) {
                m = parseInt(time / 60);
                s = parseInt(time % 60);
                if (m >= 60) {
                    h = parseInt(m / 60);
                    m = parseInt(m % 60);
                }
            }
            h = h < 10 ? "0" + h : h;
            m = m < 10 ? "0" + m : m;
            s = s < 10 ? "0" + s : s;
            str = h + ':' + m + ':' + s
            return str
        }

        // 开始
        function start() {
            timeFun();
        }
        // 暂停
        function pasue() {
            clearInterval(timeInter);
        }


        timeFun()



    </script>

</body>

</html>
  

 

标签:function,60,totalTime,倒计时,parseInt,time,var
From: https://www.cnblogs.com/j-a-h/p/18197769

相关文章

  • 高德、百度开车导航APP是怎么知道红绿灯倒计时的?
    高德、百度开车导航APP之所以能够知道红绿灯的倒计时,这背后是一系列复杂的科技手段和数据分析的综合运用。从交管部门提供的数据,到导航软件自身通过大数据和算法进行的计算,每一个环节都为红绿灯倒计时的准确呈现提供了支撑。 首先,让我们来看看交管部门如何参与到这一过程中。......
  • 倒计时1天 | 袋鼠云春季发布会完整议程出炉!快快预约直播
    在日新月异的数字化经济时代,企业和组织不断寻求利用先进技术构建自身的核心竞争力。其中,大数据与AI的深度融合正在成为推动企业实现新质生产力的关键路径。在此背景下,袋鼠云举办春季发布会,以“Data+AI,构建新质生产力”为主题,旨在深度探讨如何将数据与AI紧密结合,以期打破传统的生......
  • 【放假第1天】采购季倒计时 2G 50/年,4G 618/3年 云服务器选购攻略 阿里云 腾讯云 京
    ​更新日期:4月4日(阿里云价格回调,京东云采购季持续进行)《最新对比表》已更新在文章头部—腾讯云文档,文章具有时效性,请以腾讯文档为准!https://docs.qq.com/document/DV0RCS0lGeHdMTFFV?tab=000003当前活动:采购季,各厂商活动已更新,适用于博客建站(2-4G)、小型游戏(4-8G)、大型游戏......
  • 退钱了!2023年个税扣缴退付申请倒计时~
       个人所得税手续费,大白话就是公司帮员工代扣代缴个税,税务机关取得的2023年个税总额2%的手续费退付。但是必须要企业去申请,3月31日前网上提交申请,税局就把钱返还给企业。过期不申请,视同放弃。    自2024年1月1日至3月31日,扣缴单位可通过自然人电子税务局(扣缴端)【......
  • 个人主页HTML5网站源码个性炫酷大气简洁唯美官网上线倒计时引导页HTML5源码
    源码介绍:个性化官宣个人主页,个人主页HTML5网站源码个性炫酷大气简洁唯美官网上线倒计时引导页HTML5源码,超好看的个人官网展示页面。源码下载:个性炫酷大气简洁唯美官网上线倒计时引导页HTML5源码下载界面预览:......
  • 手机备忘录隐藏功能:生日纪念日重要日子倒计时天数和提醒
    在日常使用手机时,我们经常会用到备忘录、便签或笔记等记事工具来记录生活的点点滴滴,无论是购物清单、工作任务还是学习笔记。然而,你可能不知道,手机备忘录中其实隐藏着一些非常实用的功能,比如记录生日、纪念日、重要日子,并设置日期提醒,同时还能实时显示倒计时天数。以敬业签这款手......
  • 倒计时27,26天
    A-S老师的公式_牛客挑战赛73(nowcoder.com)#include<bits/stdc++.h>usingnamespacestd;#defineintlonglongconstintN=2e8+6;constintinf=0x3f3f3f3f;intdir1[8][2]={{0,1},{0,-1},{-1,0},{1,0},{1,1},{-1,-1},{1,-1},{-1,1}};intdir2[4][2]={{0,1},{1,0},{......
  • 倒计时30,28天
    1.队列Q(nowcoder.com)//1.#include<bits/stdc++.h>usingnamespacestd;#defineintlonglongconstintN=2e5+6;constintinf=0x3f3f3f3f;intdir[13]={0,31,28,31,30,31,30,31,31,30,31,30,31};constdoublepi=acos(-1.0);inta[N],b[N];boolcmp(intxx......
  • JS实现之用户注册协议倒计时
    要求:按钮显示5秒倒计时,5秒前禁点,5秒后可以点击按钮运行结果:5秒前5秒后思路开启禁用按钮属性disabled获取按钮元素开启倒计时函数setInterval调用函数,函数里包括变量自减,使用DOM对象修改时间,关闭按钮禁用属性HTML代码:首先禁用按钮属性<textareaname=""id=""......
  • 609、基于单片机的秒表(倒计时,数码管,独立按键)
    毕设帮助、开题指导、技术解答(有偿)见文末。目录一、设计功能二、proteus仿真三、原理图四、程序源码五、资料包括一、设计功能二、proteus仿真三、原理图四、程序源码五、资料包括需要完整的资料可以点击下面的名片,找我要资源......