首页 > 其他分享 >放假倒计时

放假倒计时

时间:2024-12-03 11:26:00浏览次数:3  
标签:allSecond 倒计时 parseInt time var 放假 size

练习放假倒计时,理解date及定时器的使用。

点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #time{
            font-size: 40px;
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="time"></div>
<script>
    window.onload = function () {
        // 1.获取需要的标签
        var time = document.getElementById('time');
        // 2. 自定义将来的时间
        var nextDate = new Date('2028/07/01 12:00:00');
        // 3. 获取现在的时间
        var currentDate = new Date();
        // 4. 获取时间戳
        var currentTime = currentDate.getTime();
        var nextTime = nextDate.getTime();
        // 5. 剩下的时间戳
        var allTime = nextTime - currentTime;
        // 6. 把毫秒转成秒
        var allSecond = parseInt(allTime / 1000);
        var d, h, m, s ;

        // 7. 开启定时器
        timer = setInterval(function () {
            allSecond -=1;
            // 8.转化
            d = size(parseInt(allSecond / 3600 / 24));
            h = size(parseInt(allSecond / 3600 % 24));
            m = size(parseInt(allSecond / 60 % 60));
            s = size(parseInt(allSecond  % 60));

            // 9. 注入
            time.innerText = "距离放假还有"+ d +"天"+ h +"小时" + m +"分钟"+ s +"秒";

            // 10.倒计时完成清除计时器
            if (allSecond <= 0){
                clearInterval(timer);
            }
        }, 1000);

        function size(num) {
            return num >= 10 ? num : '0' + num;
        }
    }
</script>
</body>
</html>

标签:allSecond,倒计时,parseInt,time,var,放假,size
From: https://www.cnblogs.com/yidw/p/18583696

相关文章

  • 「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
    本篇将带你实现一个倒计时环形进度条应用。用户可以设置倒计时的时间,启动倒计时后,应用会动态显示一个随着时间递减的环形进度条,同时伴有数字倒计时显示。这是结合动画效果和时间管理的实用示例。关键词UI互动应用倒计时器环形进度条动画效果状态管理一、功能说明倒计......
  • TIA使用SCL做交通信号灯带倒计时闪烁控制
    继续练习SCL编程,按照前面第2个练习的要求,使用SCL实现红绿黄等倒计时还有5秒进行闪烁。前面程序新建一个SCL编程的FB,建立下面的变量写下面的SCL程序IF#stopbtn=1THEN#CurrentState:=4;END_IF;IF#startbrn=1THEN#CurrentState:=1;END_IF;(*红灯控制*)IF#Cu......
  • 1024程序员节:为何不放假?—— 一场关于社会地位与资源分配的反思
    目录一场关于社会地位与资源分配的反思IT从业者的社会贡献对比其他行业医生教师公务员程序员的现状社会地位工作环境呼吁改变企业责任社会认知个人觉醒结语一场关于社会地位与资源分配的反思在这个数字化时代,信息技术从业者(IT从业者)无疑是推动社会进步的重要力......
  • Vue2 项目实战:打造一个简易倒计时计时器工具 Vue2 实践教程:如何实现一个工作与休息倒
    效果图Vue2倒计时计时器工具教程在本教程中,我们将一步步实现一个Vue2倒计时计时器工具。这个工具允许用户在工作和休息模式之间切换,并设置倒计时时间。倒计时结束时,系统会发出提醒,提示用户切换工作或休息状态。非常适合初学者练习Vue的数据绑定、计算属性和事件处理......
  • [Android] Handler 倒计时和界面更新
    问题在PlyRP中需要在界面上实时显示目前媒体的时长/剩余时长,TimeTask本身是一个子线程,但在Android的子线程去更新UI的内容,会导致不确定的异常。在非UI线程中刷新界面的时候,UI线程(或者其他非UI线程)也在刷新界面,这样就导致多个界面刷新的操作不能同步,导致线程......
  • 使用taro和react语言实现:微信小程序,地图中展示气泡,并在气泡中实现倒计时功能
    使用Taro和React来实现微信小程序中的地图气泡倒计时功能,你需要首先确保已经安装了TaroCLI并创建了一个Taro项目。接下来,我们将逐步实现这个功能。1.初始化Taro项目如果你还没有安装TaroCLI,可以使用npm或yarn进行安装:npminstall-g@tarojs/cli#或......
  • 使用HTML+JS实现国庆节倒计时网页实例代码
    马上就是每年10月1日的国庆节了,为了增加节日氛围,许多网站会设置倒计时,以提醒人们国庆节的临近。本文站长工具网将介绍如何使用HTML和JavaScript创建一个简单的国庆节倒计时网页,并附上完整的实例代码供大家参考。1.网页设计基础在开始编写代码之前,我们需要了解一些基本的网......
  • 改革后法定延迟退休年龄计算器 & 退休倒计时工具
    一、产品简介改革后法定延迟退休年龄计算器&退休倒计时(https://daojishi.fun)是一款独特的在线工具,旨在帮助用户轻松计算退休时间并以有趣的方式倒数至退休日。我们的目标是让用户以积极乐观的态度面对工作和生活。二、使用场景职场人士:了解自己的法定退休年龄,规划未来人力资......
  • 手把手教你制作最简网页版倒计时程序(核心代码仅25行)
    一、解构如图所示,手机浏览器的效果。代码就是简单的html语言加上一个JavaScript脚本,界面主要分3部分,功能实现主要分3个函数。(一)显示样式在头里定义了居中显示的CSS样式,将来在浏览器中居中显示倒计时X分XX秒。<styletype="text/css">   .center{      positio......
  • 【倒计时10天...IEEE出版】第五届大数据、人工智能与软件工程国际研讨会(ICBASE 2024,9
    第五届大数据、人工智能与软件工程国际研讨会(ICBASE2024)将于2024年09月20-22日在中国温州隆重举行。会议主要围绕大数据、人工智能与软件工程等研究领域展开讨论。会议旨在为从事大数据、人工智能与软件工程研究的专家学者、工程技术人员、技术研发人员提供一个共享科研......