精华内容
下载资源
问答
  • js实现倒计时
    2020-06-19 11:24:22

    实现倒计时效果

    1、核心算法:输入的时间减去现在的时间就是剩余的时间(即倒计时)但是不能拿着时分秒相减

    注意:比如05分减去25分,结果会是负数

    2、用时间戳来做,用户输入的时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。

    3、把剩余的时间总的毫秒数换算成天、时、分、秒

    转换公式如下:

    d = parseInt(总的秒数 / 60 / 60 / 24); //计算天数

    h = parseInt(总的秒数 / 60 / 60 % 24); //计算小时

    m = parseInt(总的秒数 / 60 % 60);    //计算分钟

    s = parseInt(总的秒数 % 60);          //计算秒数

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<script>
    		//倒计时效果
    		//1、核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时,但是不能拿着时分秒相减,比如05分减去25分,结果会是负数
    		//2、用时间戳来做,用户输入的时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。
    		//3、把剩余的时间总的毫秒数换算成天、时、分、秒
    		/* 转换公式如下:
    		d = parseInt(总的秒数 / 60 / 60 / 24); //计算天数
    		h = parseInt(总的秒数 / 60 / 60 % 24); //计算小时
    		m = parseInt(总的秒数 / 60 % 60);    //计算分钟
    		s = parseInt(总的秒数 % 60);		  //计算秒数 */
    		function countDown(time) {
    			var nowTime = +new Date(); //获取当前时间的时间戳
    			var inputTime = +new Date(time); //获取输入时间的时间戳
    			var times = (inputTime - nowTime) / 1000; //获取两个时间相差的秒数
    			var d = parseInt(times / 60 / 60 / 24); //计算天数
    			d = d < 10 ? '0' + d : d;
    			var h = parseInt(times / 60 / 60 % 24); //计算小时
    			h = h < 10 ? '0' + h : h;
    			var m = parseInt(times / 60 % 60); //计算分钟
    			m = m < 10 ? '0' + m : m;
    			var s = parseInt(times % 60); //计算秒数
    			s = s < 10 ? '0' + s : s;
    			return d + '天' + h + '时' + m + '分' + s + '秒';
    		}
    		
    		console.log(countDown('2020-6-19 11:30:00'));
    		var date = new Date();
    		console.log(date);
    	</script>
    	<body>
    	</body>
    </html>
    

     

    更多相关内容
  • 倒计时的功能在我们做项目的时候会经常遇到,这里给大家分享的是个人编写的一个简易的效果代码,有需要的小伙伴可以参考下
  • js实现倒计时

    2016-09-20 21:36:31
    javascript实现倒计时
  • 代码相当简单实用,这里就不多废话了,小伙伴们简单看下就能明白 <!DOCTYPE ...<... <head>...div id="d
  • js实现倒计时效果

    2017-07-07 17:42:53
    js实现倒计时效果,天,小时,分钟的倒计时
  • 其实倒计时的效果实现起来也是很简单的,并不复杂. 首先呢,开始写之前一定要理清楚思路,思路清晰了,那写起来就容易多了,下面我分了几个步骤: 1.获取当前的时间,并且定义结束的时间 2.用求未来时间和当前时间的时间差,...
  • 本文给大家介绍了如何使用javascript实现倒计时跳转到其他页面的方法以及实现原理,非常的简单实用,有需要的小伙伴可以参考下。
  • 主要为大家详细介绍了JS实现倒计时图文效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文分享了Javascript实现倒计时并且页面不刷新的实例,具有很好的参考价值,需要的朋友一起来看下吧
  • js倒计时器可自定义时间和暂停,效果如下,点击start 开始计时,end结束计时 分别复制 H5 css js 代码即可实现,具体的算法在js控制函数中(都写了注释) css html,body{ width:100%;height:100%; } .content{ ...
  • js 实现倒计时功能,详细代码,及讲解如下

    用js 实现倒计时功能,详细代码,及讲解如下

    HTML代码:

    <!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>
        <link rel="stylesheet"href="index.css"></link>
    </head>
    <body>
        <h1 align="center">纪念日</h1>
        <div id="timdiv">
            <span id="hour" class="tim"></span>
            <span id="minute" class="tim"></span>
            <span id="second" class="tim"></span>
        </div>
        <script src="index.js"></script>
    </body>
    </html>

    CSS代码:

    *{
        padding: 0;
        margin: 0;
    }
    body{
        background-color: aquamarine;
    }
    .tim{
        background-color: aqua;
        font-size: 250px;
        color: rgb(237, 231, 231);
    }
    #timdiv{
        position: absolute;
        left: 275px
    }
    h1{
        font-size: 250px;
    }

    js代码:

    var hour = document.getElementById('hour');
    var minute = document.getElementById('minute');
    var second = document.getElementById('second');
    var inputtime = +new Date('2022-6-21 18:00:00');//自定义的毫秒数
    timer();//先调用一次,避免第一次的卡顿
    setInterval(timer,1000);
    function timer(){
        var nowtime = +new Date();//返回当前的总毫秒数
        var time = (inputtime - nowtime) / 1000 ;// 1秒=1000毫秒 剩余需要倒计时的总秒数
        var h = parseInt(time/60/60%24);
        var m = parseInt(time/60%60);
        var s = parseInt(time%60);
        h = h < 10 ? '0' + h : h;//如果小于10前面补零,大于10直接填写
        hour.innerHTML = h + ':';
        m = m < 10 ? '0' + m : m;//如果小于10前面补零,大于10直接填写
        minute.innerHTML = m + ':';
        s = s < 10 ? '0' + s : s;//如果小于10前面补零,大于10直接填写
        second.innerHTML = s;
    }

    展开全文
  • js实现倒计时时分秒

    2019-03-29 17:15:17
    js实现倒计时的例子
  • 日常开发中,电商经常使用到抢购,不过当抢购的时候会用到倒计时
  • JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title>h <style> #box { width: 100%; height: 400px; ...
  • 主要介绍了JS实现倒计时和文字滚动的效果,以实例的形式分析了倒计时与文字滚动效果的具体实现方法,并附有js时间变量的说明,非常具有实用价值,需要的朋友可以参考下
  • 本文实例讲述了javascript实现下班倒计时效果的方法。分享给大家供大家参考。具体如下: 周末了,搞个下班倒计时,娱乐下。 确保下面三点: 1、非IE浏览器,较高Chrome版本,已开启HTML5桌面通知。具体设置见下面...
  • 下面小编就为大家带来一篇JS 实现倒计时数字时钟效果【附实例代码】。小编觉得挺不错的,现在分享给大家,也给大家做一个参考。
  • 本文与大家分享个js实现倒计时的代码,主要实现功能距离结束还有多少时间,感兴趣的朋友可以参考下,希望对大家学习js有所帮助
  • js实现倒计时功能

    2020-10-20 17:00:47
    本文主要介绍了通过js实现页面的倒计时功能的思路与方法,具有一定的参考价值,下面跟着小编一起来看下吧
  • 本文主要介绍了原生js实现倒计时--2018的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
  • 主要介绍了C#结合JavaScript实现秒杀倒计时的方法,涉及C#结合javascript操作时间的技巧,非常具有实用价值,需要的朋友可以参考下
  • 本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下 首先先写一个布局 <!--倒计时--> <!DOCTYPE html> <html> <head> <meta ...
  • 本文主要介分享了js实现倒计时效果(小于10补零)的实例代码,具有很好的参考价值。下面跟着小编一起来看下吧
  • 本文实例为大家分享了js实现指定时间倒计时的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计时</title> </...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,977
精华内容 6,390
关键字:

js实现倒计时

友情链接: BarCode.zip