一、故事背景：

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. ubuntu vim 配置

    set nuset autoindent cindentmap<F9> :w<cr> :!g++ -O2 -o %< % -Wall<cr>map<F1 ...

  2. Java入门：基础算法之从字符串中找到重复的字符

    本程序演示从一个字符串中找出重复的字符,并显示重复字符的个数. import java.util.HashMap; import java.util.Map; import java.util.Set ...

  3. array_merge 优化调整

    function dealed_array_merge($a,$b){ if ($a && !$b){ return $a; } if (!$a && $b){ ret ...

  4. linux命令总结之state命令

    ls 命令及其许多参数提供了一些非常有用的文件信息.另一个不太为人所熟知的命令 stat 提供了一些更为有用的信息. [root@Gin scripts]# man stat STAT() User ...

  5. bzoj千题计划159：bzoj2055: 80人环游世界（有源汇上下界可行最小费用流）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2055 某个国家必须经过vi次, 可以转化为上下界都为vi的边 对这张图做有源汇上下界可行最小费用流 ...

  6. protobuffer

    ［protobuffer］ 1.扩展名为.proto. 2.定义一个协议: 3.定义一个Service: 4.编译器为protoc,使用protoc: 5.style:所有的类型名均CamelCase ...

  7. 6个动作4种难度选择！家庭减肥就用hiit

    今天推荐一组课程计划,6个动作,后面会教你如何调整课程难度,以便让课程更适合自己的身体情况. 一.深蹲:8-10次 二.俯卧撑:5-8次(女生如果完成不了标准俯卧撑,可以选择跪姿俯卧撑) 三.平板支撑 ...

  8. [问题]通过IIS宿主发布WCF服务，客户端添加服务引用出错的解决办法

    环境配置:Web服务器:Windows Server 2008,iis7.5,.net4.0客户端:XPsp3 vs2010 sp1 问题描述:1.确定WCF服务访问地址  http://servic ...

  9. 最小主义：我的Musca桌面环境

    我现在有一个非常简单实用的桌面环境了:Musca + conky + trayer. 当然Musca运行时需要dmenu,其实也不是非dmenu不可,据说 dzen 也不错. 我现在用的是dmenu. ...

  10. HDU 2097 Sky数 进制转换

    解题报告:这题就用一个进制转换的函数就可以了,不需要转换成相应的进制数,只要求出相应进制的数的各位的和就可以了. #include<cstdio> #include<string&g ...