模仿京东首页的倒计时

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

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

思路：

  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. fiddler抓APP的https接口

    吐槽一下,fiddler这工具很蛋疼,用的时候很好用,出bug的时候死活抓不了: ①为了少踩坑,我们在官网下最新的fiddler,官网:Fiddler - Free Web Debugging Pro ...

  2. Filezilla账号设置多个文件夹

    问题描述 一个账号,使用多个文件目录.虽然可以这样设置,但是实际上客户端使用时只能使用一个目录(主目录). 所以想找一种方式,访问一个主目录时,也可以访问到其他的目录. 官网示例 https://wi ...

  3. npm 各种常用命令

    全局删除 node-gyp npm -g uninstall node-gyp 再次安装依赖 npm install 更改包内容后重建 npm rebuild 清除缓存 npm cache clean ...

  4. Selenium ActionChains、TouchAction方法

    ActionChains和TouchAction可以用来模拟点击.双击.滑动等事件.ActionChains用于执行PC端的鼠标移动.按键.拖拽等事件:TouchActions用法与ActionCha ...

  5. Mac 下 IDEA 启动慢的问题

    转自: http://blog.csdn.net/KingBoyWorld/article/details/73440717 从控制台来看,每次都会连接本地地址(127.0.0.1),问题可能就出在这 ...

  6. idea 【Maven Projects # Profiles】问题记录

    今天启动接一个新项目,然后项目启动后发现启动的环境和预想的不一致,查看 pom 文件确认自己是 dev 无误之后,但是启动的就是 test 环境. 问题 发现了启动环境不对不对之后,自己试了一种解决办 ...

  7. 发送微信通知 java 实现

    /实现类 @Service public class WeChatServiceImpl implements IWeChatService { @Override public WeChatSend ...

  8. 通配符的匹配很全面, 但无法找到元素 'dubbo:application' 的声明 解决办法

    直接升级dubbo的版本到2.6.4 下面的是我的项目的pom.xml配置的依赖 <dependency>                <groupId>com.alibab ...

  9. python实现AES/DES/RSA/MD5/SM2/SM4/3DES加密算法模板汇总

    都是作者累积的,且看其珍惜,大家可以尽量可以保存一下,如果转载请写好出处https://www.cnblogs.com/pythonywy 一.md5加密 1.简介 这是一种使用非常广泛的加密方式,不 ...

  10. JavaI/O编程---File文件操作

    File类的基本使用 构造方法: public File (String pathname) public File(FIle parent,String child) 创建文件: public bo ...