一、故事背景：

1. 今天公司有个项目需求

2. 在前端页面实现一个倒计时功能

3. 初步设想：后端根据需求规定一个未来的时间，前端根据当前时间进行计算

4. 然后将时间格式化，时分秒的格式

5. 时间倒计时完成，刷新页面获取最新的页面

6. 最后在前端展示；大致是这样

二、上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="js_time_txt">

</div>

<script src="./jquery-3.3.1.min.js"></script>

<script>

    $(function () {

// 倒计时

        var _ordertimer = null;

        var data = new Date();

        var txt = $('.js_time_txt');

        var buyTime = '2018-09-20 22:25:59'; //开抢时间

        var nowTime = '2018-09-20 22:23:45'; //接口返回当前时间

        var dateDiff = new Date(nowTime) - new Date(getnow()); //请求时间戳与本地时间戳

        if (dateDiff < 0) {

            dateDiff = Math.abs(dateDiff);

        }

        if (new Date(nowTime) > new Date(buyTime)) {

            $('.time-range').hide(); //已开枪

            return;

        } else {

            leftTimer(buyTime);

            _ordertimer = setInterval(function () {

                leftTimer(buyTime)

            }, 1000);

        }

        // 获取当前时间 xxxx/xx/xx 00:00:00

        function getnow() {

            var year = data.getFullYear();

            var month = parseInt(data.getMonth() + 1) >= 10 ? parseInt(data.getMonth() + 1) : '' + parseInt(data.getMonth() + 1);

            var day = data.getDate();

            var hours = data.getHours();

            var minutes = data.getMinutes();

            var seconds = data.getSeconds();

            var now = year + '/' + month + '/' + day + ' ' + hours + ':' + minutes + ':' + seconds;

            return now;

        }

        function leftTimer(enddate) {

            var leftTime = (new Date(enddate)) - new Date + dateDiff;

            var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数

            var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时

            var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟

            var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数

            days = checkTime(days);

            hours = checkTime(hours);

            minutes = checkTime(minutes);

            seconds = checkTime(seconds);

            if (days >= 0 || hours >= 0 || minutes >= 0 || seconds >= 0)

                txt.html(days + "天" + hours + "小时" + minutes + "分" + seconds + "秒");

            if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {

                window.clearInterval(_ordertimer);

                _ordertimer = null;

            }

        }

        function checkTime(i) { //将0-9的数字前面加上0，例1变为01

            if (i < 10) {

                i = "" + i;

            }

            return i;

        }

    })

</script>

</body>

</html>

三、由于前端水平太差，就为以后再次出现类似需求，粘贴复制，多捞哦~

根据后端传的时间前端js进行倒计时的更多相关文章

  1. 前端js上传文件 到后端接收文件

    下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...

  2. 前端js怎么实现大文件G级的断点续传（分块上传）和分段下载

    需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...

  3. Spring MVC之中前端向后端传数据

    Spring MVC之中前端向后端传数据和后端向前端传数据是数据流动的两个方向, 在此先介绍前端向后端传数据的情况. 一般而言, 前端向后端传数据的场景, 大多是出现了表单的提交,form表单的内容在 ...

  4. SpringBoot前端给后端传list

    前端JS "]; var params = { taskList: taskList }; $.ajax({ type: "PUT", dataType: "j ...

  5. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  6. RSA加密前端JS加密，后端asp.net解密，报异常

    RSA加密前端JS加密,后端asp.net解密,报异常 参考引用:http://www.ohdave.com/rsa/的JS加密库 前端JS加密代码: function GetChangeStr() ...

  7. 关于javaBean中boolean类型变量的set和get注入后传到前端JS中的问题

    set和get方法如下: public boolean isLine() {        return isLine;    } public void setLine(boolean isLine ...

  8. Updatepanel 后端返回后，在 Updatepanel 内控件的前端 js 失效问题

    实际情况:点击下箭头弹出列表,点击列表上的隐藏按钮隐藏列表. 背景:模块没有使用Js或者Jquery的Ajax功能,而是使用Asp.Net的Ajax控件--UpdatePanel + ScriptMa ...

  9. 后端传前端数据乱码（返回json字符串到前端）

    中文乱码的问题,在开发过程中难免会遇到,而在配置好编码之后,不管是数据库,还是其他地方都配置好统一UTF-8编码之后,后端从数据库取出数据传回前端,还会乱码,这里以ssm框架为例,因为是我自己遇到的, ...

随机推荐

  1. 如何修改Windows程序的权限？

    修改程序的权限需要用到3个函数: 1. 获取进程的令牌句柄: OpenProcessToken 2. 查找特权类型的ID: LookupPrivilegeValue 3. 修改进程的特权:Adjust ...

  2. R画图

    画图函数中的参数: 1.图形元素参数: pch:用于显示点的坐标,可以是一个字符,也可以是0到25的一个整数.如:pch=“+”,pch=1 lty:线条类型.如:lty=2,lty=1 lwd:线条 ...

  3. poj 2774 后缀数组 两个字符串的最长公共子串

    Long Long Message Time Limit: 4000MS   Memory Limit: 131072K Total Submissions: 31904   Accepted: 12 ...

  4. NAT ------ 内网的主机如何通过路由器与外网的主机通信

    内网主机A,路由器B,外网主机C 使用了两个协议: 路由:位于网络层,为数据包提供一个寻径的算法,不改变数据包的源IP和目的IP,但是会修改源MAC和目的MAC,只在同个网段的进行数据的转发 NAT: ...

  5. fopen()、fwrite()、fread()函数使用说明与示例

    fopen()函数: 1.作用: 在C语言中fopen()函数用于打开指定路径的文件,获取指向该文件的指针. 2.函数原型: FILE * fopen(const char * path,const  ...

  6. CF&&CC百套计划2 CodeChef December Challenge 2017 Chef and Hamming Distance of arrays

    https://www.codechef.com/DEC17/problems/CHEFHAM #include<cstdio> #include<cstring> #incl ...

  7. [USACO07NOV]挤奶的时间Milking Time

    https://daniu.luogu.org/problemnew/show/2889 按右端点从小到大排序后DP dp[i] 到第i个时间段的最大产奶量 不能按左端点排序,第i段由第j段更新时,第 ...

  8. 20155223 2016-2017-2 《Java程序设计》第7周学习总结

    20155223 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 Lambdo表达式下,任何参数的类型必须标明清楚:如果有目标类型的话,在编译程序可 ...

  9. sqlalchemy操作数据库（二）

    sqlalchemy的基本操作 表结构如下: from sqlalchemy import create_enginefrom sqlalchemy.ext.declarative importdec ...

  10. Linux/Unix系统编程手册 第二章：基本概念

    本章预热与后续系统编程有关的概念. 术语“操作系统”通常包含2种含义:一是指完整的软件包,包括管理计算机资源的核心组件,已经附带的标准软件:二是独指管理硬件的内核. 内核具有诸多概功能,包括: 进程管 ...