模仿京东首页的倒计时

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

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

思路：

  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. 精尽Spring MVC源码分析 - HandlerAdapter 组件（三）之 HandlerMethodArgumentResolver

    该系列文档是本人在学习 Spring MVC 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释 Spring MVC 源码分析 GitHub 地址 进行阅读 Spring 版本:5.2. ...

  2. Spring Data JPA 整合Spring

    1.1   Spring Data JPA 与 JPA和hibernate之间的关系 JPA是一套规范,内部是有接口和抽象类组成的.hibernate是一套成熟的ORM框架,而且Hibernate实现 ...

  3. MySQL高可用方案-MySQL InnoDB Cluster

    MySQL InnoDB Cluster简介 MySQL InnoDB Cluster 是最新GA的MySQL高可用方案,利用MySQL Group Replication和MySQL Shell.M ...

  4. 小白都能理解的Python多继承

    本文主要做科普用,在真实编程中不建议使用多重继承,或者少用多重继承,避免使代码难以理解. 方法解析顺序(MRO) 关于多重继承,比较重要的是它的方法解析顺序(可以理解为类的搜索顺序),即MRO.这个跟 ...

  5. Office__自动保存和恢复

    #1.前言 在您埋头辛苦编辑Excel.Word或PPT文档的时候,如果突然发生断电.系统崩溃.意外误操作,本文将以Excel2010为例详细阐述其中自动保存功能的工作机理和恢复文件的访问方法,Exc ...

  6. 使用shell发送邮件，方便快捷

    目录 前言 鉴赏代码 总结 前言 很多时候我们需要发送邮件,比如定时任务,比如邮件验证码等等. 各大编程语言都可以实现发送邮件功能,但还是太麻烦了,所以通过tcpdump抓包发现smtp发送邮件原理还 ...

  7. Redis不仅仅是缓存，还是……

    你需要一个经典数据库吗? 一段时间以来,巨大数量的数据处理迫使所有的应用程序在数据库层前添加缓存策略.即使经典数据库进行了大量的下划线优化,仍然不能提供足够的速度和可用性.主要原因在于数据存储越远,获 ...

  8. Android OpenGL ES 开发：绘制图形

    OpenGL 绘制图形步骤 上一篇介绍了 OpenGL 的相关概念,今天来实际操作,使用 OpenGL 绘制出图形,对其过程有一个初步的了解. OpenGL 绘制图形主要概括成以下几个步骤: 创建程序 ...

  9. Json串的字段如果和类中字段不一致，如何映射、转换？

    Json串是我们现在经常会遇到的一种描述对象的字符串格式.在用Java语言开发的功能中,也经常需要做Json串与Java对象之间的转换. fastjson就是经常用来做Json串与Java对象之间的转 ...

  10. Thread通信与唤醒笔记1

    synchronized if判断标记,只有一次,会导致不该信息的线程运行了,出现了数据错误的情况 while判断标记,解决了线程获取执行权之后,是否要运行! notify 只能唤醒一个任意线程,如果 ...