JavaScript日期对象倒计时案例

于 2024-07-14 13:21:18 发布
阅读量247 收藏
点赞数 12
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_83720143/article/details/140415689
版权

思路：1.先求出当前时间的总毫秒数

           2.再求出所需要求的时间的总毫秒数

           3.用所求时间的减去当前时间的可得到倒计时剩余时间

           4.最后将所求的倒计时剩余时间转换为天，小时，分钟，秒即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       
       function Demo(time) {
        var  nowtime = +new Date();      //求当前时间的总毫秒数
        var  inputtime = +new Date(time);  //求输入时间time的总毫秒数
        var  x=(inputtime-nowtime)/1000;   //将总毫秒数转换为总秒数
        d=parseInt(x/60/60/24);            //求天数
        d=d<10 ? '0'+d : d ;                 //当得到的数小于10时则输出的为0X的形式
        h=parseInt(x/60/60%24);            //求小时数
        h=h<10 ? '0'+h : h ;
        m=parseInt(x/60%60);               //求分钟数
        m=m<10 ? '0'+m : m ;
        s=parseInt(x%60);                  //求秒数
        s=s<10 ? '0'+s : s ;

        return '还剩余'+d+'天'+h+'时'+m+'分'+s+'秒'
       }

console.log(Demo('2024-10-01 18:8:8'));
    </script>
</head>
<body>
    
</body>
</html>

 

小洋还需努力
关注
  • 12
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
日期对象 倒计时案例
weixin_47558015的博客
04-25 135
// 日期对象 // var s = new Date(); // // 年 // var year = s.getFullYear() // console.log(year); // // 月 // var month = s.getMonth() + 1 // console.log(month); // // 日 // var data = s.get...
元旦倒计时代码html版本
12-12
在这个案例中，由于是简单的倒计时，所有JavaScript代码可能直接内联在HTML的`<script>`标签中，避免了外部文件引用。 2. **主体内容**：`<body>`部分将包含倒计时显示的元素，例如一个`<div>`或`<p>`标签，用于...
日期对象与倒计时案例
码云仓库地址：https://gitee.com/lance-gyq
11-12 1076
日期对象 4.1 Date概述 Date对象和Math对象不一样,他是一个构造函数,所以我们需要实例化后才能使用 Date实例用来处理日期和时间 4.2Date()方法的使用 1.获取当前时间必须实例化 2.Date()构造函数的参数 如果括号里面有时间,就返回参数里面的时间。例如日期格式字符串为’2019-5-1’ , 可以写成new Date("2019-5-1)或者new Date(‘2019/5/1’) <script> //Date()日期对象 是一个构造函数 必须使用n
JavaScript内置对象,时间日期获取——倒计时案例
s_meng_的博客
05-27 1528
今天又是愉快的一天，学的知识点不算太多吧，但是这些知识点都好玩啊，有趣啊。 今天主要是内置对象，我学会了之后封装了三个函数，一个获取当前时间，一个获取当前日期， 还有一个倒计时案例。 可根据目录跳转，需要的自取。 我会把js文件放置在坚果云内，不想复制代码的可直接下载，文件内都有详细的注释。 好了，下边开始正题。 点我下载 文章目录内置对象产生随机数猜数游戏随机点名内置Date函数获取当前的日期获取当前时间产生倒计时效果 内置对象 js中，对象分自定义对象，内置对象，浏览器对象。 自定义对象： 我
Data日期对象的案例：倒计时
薛定谔的猫
10-11 296
① 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒 相减，比如 05 分减去25分，结果会是负数的。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时 间的毫秒数。d = parseInt(总秒数/ 60/60 /24);h = parseInt(总秒数/ 60/60 %24) // 计算小时。m = parseInt(总秒数 /60 %60 );③ 把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）s = parseInt(总秒数%60);
微信小程序-倒计时组件
06-24
这涉及到日期和时间处理的知识，例如使用JavaScript的`Date`对象或者微信小程序提供的`wx.formatTime`方法。 其次，该组件易于集成和使用。一旦下载了组件，开发者可以直接在自己的小程序项目中引入并调用。这通常...
javascript倒计时插件
06-07
在本案例中，我们只有一个文件`index.htm`，这可能是一个简单的HTML页面，它包含了实现倒计时功能的JavaScript代码。 首先，我们来理解JavaScript倒计时的基本原理。JavaScript是运行在浏览器端的脚本语言，可以...
2023年新年倒计时html源码
12-11
例如，可以使用JavaScript的`Date`对象获取当前时间，并与目标日期（2023年1月1日）进行比较，计算出剩余的时间。然后，每隔一秒更新倒计时计时器的文本内容。 ```html <span id="years"></span>年 ...
元旦倒计时代码-简单的javascript倒计时完整源码下载
12-12
JavaScript倒计时是一种常见的前端开发技术，用于在网页上显示特定日期或事件的剩余时间。在本案例中，我们关注的是一个专为“元旦”设计的倒计时代码。这个JavaScript代码可以帮助用户在网页上创建一个实时更新的倒...
Webkit简介以及工作流程
读心悦
07-10 311
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 192
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 309
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 166
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
javascript高级部分笔记
喵喵的博客
07-09 1273
javascript高级部分 Function方法 与 函数式编程 call 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 345
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
TS类型声明文件（二）如何在 TS 中导入导出局部类型
weixin_43303603的博客
07-10 245
系列文章之：如何在 TypeScript 中导入导出局部类型
js中scrollIntoView第一次不生效，第二次生效
风如也的博客
07-12 113
方法用于将元素滚动到可视区域。如果在页面加载后立即使用，可能不会生效，因为页面可能还没有完全渲染或者加载完成。如果是因为元素还没有完全渲染完成，可以在。关键是确保在页面完全加载和渲染之后再调用。
React:useState和useEffect
最新发布
读万卷书 行万里路
07-12 411
最近因为想要开发一个简单的应用才开始接触React。但是并没有系统学习React，所以这篇博客可能会写的不够专业。
js使用日期对象倒计时
05-17
可以使用JavaScript中的日期对象来实现倒计时。下面是一个简单的例子： ```javascript // 倒计时时间（单位：毫秒） var countdownTime = 10000; // 获取当前时间 var now = new Date().getTime(); // 计算倒计时结束时间 var countdownEndTime = now + countdownTime; // 更新倒计时显示 var countdownElement = document.getElementById("countdown"); var countdownInterval = setInterval(function() { // 获取当前时间 var now = new Date().getTime(); // 计算剩余时间 var remainingTime = countdownEndTime - now; // 将剩余时间转换为天、小时、分钟、秒 var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24)); var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000); // 更新倒计时显示 countdownElement.innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 "; // 如果倒计时结束，清除计时器 if (remainingTime <= 0) { clearInterval(countdownInterval); countdownElement.innerHTML = "倒计时结束！"; } }, 1000); ``` 在上面的例子中，我们首先定义了倒计时时间 `countdownTime`，然后使用 `new Date().getTime()` 获取当前时间。我们将当前时间和倒计时时间相加，得到倒计时结束时间 `countdownEndTime`。 然后，我们使用 `setInterval` 创建一个定时器，每隔一秒钟更新一次倒计时显示。在定时器回调函数中，我们首先获取当前时间 `now`，然后计算剩余时间 `remainingTime`。接下来，我们将剩余时间转换为天、小时、分钟、秒，并更新倒计时显示。 最后，如果剩余时间小于等于0，说明倒计时已经结束，我们清除定时器并更新倒计时显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值