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. react 高阶组件的实现

    由于强大的mixin功能,在react组件开发过程中存在众多不理于组件维护的因素,所以react社区提出了新的方法来替换mixin,那就是高阶组件: 首先在工程中安装高阶组件所需的依赖: npm in ...

  2. ABC231H（二分图最小权边覆盖）

    首先将行列分别抽象成 \(h, w\) 个点,每个格子视作连接两个点的一条边,那么问题就转化为了二分图最小权边覆盖问题. 考虑最后答案形如:若干组互不相交的匹配加上其他点连接到匹配内. 于此同时,不在 ...

  3. 在TCP文件传输中如何判断java流的末尾

    感谢前辈们的解答:https://bbs.csdn.net/topics/280085530 问题描述: 服务端向客户端发送数据流,服务端发完了数据不关闭流. 我在客户端读流,我无法读到-1,所以无法 ...

  4. Redis性能管理

    Redis性能管理 目录 Redis性能管理 一.查看Redis内存使用 二.内存碎片率 三.内存使用率 四.避免内存交换发生的方法 1. Hash数据类型 1.1 HSET/HGET/HDEL/HE ...

  5. Spring中声明式事务的几个属性的解释

    声明式事务 @Transactional (通常用在service层)事务属性:传播行为,隔离级别,回滚,只读,过期 1,spring支持事务传播行为:propagation(常用以下两个)    ① ...

  6. Solution -「JOISC 2019」「LOJ #3036」指定城市

    \(\mathcal{Description}\)   Link.   给定一棵含 \(n\) 个结点的树,双向边权不相同.\(q\) 次询问,每次询问在树上标记 \(e\) 个点,标记的价值为所有趋 ...

  7. 在超算系统上使用sbatch提交MXNet分布式训练任务

    在超算系统上运行MXNet分布式训练任务时,面临着一个IP地址相关的问题.我们在提交MXNet的分布式任务时,需要知道各个GPU节点的IP地址,把这些IP地址放到一个hosts文件中,以供分布式训练使 ...

  8. [LeetCode]1470. 重新排列数组

    给你一个数组 nums ,数组中有 2n 个元素,按 [x1,x2,...,xn,y1,y2,...,yn] 的格式排列. 请你将数组按 [x1,y1,x2,y2,...,xn,yn] 格式重新排列, ...

  9. 不用rustup，Windows下gnu版Rust安装与开发环境配置

    写在前面 本文介绍了在不使用rustup的情况下,在Windows上安装gnu版的Rust,并配置开发环境(VSCode + rust-analyzer,CLion + IntelliJ Rust)的 ...

  10. CMake 交叉编译

    CMake 交叉编译 交叉编译就是说在平台 A (宿主机)上编译出可以在平台 B (目标机) 上运行的程序,比如在 x86 上编译 ARM 程序 要交叉编译首先要去下载目标平台的工具链,比如要编译 A ...