`
lizhenbin2010
  • 浏览: 99954 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JS服务器获取时间倒计时

    博客分类:
  • JS
 
阅读更多

       最近,公司搞营销活动,搞1元抢某某之类的形式,不管他是什么形式,页面设计的倒计时,应该与服务器的时间基本一致。我来说说我的做法,首先用户打开页面,第一次加载页面信息的时候,把服务器的时间传到页面,然后页面与倒计时的时间作比较,计算差值,进行倒计时。

        这么做也有一个弊端,假如说用户的网络比较长,请求的时间比较长,倒计时所看到的时间与服务器的时间相差还是蛮大的,如果JS取的是用户客户端的时间,时间就很不准确,综合上述:还是第一次取服务器时间,然后用这个时间作基准倒计时,网络慢的用户,呵呵,抢不到也没办法。

        下面是我倒计时的JS,留着以后用的时候参考:

/**
 * @时间倒计时脚本(从服务器获取时间倒计时)
 * @author:lizhenbin
 * @date: 2011年12月30日
 */

 var endtimes = $("#_dateEndTime").val(); //后台获取每天结束时间(字符串)
 var begintimes = $("#_dateBeginTime").val();
 var nowtimes; //服务器时间
 
 //获取服务器时间
 function givetime(){ 	
 	var _s_today = $("#_dateCurrentTime").val(); //获取服务器时间(字符串)
 	nowtimes = new Date(_s_today);
 	window.setTimeout("DownCount()",1000)
 }
 
 //正常时间
 function DownCount(){
	
	nowtimes = Number(nowtimes) + 1000; //当前时间
	var theDay = new Date(endtimes); //结束时间
	var beginDay = new Date(begintimes); //倒计时开始时间
	theDay = theDay++;
	
	if(theDay < nowtimes){
		//表示倒计时时间已经完成
		$("#showHour").html('00');
        $("#showMin").html('00');
        $("#showSencond").html('00');
        
	}else if(beginDay > nowtimes) {
		//时间未到
		$("#showHour").html('00');
        $("#showMin").html('00');
        $("#showSencond").html('00');
	}else{
		//倒计时
		timechange(theDay);
	}	
	window.setTimeout("DownCount()",1000)
 }
 
 //时间修改
 function timechange(theDay){
 
	var theDays = new Date(theDay);
	var seconds = (theDays - nowtimes)/1000;
	var minutes = Math.floor(seconds/60);
	var hours = Math.floor(minutes/60);
	var days = Math.floor(hours/24);
	var CDay= days;
	var CHour= hours % 24;
	var CMinute= minutes % 60;
	var CSecond= seconds % 60;
	var CHour=CHour+CDay*24;
	
	//当前时间参数
	var _t_minute = CMinute;
	var _t_hour = CHour;
	var _t_second = CSecond;
	
	if(CMinute < 10) {
		CMinute = "0" + CMinute;
	}
	if(CHour < 10) {
		CHour = "0" + CHour;
	}
	if(CSecond<10) {
		CSecond = "0" + CSecond;
	}
	//显示倒计时
	$("#showHour").html(CHour);
    $("#showMin").html(CMinute);
    $("#showSencond").html(CSecond);
    
    if(CHour=='00' && CMinute=='00' && CSecond=='00') {
    	//时间到自动刷新页面
		//alert("倒计时结束,刷新页面");	
		$("#_s_city1").html("");
		$("#_s_city2").html("");		
		$city = $('#_s_city1').empty();
		var $a = $('<a href="#"/>').addClass('button');
		$a.click(function() {
			check('20110223042027232060', '20111212033222948216','20110223042027232060', '20111206033838490187' ,'2');
		});
		var $img = $('<img src="360images/index_20.jpg"/>');
		$city.append($a.append($img));
		$city2 = $('#_s_city2').empty();
		var $a2 = $('<a href="#"/>').addClass('button');
		$a2.click(function() {
			check('20110223042027232060', '20111212033222948216','20110223042027232060', '20111206033838490187' ,'1');
		});
		var $img2 = $('<img src="360images/index_20.jpg"/>');
		$city2.append($a2.append($img2));		
     }
  } 
  
  givetime(); //执行js脚本

 

分享到:
评论

相关推荐

    js获取服务端时间并倒计时

    js获取服务端时间并进行倒计时,结束时间可动态获取。源码公开,可以在倒计时结束后调用后台方法。要用IDE是vs2008

    Javascript实现商品秒杀倒计时(时间与服务器时间同步)

    在一些购物商城经常看到有很多商品做秒杀活动,也就是倒计时,本篇文章给大家介绍Javascript实现商品秒杀倒计时(时间与服务器时间同步),需要的朋友可以了解下

    js倒计时源码

    js倒计时,能够获取服务器当前时间进行倒数计时

    【JavaScript源代码】vue实现秒杀倒计时组件.docx

    请求服务器获取这一刻的服务器时间(统一以服务器时间为基准) 2.获取用户当前电脑时间与服务器时间比对,获取时间差。以当前电脑时间-减去时间差为最终时间(定义为服务器当前时间) 3.设置秒杀开始时间 4.秒杀时间与...

    js 倒计时(高效率服务器时间同步)

    方案1:每次倒计时去服务端请求时间 //开启定时器 var timer = setInterval(function () { //执行请求,获取当前服务端时间并进行相应操作 }, 1000); 这个方案对于稍微有点经验的开发人员来说,都知道是不可取的。...

    javascript同步服务器时间和同步倒计时小技巧

    之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能 一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个很...

    countdown:一个倒计时程序

    可以指定一个标准的初始时间,通常这个时间是从服务器获取的,这样可以避免客户端本地时间不准确造成的问题 提供两个事件回调,每次倒计时时的回调(intervalCallback)和倒计时结束以后的回调(endCallback) 本...

    jsp页面获取服务器时间的简单调用示例

    Calendar c = Calendar.getInstance();... 您可能感兴趣的文章:javascript同步服务器时间和同步倒计时小技巧Javascript实现商品秒杀倒计时(时间与服务器时间同步)javascript实现获取服务器时间JSP获取服

    php实时倒计时功能实现方法详解

    2)用户端修改日期时间不会影响到倒计时的正常显示(也就是以服务器时间为准) 其实这和很多的考试等系统的时间限制功能同样的要求. 解决思路: 1)总不能用ajax每秒都获取服务器时间吧. 所以实时倒计时一定要用...

    countdown.js:一个jQuery版的倒计时插件(关联服务器时间)

    countdown.js一个jQuery版的倒计时插件如不需要获取服务器时间可将一下代码:$.ajax({url: './api/stampTime.json', // 获取服务器时间戳type: 'GET',dataType: "json",success: function(data) {if (data.success) ...

    php实现倒计时效果

    这里写了一个考试系统剩余时间倒计时的显示代码和大家一起探讨。 实现原理: PHP获取的是服务器端的时间,我们只要设置考试的开始时间和结束时间及当前时间。如果当前的时间不在我们的考试时间范围内,则显示给考生...

    javascript 实现 秒杀,团购 倒计时展示的记录 分享

    其中最主要的一点就是所谓的当前时间不能使用浏览器通过new Date()获取的客户端时间,这样只要用户修改了自己的机器时间那么倒计时就会乱透了,所以这个当前时间必须使用的是服务器时间,所以采用的是静态缓存页面...

    PHP 类商品秒杀计时实现代码

    总不能用ajax每秒都获取服务器时间吧,所以实时倒计时一定要用javascript实现。这很简单,网上一大把的例子。 现在问题是解决用户端修改日期时间对我们的显示的影响。 解决的办法是计算出用户端的时间和服务器的...

    Jquery js文件

    做了一个 js获取服务器时间倒计时的页面,里面就用到了这个js 放在这里供下载。

    vue+vant实现商品列表批量倒计时功能

    最开始写这个倒计时的时候没有考虑到使用当前服务器时间问题,只获取了本地时间 new Date().getTime(),然后发现这个不行,只要用户修改下手机本地时间,这个倒计时就不行了,有安全隐患,在网上也搜了一些相关知识,...

    浅谈PHP实现大流量下抢购方案

    总不能用ajax每秒都获取服务器时间吧,所以实时倒计时一定要用javascript实现。这很简单,网上一大把的例子。 现在问题是解决用户端修改日期时间对我们的显示的影响。 解决的办法是计算出用户端的时间和服务器的时间...

    JavaScript娇娆向日葵

    玩法:随着音乐节奏,点击左右按钮控制场景中人物...初始化UI(各种 Node 节点、倒计时组件、异步加载龙骨动画、动态加载预制资源) 判断是否授权,如果没有授权就动态创建button 游戏逻辑实现 游戏成绩上报 好友排行榜

    bandwidth:获取一系列 url 的页面加载时间并提取计时方法的工具

    带宽获取一系列 url 的页面加载时间并提取计时方法的工具如何: 设置一个激活 mod_ssl 的 apache 服务器将侦听器放在可访问的目录带宽/侦听器中(数据发送到 ) 在侦听器目录中创建一个名为 raw_data 的文件并将其...

    共享计时器:一种Web应用程序,您可以在其中创建并与其他人共享计时器。 建立在React Hooks和Firebase之上

    来宾可以输入计时器代码以获取计时器所有后端互动均通过云功能和Firebase管理员SDK完成不幸的是,由于云功能的工作方式,冷启动时间将一直是一个问题,直到有足够的用户可以一直运行该功能或被节点服务器替换为止在...

Global site tag (gtag.js) - Google Analytics