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. RealFormer: 残差式 Attention 层的Transformer 模型

    原创作者 | 疯狂的Max 01 背景及动机 Transformer是目前NLP预训练模型的基础模型框架,对Transformer模型结构的改进是当前NLP领域主流的研究方向. Transformer ...

  2. Gitee 自已提交的代码提交人头像为他人、码云上独自开发的项目显示为 2 个开发者

    简介 自己写的代码提交到码云(Gitee)上却变成了两个人,一个被正确的代码提交统计了,另一个却没有,并且确信自己输入的Gitee账号是自己绑定的邮箱,具体如下: 解决办法 查看自己的用户名 git ...

  3. spring 事务的传播级别和隔离级别

    1.事务的传播级别 1)@Transactional(propagation=Propagation.REQUIRED):默认的spring事务传播级别,使用该级别的特点是,如果上下文中已经存在事务, ...

  4. Android数据库的事务

    事务: 执行多条sql语句,要么同时执行成功,要么同时执行失败,不能有的成功,有的失败     银行转账 //点击按钮执行该方法 public void transtation(View v){ // ...

  5. 如何使用C++开发PHP扩展（下）

    更多的情况是业务中已经有独立的 api 库,形式为 libxxx.a / libxxx.so,PHP程序中需要调用这些 api,所以这时就要编写PHP扩展来实现.这时是使用静态库 libxxx.a , ...

  6. 前端框架 bootstrap 的使用

    内容概要 前端框架 bootstrap 简介 引入方式 布局容器 栅格系统 图标 内容详细 简介 网址:https://v3.bootcss.com/ 版本: 2.X 3.X 4.X 推荐使用3.X版 ...

  7. Solution -「多校联训」博弈

    \(\mathcal{Description}\)   Link.   A B 两人在树上博弈,初始时有一枚棋子在结点 \(1\).由 A 先操作,两人轮流移动沿树上路径棋子,且满足本次移动的树上距离 ...

  8. python中继承的语法及案列

    案例: 1 class Chinese: # 类的创建,类名首字母大写 2 eye = 'black' # 类属性的创建 3 4 def eat(self): # 实例方法创建 5 print('吃饭 ...

  9. [Java]Thinking in Java 练习2.12

    题目 对HelloDate.java的简单注释文档的示例执行javadoc,然后通过Web浏览器查看结果. 代码 1 //: HW/Ex2_2.java 2 import java.util.*; 3 ...

  10. 配置IPv6地址跳变——网络测试仪实操

    第一部分:什么是IPv6地址跳变? IPv6地址跳变是指IPv6地址进行一系列有规则的变化,Renix支持对IPv6地址进行递增.递减.列表和随机变化. 如当用户想要仿真大量的源IPv6地址变化的数据 ...