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. Redis 中如何保证数据的不丢失，Redis 中的持久化是如何进行

    Redis 中数据的持久化 前言 AOF 持久化 什么是 AOF 持久化 为什么要后记录日志呢 AOF 的潜在风险 AOF 文件的写入和同步 AOF 文件重写机制 AOF 的数据还原 RDB 持久化 ...

  2. .exe文件自动重启

    echo  :杀死进程taskkill /f /im YYTWEB.exe  :等待10秒:ping 127.0.0.1 -n 10  start "" "D:\都江堰银 ...

  3. 诗和远方-target

    学习也是这样:不以结婚为目的的谈恋爱,都是耍流氓!

  4. linux .h文件

    转载请注明来源:https://www.cnblogs.com/hookjc/ c++ #include <sys/types.h>   #include <unistd.h> ...

  5. js中(function(){}()),(function(){})(),$(function(){});之间的区别

    1. (function(){}())与(function(){})() 这两种写法,都是一种立即执行函数的写法,即IIFE (Immediately Invoked Function Express ...

  6. Ext原码学习之lang-Object.js

    // JavaScript Document (function(){ var TemplateClass = function(){}, ExtObject = Ext.Object = { cha ...

  7. TCP的报文详细解读

    这张图好像挺有名的,其实一开始我看见的时候是一脸懵逼的,但是通过翻书(大学时代最害怕的计算机网络),查阅他人博客等等办法,最后终于有了一个系统的了解,当然,这里知识点多而杂,大家可以多看几遍,结合上面 ...

  8. Spark——统计文本中单词出现的次数

    示例一:统计所有单词出现的次数 1.在本地创建文件并上传到hdfs中 #vin data.txt //将文件上传到hadoop的根目录下 #hdfs dfs -put data.txt / 2.在sp ...

  9. 流程控制（ if while ）

    目录 流程控制 必知必会 分支结构 if 1.单 if 分支结构 2. if与else连用 3. if, else和 elif if 判断之嵌套 if 练习题 while 循环 while+break ...

  10. 数据缓存Cache

    在MyBatis - 随笔分类 - 池塘里洗澡的鸭子 - 博客园 (cnblogs.com)中有关于Mybatis中Cache技术实现及应用介绍.Cache技术实现都是implements Cache ...