模仿京东首页的倒计时

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

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

思路：

  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. 被 Pandas read_csv 坑了

    被 Pandas read_csv 坑了 -- 不怕前路坎坷,只怕从一开始就走错了方向 Pandas 是python的一个数据分析包,纳入了大量库和一些标准的数据模型,提供了高效地操作大型数据集所需的 ...

  2. tkinter + 爬虫 实现影视在线资源系统

    应吾爱朋友现公布代码如下: import tkinter as tk import requests,re,sys,asyncio from tkinter import scrolledtext,E ...

  3. Centos7.6上利用docker搭建Jenkins来自动化部署Django项目

    一般情况下,将一个项目部署到生产环境的流程如下: 需求分析-原型设计-开发代码-内网部署-提交测试-确认上线-备份数据-外网更新-最终测试,如果发现外网部署的代码有异常,需要及时回滚. 整个过程相当复 ...

  4. 5分钟完全掌握Python协程

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 1. 协程相关的概念 1.1 进程和线程 进程(Process)是应用程序启动的实例,拥有代码.数据 ...

  5. Java基础:String类详解,案例用户登录实现,案例手机号截取实现,案例敏感词替换实现;StringBuilder类详解,StringBuilder和String相互转换,附练习案例.

    1.API 1.1 API概述-帮助文档的使用 什么是API API (Application Programming Interface) :应用程序编程接口 java中的API 指的就是 JDK ...

  6. Swift3.0学习之Button

    1.根据字符串的长度确定Button的长度(button的高度给定) let hight:CGFloat = 30.0 let size1 = CGSize(width: getLabWidth(la ...

  7. （六）、mv-一个具备更改文件名和移动文件的命令

    一.mv的命令格式和作用 既可以在不同目录之间移动文件和目录,也可以在同一目录下对文件或者目录重命名,如果目标文件已经存在,则可覆盖他,若 目标文件或者目录不存在,则创建他:移动的dst必须为目录 命 ...

  8. python列表（九）元组

    元组 元组是不可变序列,元组一旦创建,用任何方法都不可以修改其元素. 元组的偶有元素是放在一对圆括号"()"中 1.元组创建与删除 使用"="讲一个元组赋值给变 ...

  9. java.lang.NoSuchMethodError的解决办法

    开发一个知识图谱在线服务(基于springcloud+vue)构建中医理论的知识图谱构建帕金森的知识图谱提供免费的知识图谱服务,希望能为朋友们的生活.学习.工作提供帮助(敬请期待)PS:关注后,点击头 ...

  10. [LeetCode]100. Same Tree判断树相同

    dfs遍历一下判断 public boolean isSameTree(TreeNode p, TreeNode q) { if (p==null) { return q == null; } els ...