一、故事背景：

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. D. Arpa and a list of numbers Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017)

    http://codeforces.com/contest/851/problem/D 分区间操作 #include <cstdio> #include <cstdlib> # ...

  2. IAR ------- 在线调试技巧

    调试模式下,右击某一行选“Set Next Statement”,可以不执行中间程序,执行点直接到此行,用于不执行某些代码.

  3. Docker 基础知识

    Docker Docker 是什么 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是 ...

  4. windows查找端口占用/ 终结端口占用 ------------windows小技巧

    前沿 我是一名小程序员,经常通过一些类似tomcat,jettry 等服务器工具 调试项目.有时候莫名其妙的就会出现 程序关闭不正常的情况!去查端口又死活找不到!最后只能重启电脑 后面,在网上查了一些 ...

  5. ansible安装后运行报错cryptography

    [root@kazihuo ~]# ansible all -m ping ERROR! Unexpected Exception, this is probably a bug: (cryptogr ...

  6. 拟牛顿法/Quasi-Newton，DFP算法/Davidon-Fletcher-Powell，及BFGS算法/Broyden-Fletcher-Goldfarb-Shanno

    拟牛顿法/Quasi-Newton,DFP算法/Davidon-Fletcher-Powell,及BFGS算法/Broyden-Fletcher-Goldfarb-Shanno 转载须注明出处:htt ...

  7. 【学习笔记】FreeMarker 之于Servlet与Stuts2的应用

    FreeMarker应用在Servlet(0配置web.xml形式): 准备环境: tomcat7.eclipse最新版.jdk1.8.freemarker v2.3.20.jar 举例项目结构图: ...

  8. VBscript.Encode 解码器

    VBscript.Encode 解码器   此解码器算法来至互联网,我只是收集然后写了个简单的页面便于大家使用. 如有何不妥之处,请留言.

  9. 24点扑克牌游戏——（含java源码）（GUI实现）

    给出四个数字,要求,在其间添加运算符和括号,使得计算结果等于24. 括号的放置即为决定哪几个数先进行计算.所以,我们先确定首先进行计算的两个相邻的数,计算完成后,就相当于剩下三个数字,仍需要在它们之间 ...

  10. 你对position的了解到底有多少？

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...