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. AT3913 XOR Tree

    经过长时间的思考,我发现直接考虑对一条链进行修改是很难做出本题的,可能需要换一个方向. 可以发现本题中有操作的存在,是没有可以反过来做的做法的,因此正难则反这条路应该走不通. 那么唯一的办法就是简化这 ...

  2. 利用.htaccess隐藏html和php后缀

    假设有个网页http://www.example.com/index.html或者http://www.example.com/index.php.如果我们想要隐藏.html后缀或者.php后缀,那么 ...

  3. 动态修改UINavigationBar的背景色－－by－胡旭

    这是我们最终想要得到的效果 思路 在UISrollView的delegate方法 - (void)scrollViewDidScroll:(UIScrollView *)scrollView中根据当前 ...

  4. Linux-一次执行多个命令 ； && ||

    一次执行多个命令,多个命令之间用:号隔开 cmd1;cmd2:cmd3 这样前后执行的时候没有依赖性,如果有下列要求呢 1. cmd1执行失败那就不要执行后面的命令 2. cmd1失败了才去指令后面的 ...

  5. xshell脚本之条件语句

    xshell脚本之条件语句 1.test命令: 如果test命令中列出的条件成立,test命令就会退出并返回状态码0, 如果条件不成立,test命令就会退出并返回非零的退出状态码,这使得if-then ...

  6. SpringBoot源码解读系列三——引导注解

    我们再来看下SpringBoot应用的启动类: 查看代码 import org.springframework.boot.SpringApplication; import org.springfra ...

  7. LeetCode随缘刷题之最长回文子串

    这一题我用的相对比较笨的方法. 相对于大佬们用的动态规划法,比较复杂.但却更容易理解,我主要是通过记录下标来确定最长回文串的. package leetcode.day_12_06; /** * 给你 ...

  8. 实现基于MYSQL验证的vsftpd虚拟用户访问

    一.配置mysql服务器 1.1 安装mysql # yum -y install mariadb-server # systemctl enable --now mariadb.service &a ...

  9. 使用 Sa-Token 解决 WebSocket 握手身份认证

    前言 相比于 Http 的单项通信方式,WebSocket 可以从服务器向浏览器主动推送消息,这一特性可以帮助我们完成诸如 订单消息推送.IM实时聊天 等一些特定业务. 然而 WebSocket 本身 ...

  10. Note -「Lagrange 插值」学习笔记

    目录 问题引入 思考 Lagrange 插值法 插值过程 代码实现 实际应用 「洛谷 P4781」「模板」拉格朗日插值 「洛谷 P4463」calc 题意简述 数据规模 Solution Step 1 ...