模仿京东首页的倒计时

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

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

思路：

  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. Flink批处理读取Hive写入MySql

    把hive 表stu77 的数据写入 mysql 表test_stu 中. 中间可以加自己的逻辑. import org.apache.flink.table.api.EnvironmentSetti ...

  2. xss未看完的文章

    https://blog.csdn.net/fen0707/article/details/8596888                XSS介绍与攻击 http://xss.fbisb.com/w ...

  3. 浅析Linux 64位系统虚拟地址和物理地址的映射及验证方法

    虚拟内存 先简单介绍一下操作系统中为什么会有虚拟地址和物理地址的区别.因为Linux中有进程的概念,那么每个进程都有自己的独立的地址空间. 现在的操作系统都是64bit的,也就是说如果在用户态的进程中 ...

  4. Mysql 52条SQL语句性能优化策略汇总

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在where及order by涉及的列上建立索引. 2.应尽量避免在where子句中对字段进行null值判断,创建表时NULL是默认值,但大多数时候应 ...

  5. 每天学习一点ES6（二）let 和 const

    let 命令 let 和 var 差不多,只是限制了有效范围. 先定义后使用 不管是什么编程语言,不管语法是否允许,都要秉承先定义,然后再使用的习惯,这样不会出幺蛾子.以前JavaScript比较随意 ...

  6. JDK8-日期时间新方式

    日期时间新方式 ​ 在日常开发中,对于日期操作是非常常见的,但是对于有经验的开发人员来说Java8之前的日期操作是有较大问题 的.比方说SimpleDateFormat.但是在Java8之后提出了Da ...

  7. day114:MoFang:基于支付宝沙箱测试环境完成创建充值订单接口&服务端处理支付结果的同步通知和异步通知

    目录 1.基于支付宝提供的沙箱测试环境开发支付接口 1.后端提供创建充值订单接口 2.前端调用AlipayPlus发起支付 3.注意:自定义APPLoader完成接下来的开发 4.下载支付宝沙箱钱包A ...

  8. MongoDB用户权限操作语法及示例

    1.创建用户 1.1.语法格式: 1.1.1.格式及例子 >db.createUser( { user: "<name>", pwd: "<cle ...

  9. 整数划分(硬币问题)(dp)

    题目描述 考试时思路 本菜狗考试的时候,第一扁打了纯dfs,15分拿了9分 后面看了时限400ms,多组数据,以为会卡常数,然后就想着先dp打表然后再直接O(1)查询 后面发现自己想多了,数据有点水- ...

  10. java面向对象的一些知识

    (1)this和super关键字的用法 this表示调用本类实例方法和成员变量,this引用就是对一个对象的引用,如this.name  表示本类成员变量name,静态方法中不能使用this关键字. ...