一、故事背景：

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. 各种RF的比较

    转的. 随机森林:是一个包含多个决策树的分类器, 并且其输出的类别是由个别树输出的类别的众数而定.,随机森林对回归的结果在内部是取得平均 但是并不是所有的回归都是取的平均,有些是取的和,以后会发博文来 ...

  2. pycharm 取消自动保存

    pycharm默认是自动保存的,习惯自己按 ctrl + s 的可以进行如下设置: 菜单File -> Settings... -> Appearance & Behavior - ...

  3. 星号三角形 I

    N = int(eval(input())) for row in range(1,N+1): if row%2 != 0: a = '*'*row print ('{}'.format(a.cent ...

  4. python基础之collections模块

    Counter Counter是一个简单的计数器,可以统计一段字符串中各个元素出现的次数: import collections counter_1=collections.Counter('kjsd ...

  5. state.sls与state.highstate区别

    最近编写kubernetes的saltstack状态配置文件,在github上找到一个开源的salt文件,根据自己的需要,完成修改之后.执行部署测试 大致目录结构如下: |----k8s | |___ ...

  6. P3572 [POI2014]PTA-Little Bird

    P3572 [POI2014]PTA-Little Bird 一只鸟从1跳到n.从1开始,跳到比当前矮的不消耗体力,否则消耗一点体力,每次询问有一个步伐限制k,求每次最少耗费多少体力 很简短的题目哼. ...

  7. P3155 [CQOI2009]叶子的染色

    P3155 [CQOI2009]叶子的染色 题目描述 给一棵m个结点的无根树,你可以选择一个度数大于1的结点作为根,然后给一些结点(根.内部结点和叶子均可)着以黑色或白色.你的着色方案应该保证根结点到 ...

  8. Redis配置及使用

    1.参考资料 在线命令说明: http://doc.redisfans.com/ redis安装列表: https://github.com/rgl/redis/downloads Redis工具使用 ...

  9. Nginx记录-Nginx配置

    1. 启动,停止和重新加载Nginx配置 要启动nginx,请运行可执行文件. 当nginx启动后,可以通过使用-s参数调用可执行文件来控制它. 使用以下语法: nginx -s signal 信号( ...

  10. bzoj千题计划111：bzoj1021: [SHOI2008]Debt 循环的债务

    http://www.lydsy.com/JudgeOnline/problem.php?id=1021 如果A收到了B的1张10元,那么A绝对不会把这张10元再给C 因为这样不如B直接给C优 由此可 ...