js根据服务端返回的时间倒计时

使用服务端与本地的时间差进行计算

$(function(){
// 倒计时
var _ordertimer = null;
var data =new Date();
var txt = $(‘.js_time_txt‘);
var buyTime = ‘2018/03/28 10:30:00‘; //开抢时间
var nowTime = ‘2018/03/16 17:00:00‘; //接口返回当前时间

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) : ‘0‘ + 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 = "0" + i;
  }
  return i;
 }
})

原文地址:https://www.cnblogs.com/yangjing1314/p/8583642.html

时间: 2024-10-12 21:45:26

js根据服务端返回的时间倒计时的相关文章

如何创建一个客户端回调:js获得服务端的内容?

答案:表面上看去就是前端的js调用服务的C#方法,本质就是ajax,通过XMLHttpRequest对象和服务端进行交互.回调:就说回过头来调用,按理说js是一种脚本语言,怎么能用来调用服务端的呢?就是通过XMLHttpRequest实现的. 下面说一些具体的操作步骤 1.页面继承接口System.Web.UI.ICallbackEventHandler //继承接口使得:该页面可以作为服务器上的回调事件的目录 2.定义前端代码如下 <div> 请输入信息: <input type=&q

android菜鸟学习笔记25----与服务器端交互(二)解析服务端返回的json数据及使用一个开源组件请求服务端数据

补充:关于PHP服务端可能出现的问题: 如果你刚好也像我一样,用php实现的服务端程序,采用的是apache服务器,那么虚拟主机的配置可能会影响到android应用的调试!! 在android应用中访问的IP都是10.0.2.2,如果在apache虚拟主机配置文件中配置了多个虚拟主机,那么将默认解析为对第一个虚拟主机的请求,所以,在调试android应用时,应该将对应的服务端所配置的那个虚拟主机放在配置文件中的第一个虚拟主机的位置.否则就会出现请求的文件不存在等的错误. 服务端返回JSON数据及

easyUI form提交与springMVC交互时服务端返回的错误处理

asyUI form的submit接口中没有提供error回调函数,网上一种解决方案是串联.success(function(){}).error(function(){}),然后通过jqXHR进行统一处理:但是我发现这种方案不论服务端返回正确还是异常,都会调用.error(),而且这样写代码也有点乱.经过两天摸索,基本找到了解答.对于post提交的数据,服务端的controller定义为void,不必返回值,通过在controller上注解的方式控制返回的http头.在这里发现对于easyUI

ASP.NET之通过JS向服务端(后台)发出请求(__doPostBack is undefined)

ASP.NET回发数据是通过函数__doPostBack来实现的,该函数在添加了服务端控件,并将AutoPostBack设置为true之后,将自动生成,具体可以参看下面的图. 同时还会生成隐藏控件,其ID为__EVENTTARGET和__EVENTARGUMENT,前一个是用于存放key的,后一个用于存放参数的. 所以在后台通过Request.Form来获取所要的数据,test.aspx.cs代码如下 using System; using System.Collections.Generic;

在Android中调用KSOAP2库访问webservice服务出现的服务端返回AnyType{}

最近在做毕业设计的时候,涉及到了安卓端访问web service服务端数据库,并返回一个值,当我把web service测试通过后,想写一个简单的安卓测试程序,来实现服务端数据库访问,通过web service中的一个serch()方法,然后发现,每次的返回值都是一个AnyType{},Logcat如图所示: 网上搜集了很多资料,产生的原因其实很简答,是因为服务端返回值为null,Logcat中显示的就职anyType{},找到了原因,解决起来也就好说了,其中包括这些方法: {解决方法引用自博客

axis2生成webservice服务端返回String[]和String[][]一维数组和二维数组解析

环境:用axis2生成服务端,用aixs做客户端 1:直接返回String[]: public String[] testArr(String name) { String[] ret=new String[]{"一二三四五","上山打老虎",name}; return ret; } 发布后,wsdl为: 而普通返回String方法的格式为: 可以看到,返回String[]比返回String的响应中多了一个参数maxOccurs="unbounded&qu

解析Nuxt.js Vue服务端渲染摸索

本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可.Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的.我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的

[Axis2与Eclipse整合开发Web Service系列之三] 服务端返回值

前言 在前面的三篇中 [Axis2与Eclipse整合开发Web Service系列之一] 生成Web Service Client(将WSDl 转化成 Java代码) [Axis2与Eclipse整合开发Web Service系列之二] Top-Down方式,通过WSDL逆向生成服务端 [Axis2与Eclipse整合开发Web Service系列之二] Top-Down方式,通过WSDL逆向生成服务端(续) 介绍了如何使用 axis2 与 eclipse 的开发web Service .在第

号召大伙完善一个IM系统---------C#+JS (二)-------服务端封装Redis

这个IM的服务端,使用的是Redis作为数据库 我一开始使用的redis的SDK是ServiceStack.Redis,但是据说它是收费的,测试版的一个小时内只能发送1000个请求?? 后来,我改成使用StackExchange.Redis作为Sdk,并根据它的特点进行了一些封装.下面,介绍一下 为什么这样封装以及封装的内容. 我们先看一下封装后,是如何调用的(最终的目的就是要这样) 使用关系型数据库(mysql,sqlserver..)时,我们都是有一个DAL层的,dal层的每个类,对应的是一