模仿京东首页的倒计时

我们学习了定时器，可以用定时器做一个倒计时，于是我模仿了京东首页倒计时。

先看看京东首页的倒计时。

思路：

  1. 如何倒计时？
  • 给一个未来的时间。然后计算未来时间到现在的时间戳。
  • 用定时器每隔一秒，计算时间戳。然后把时间戳转换为时分秒。

  1. 转换的时候，要注意取整和取余，别搞混了。

  2. 最后拿到了数据，就把数据填充到静态页面中。

  3. 填充数据的时候，判断一下，当为个位数的时候，前面补0,确保两位数字。

这是我做出来的效果

最后附上我的代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .countdown{

            width: 190px;

            height: 260px;

            margin: 0 auto;

            background: #E83632;

            background: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/4a15d8883775742e3efbb850ae14def7.png);

        }

        .countdown .title{

            color: #fff;

            font-size: 30px;

            text-align: center;

            font-weight: bold;

            padding-top: 30px;

        }

        .countdown .desc{

            color: #fff;

            font-size: 14px;

            text-align: center;

            margin-top: 100px;

            vertical-align: middle;

        }

        .countdown .desc>strong{

            font-size: 18px;

            vertical-align: middle;

            margin-right: 8px;

        }

        .countdown .time{

            width: 80%;

            height: 30px;

            margin:0 auto;

            margin-top: 10px;

            color: #fff;

            font-size: 20px;

            margin-left: 25px;

        }

        .countdown .time>span{

            width: 30px;

            height: 30px;

            display: inline-block;

            background: #2f3430;

            margin-left: 5px;

            text-align: center;

            font-weight: bold;

            padding-top: 4px;

        }

    </style>

</head>

<body>

    <div class="countdown">

        <div class="title">京东秒杀</div>

        <div class="desc">

            <strong></strong>点倒计时

        </div>

        <div class="time">

            <span class="h"></span>

            :

            <span class="m"></span>

            :

            <span class="s"></span>

        </div>

    </div>

    <script>

        //封装为Date的内置函数

        Date.prototype.countdown = function countdown(endDate){

            if(!(endDate instanceof Date)){

                console.error('Uncaught TypeError :'+endDate+'不是Date类型');

                return undefined;

            }

            var nowDate = new Date();

            //定义cha为时间差 ,接收 现在到结束时的时间戳

            var cha = endDate.getTime() - nowDate.getTime();

            var year = parseInt(cha / (365*24*60*60*1000));

            var value = cha % (365*24*60*60*1000);

            var day = parseInt(value / (24*60*60*1000));

            var h = parseInt(value / (60*60*1000));

            value = value % (60*60*1000);

            var m = parseInt(value / (60*1000));

            value = value % (60*1000);

            var s = parseInt(value / (1000));

            var ms = parseInt(s);

            return {year,day,h,m,s,ms};

        }

        var djs = setInterval(function(){

            //设置结束时间:月份从0-11，0代表1月份，11就是12月份

            var endDate = new Date(2021,0,25,0,0,0,0);

            //匿名调用Date的自定义内置函数,传入结束的日期,返回一个对象

            var obj = new Date().countdown(endDate);

            //对返回值结果判定

            if( undefined === obj){

                clearInterval(djs);

                return;

            }

            //获取倒计时需要渲染的元素

            var end = document.querySelector('strong');

            var h = document.querySelector('.h');

            var m = document.querySelector('.m');

            var s = document.querySelector('.s');

            //时分秒为个位数时，前面补0

            if(obj.s < 10) obj.s = '0'+obj.s;

            if(obj.m < 10) obj.m = '0'+obj.m;

            if(obj.h < 10) obj.h = '0'+obj.h;

            //把数据渲染到页面

            s.innerHTML = obj.s;

            m.innerHTML = obj.m;

            h.innerHTML = obj.h;

            end.innerHTML = endDate.getHours();

            //时间到了清除定时器

            if( 0===obj.h && 0===obj.m && 0===obj.s ){

                clearInterval(djs);

            }

        },1000);

    </script>

</body>

</html>

js模仿京东首页的倒计时功能的更多相关文章

  1. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  2. JS 模仿京东键盘输入内容

    css代码 .search { width: 300px; height: 80px; margin: 0 auto; position: relative; } .con { display: no ...

  3. 模仿东京首页banner轮播，京东新闻上下滚动动画实现（动画实现）

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...

  4. 想着模仿京东微信首页呢，banner滚动搞定了，写到了一半了

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞 ...

  5. jQ效果：jQuery之插件开发短信发送倒计时功能

    实现的主要功能如下: 1.点击按钮的时候,可以进行倒计时,倒计时自定义. 2.当接收短信失败后,倒计时停止,可点击重新发送短信. 3.点击的元素支持一般标签和input标签. html代码: < ...

  6. 模块：js实现一个倒计时功能

    1.给显示内容加样式 <style> #p1{font-size: large; color: red;} </style> 2.客户端页面 <div id=" ...

  7. js 鼠标滚动到某屏时，加载那一屏的数据，仿京东首页楼层异步加载模式

    js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...

  8. js实现是倒计时功能

    工作中经常用到倒计时的功能,最近在整理之前做的项目的时候,发现自己写过一个倒计时的功能的效果,这里和大家分享下!实现这个功能是用原生js写的,不需要加载额外的库文件!功能比较简单,但是可以在此基础上扩 ...

  9. JS实现为控件添加倒计时功能

    一.概述 在有些报表需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个 ...

随机推荐

  1. numpy的好处

    python是很慢的,因为python在执行代码的时候会执行很多复杂的check功能,比如 b=1; a=b/0.5 这个运算看起来很简单,但是在计算机的内部.b要先从一个整数integer转化成一个 ...

  2. Raft算法系列教程1：Leader选举

    1.服务器的三种角色 Raft算法中服务器主要分为三种角色:Leader.Follower.Candidate,并且三种角色相互独立,也就是服务器在同一时间内只可能扮演其中一种角色. Leader:用 ...

  3. IphoneX适配正确姿势

    IphoneX适配正确姿势 写在前面 距离18年9月iphonex发布以来已经快两年了(所以对于iphonex机型的头部刘海(sensor housing)和底部小黑条(Home Indicator) ...

  4. 【基础】Linux系统的运行级别

    1.系统运行级别的配置文件 什么是运行级呢?简单的说,运行级就是操作系统当前正在运行的功能级别. 它让一些程序在一个级别启动,而另外一个级别的时候不启动. Linux系统的有效登录模式有0~9共十种, ...

  5. （三）、vim的移动（旋转，跳跃）

    一.以word为单位的移动 1.w 向后移动到后一个单词词头,取自"word" This is a line with example text ----->--->- ...

  6. JAVA_JNI字段描述符“([Ljava/lang/String;)V”(Android)

    JNI字段描述符"([Ljava/lang/String;)V "([Ljava/lang/String;)V" 它是一种对函数返回值和参数的编码.这种编码叫做JNI字段 ...

  7. Flask基础全套

    Flask简介 Flask是主流PythonWeb三大框架之一,其特点是短小精悍以及功能强大从而获得众多Pythoner的追捧,相比于Django它更加简单更易上手,Flask拥有非常强大的三方库,提 ...

  8. web攻防环境--一句话木马

    任务一.基于centos7搭建dvwa web服务靶机 1.在centos7安装LAMP并启动,访问phpinfo页面 也即安装httpd.php.mysql服务. 直接进行yum安装即可,完成后检查 ...

  9. web页面过一段时间再次访问时显示数据库连接错误

    这个问题是我之前遇到的,过了很久才想着去解决它,因为这也没多大影响,无非就是再访问一次的问题,后来有一次观察网站的运行情况时,发现这个问题还挺严重,如果一直用,就不会出现问题,如果中间歇一会,再用就会 ...

  10. Docker之1---介绍和安装

    Docker介绍 Docker是一个开源项目,让应用程序布署在软件货柜下的工作可以自动化进行,借此在Linux操作系统上,提供一个额外的软件抽象层,以及操作系统层虚拟化的自动管理机制. Docker利 ...