1：

<style>

        .item {

            width: 500px;

            height: 50px;

            margin: 0 auto;

            text-align: center;

            font-size: 30px;

            color: orange;

        }

        strong {

            background-color: orange;

            padding: 0 10px;

            color: #fff;

            border-radius: 4px;

        }

    </style>

2：

<div class="days-coming">

    <div class="container">

        <h3 class="title tittle">我们的恋爱时长</h3>

        <div class="timer_wrap">

{{--          计时器--}}

            <div class="item">

                <span><span class="day">00</span>天</span>

                <strong><span class="hour">00</span>时</strong>

                <strong><span class="min">00</span>分</strong>

                <strong><span class="second">00</span>秒</strong>

            </div>

        </div>

    </div>

</div>

3：

<script>

    var endTime = new Date("2021-10-06");

    var dayel = document.querySelector(".day");

    var hourel = document.querySelector(".hour");

    var minel = document.querySelector(".min");

    var secondel = document.querySelector(".second");

    //计算

    setInterval(

        function () {

            // 获取现在的时间

            var nowTime = new Date();

            // 相差的时间

            var stamp = nowTime - endTime;

            // console.log(stamp);

            var day_ms = 24 * 60 * 60 * 1000;

            var hour_ms = 60 * 60 * 1000;

            var min_ms = 60 * 1000;

            var day = Math.floor(stamp / day_ms);

            var hour = Math.floor((stamp % day_ms) / hour_ms);

            var min = Math.floor((stamp % hour_ms) / min_ms);

            var s = Math.floor((stamp % min_ms) / 1000);

            // console.log(day,hour,min,s);

            dayel.innerText = wrap(day);

            hourel.innerText = wrap(hour);

            minel.innerText = wrap(min);

            secondel.innerText = wrap(s);

        }, 1000);

    function wrap(n) {

        return n>=10?n:"0"+n;

    }

</script>

以上是从几年几月几日，到现在过去的天数 ，注意看字体的大小，以下是从现在距离以后还有多少天

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>恋爱倒计时</title>

    <style>

        h1 {

            width: 250px;

            margin: 100px auto 50px auto;

        }

        .item {

            width: 500px;

            height: 50px;

            margin: 0 auto;

            text-align: center;

            font-size: 30px;

            color: orange;

        }

        strong {

            background-color: orange;

            padding: 0 10px;

            color: #fff;

            border-radius: 4px;

        }

    </style>

</head>

<body>

    <h1>距离恋爱一千天,还有</h1>

    <div class="item">

        <span><span class="day">00</span>天</span>

        <strong><span class="hour">00</span>时</strong>

        <strong><span class="min">00</span>分</strong>

        <strong><span class="second">00</span>秒</strong>

    </div>

    <script>

        alert("段铭锟和王娟的恋爱倒计时！");

        alert("亲爱的乖!");

        alert("爱你呀");

        alert("恋爱一千天，珍惜到永远！");

        var endTime = new Date("2021-4-2");

        var dayel = document.querySelector(".day");

        var hourel = document.querySelector(".hour");

        var minel = document.querySelector(".min");

        var secondel = document.querySelector(".second");

        //计算

        setInterval(

            function () {

                // 获取现在的时间

                var nowTime = new Date();

                // 相差的时间

                var stamp = endTime - nowTime;

                // console.log(stamp);

                var day_ms = 24 * 60 * 60 * 1000;

                var hour_ms = 60 * 60 * 1000;

                var min_ms = 60 * 1000;

                var day = Math.floor(stamp / day_ms);

                var hour = Math.floor((stamp % day_ms) / hour_ms);

                var min = Math.floor((stamp % hour_ms) / min_ms);

                var s = Math.floor((stamp % min_ms) / 1000);

                // console.log(day,hour,min,s);

                dayel.innerText = wrap(day);

                hourel.innerText = wrap(hour);

                minel.innerText = wrap(min);

                secondel.innerText = wrap(s);

            }, 1000);

        function wrap(n) {

            return n>=10?n:"0"+n;

        }

    </script>

</body>

</html>

jq计算总时长的更多相关文章

  1. 使用opencv统计视频库的总时长

    统计视频库里的视频文件的总时长 废话不多说,直接上代码: /* * ================================================================== ...

  2. windows 7 下,如何统计某文件夹下 视频总时长

    由于项目需要,我需要给系统加权限,这真是一个让人头疼的问题,如果要每个业务方法都加上权限判断逻辑,那真的不敢想象是多么大的工作量,日后有变动的话,我会不会发疯? 所以我必须利用之前学到的AOP编程,在 ...

  3. 统计 flv视频总时长

    在学习孟媛的视频课程.网上能下载的是flv格式.那我在学习之前,我要统计一下这个课程的数量,他会用多长时间,这样方便我在学习过程中不断的回顾,进行时间管理.我大概就可以统计出来这个视频多长时间可以学完 ...

  4. PHP根据秒计算持续时长

    /** * 计算持续时长 * * @param int $second 秒数 * @return string $duration 5天10小时43分钟40秒 */ function second2d ...

  5. android获取mp4视频文件总时长和视频宽高<转>

    android使用 MediaMetadataRetriever 获取视频文件的 总时长 和视频的分辨率. 根据该方式获取视频信息可以看出不仅仅可以获取时长和分辨率,还能获取到其他的一些视频信息,不错 ...

  6. js计算在线时长

    后台传来毫秒,前台转换成对应的时分秒 //在线时长 function longTime(seconds){ //总秒数 //seconds=seconds/1000; //得到小时 var hour ...

  7. PHP如何获取视频总时长与码率等信息

    利用PHP中的FFmpeg读取视频播放时长与码率等信息   function getVideoInfo($file) {    define('FFMPEG_PATH', '/usr/local/ff ...

  8. ffmpeg获取文件的总时长（mp3/mp4/flv等）

    使用ffmpeg.exe获取文件属性信息,C#中可以在进程外异步调用这个工具,如下: using (System.Diagnostics.Process pro = new System.Diagno ...

  9. 关于AVPlayerItem对象的属性duration返回播放总时长的坑

    最近在使用AVPlayer播放网络流媒体,发现一个坑: 就是playerItem.duration有可能不返回该网络多媒体资源的播放总时间长度,而是返回了一个奇怪的数据:nan, 因为我通过CMTim ...

随机推荐

  1. JAVA多线程学习九-原子性操作类的应用

    当程序更新一个变量时,如果多线程同时更新这个变量,可能得到期望之外的值,比如变量i=1,A线程更新i+1,B线程也更新i+1,经过两个线程操作之后可能i不等于3,而是等于2.因为A和B线程在更新变量i ...

  2. 恶补Java Swing线程刷新UI机制（由浅到深的参考大佬博文）

    1. java中进度条不能更新问题的研究 感谢大佬:https://blog.csdn.net/smartcat86/article/details/2226681 为什么进度条在事件处理过程中不更新 ...

  3. Vue小白练级之路---001表单验证功能的一般实现思路

    思路: 先各自验证 非空校验 具体规则校验 后兜底校验( 防止用户没输入信息直接登录 ) 实现:( 以 element-ui 为例 ) 在 标签上用 model 动态绑定收集数据的对象(form) 在 ...

  4. H5架构和原生架构的区别

    1.App的3种开发方式 表面上看,手机App都是同样的东西,就是手机上的应用程序,点击图标就能运行,但是它们的底层技术不一样.按照开发技术,App可以分成三大类.原生应用(简称nativeApp), ...

  5. Solution -「Gym 102798I」Sean the Cuber

    \(\mathcal{Description}\)   Link.   给定两个可还原的二阶魔方,求从其中一个状态拧到另一个状态的最小步数.   数据组数 \(T\le2.5\times10^5\). ...

  6. Spring 控制反转和依赖注入

    控制反转的类型 控制反转(IOC)旨在提供一种更简单的机制,来设置组件的依赖项,并在整个生命周期管理这些依赖项.通常,控制反转可以分成两种子类型:依赖注入(DI)和依赖查找(DL),这些子类型各自又可 ...

  7. MySQL架构原理之存储引擎InnoDB数据文件

    MySQL架构原理之体系架构 - 池塘里洗澡的鸭子 - 博客园 (cnblogs.com)中简单介绍了MySQL的系统文件层,其中包含了数据文件.那么InnoDB的数据文件是如何分类并存储的呢? 一. ...

  8. MyBatis缓存Cache包

    Mybatis默认使用了一级缓存为数据查询提供效率,其底层数据结构为PerpetualCache.同时MyBatis不止实现了PerpetualCache,还有其他实现提供其他功能,如下: 可以从UM ...

  9. 关于Untiy破解 for Mac

    Mac的破解很简单 也很坑 如果你破解过win的 在进行Mac版的破解 可能认为三观都被颠覆了 以下进行下讲解 并且帮助大家排除坑 还是那句话  有条件的请支持正版  破解版只进行技术分享 第一步去u ...

  10. 自动同步bing壁纸

    在百度搜东西,经常出来一大坨广告:要么就是复制粘贴文章.完全没有创新,搜索越来越困难.偶尔用一下bing还挺好用. bing的壁纸是真心好看,每天不重样.决定写个脚本同步一下它的壁纸. 一.以我的Wi ...