一、故事背景：

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. 《编程快速上手》--web抓取--利用webbrowser模块的mapIT.py

    1.代码如下 #! python3 # mapIT.py - Launches a map in the browser using an address from the # command lin ...

  2. python与pycharm

    什么叫自动化测试? 通俗来说,自动化测试就是通过写代码来帮我们测试软件.用来做自动化测试的语言很多,python,Java,php,Go,ruby等.而且软件系统开发语言与自动化测试语言可以不一致.例 ...

  3. Go_18: Golang 中三种读取文件发放性能对比

    Golang 中读取文件大概有三种方法,分别为: 1. 通过原生态 io 包中的 read 方法进行读取 2. 通过 io/ioutil 包提供的 read 方法进行读取 3. 通过 bufio 包提 ...

  4. 疯狂Android讲义

    1 Android应用和开发环境2 Android应用的界面编程3 Android的事件处理4 Activity Fragment5 Intent IntentFilter6 Android应用的资源 ...

  5. vue2.0实战记录

    1. 初始化项目vue init webpack caseone cd caseonecnpm installcnpm install less less-loader -Dcnpm install ...

  6. Excel 中 VLOOKUP() 函数小结

    应用场景: 数据仓库上游源系统的数据库表变更,现在需要拆分一部分数据出来,单独放到一张新表中.假设原表为A,新表为B,B表和A表结构大部分一样,只有字段的前缀不同,那么我们如何找出到底有哪些字段不同呢 ...

  7. 2017 清北济南考前刷题Day 2 afternoon

    期望得分:100+60+70=230 实际得分:0+60+0=60 T1 可以证明如果一对括号原本就匹配,那么这对括号在最优解中一定不会被分开 所以用栈记录下没有匹配的括号 最后栈中一定是 一堆右括号 ...

  8. python学习笔记2--list

    一.list操作 list=['xiaohei','xiaobai','xiaohong']#定义一个数组 name=[]#定义一个空数组 #查 #下标是从0开始 print(list[1]) #-1 ...

  9. ASP.NET中常用输出JS脚本的类（来自于周公博客）

    using System; using System.Collections.Generic; using System.Text; using System.Web; using System.We ...

  10. serialize()传值缺失

    思路:serialize()获取的是 " & " 拼接的字符串,无法传值,需要拆分后,拼接,生成新字符串,传过去. 例子: var v_idd = $("form ...