倒计时显示 秒杀

近日在做秒杀活动,涉及到页面倒计时显示功能,这里记录一下可以为大家提供一个参考,本示例,基本流程是在登录主页时在后台将剩余秒数和活动时限秒数传至前台页面,功能实现为倒计时在活动时限内显示并且秒杀按钮可以点击,超过秒杀时限则秒杀按钮失效。

如果大家有更好的方法可以靠诉我,或者给我链接,我们共同成长。

好少说废话,上代码:

javascript:

$(function(){
	//活动倒计时
	countDown("#colockbox1");
});

//倒计时显示
function countDown(id){
	var sys_scope = ${sysTimeScope};//活动时限-秒
	var sys_second = ${sysSecond};//剩余时间-秒
	var activityIsStart = ${activityIsStart};
	if(!activityIsStart|| sys_second<=0){
		$("#gold_div").addClass('gray'); <span style="font-family: Arial, Helvetica, sans-serif;">//背景置灰 </span>
		$("#gold_btn").attr("disabled",true); //按钮失效
		$("#gold_ipu").attr("disabled",true);//输入框失效
	}
	var timer = setInterval(function(){
		if (sys_second > sys_scope) {
			$(id).text("活动尚未开始");
			sys_second -= 1;
		} else if(sys_second <= (sys_scope) && sys_second >=1 ){
			$("#gold_div").removeClass('gray'); //背景置灰
			$("#gold_btn").removeAttr("disabled");//按钮失效
			$("#gold_ipu").removeAttr("disabled");//输入框失效
			sys_second -= 1;
			var hour = Math.floor((sys_second / 3600) % 24);
			var minute = Math.floor((sys_second / 60) % 60);
			var second = Math.floor(sys_second % 60);
			var alertText = "";
			if(hour>0){
				alertText+=hour+"小时";
			}
			if(minute>0){
				alertText+=minute+"分";
			}
			alertText+=second+"秒";
			$(id).text(alertText);
		}else{
			$("#gold_ipu").attr("disabled",true).val("");//清空输入框
			$("#gold_div").addClass('gray'); //背景置灰
			$("#gold_btn").attr("disabled",true); //按钮失效
			$(id).text("活动已结束");//提示
			clearInterval(timer);
		}
	}, 1000);
}

jsp

 <div id="gold_div">
    <a href="javascript:void(0);"  onclick="secKill();" >
         <input type="button"  value="提交秒杀" id="gold_btn"/>
    </a>
 </div>
 <dl class="cf">
    <dt><span></span>剩余时间:</dt>
       <dd id="colockbox1"></dd>
 </dl>
时间: 2024-10-05 11:21:15

倒计时显示 秒杀的相关文章

好玩的WPF第一弹:窗口抖动+边框阴影效果+倒计时显示文字

大家一进到博客就应该看到这张GIF了吧--好吧,今天不是星期一-- 那么就来一起做做这个效果啦!看完记得点赞哦~ 新建一个WPF项目 如果新建WPF项目应该不用我说了吧,在C#下面找找就好了. MainWindow.xaml 在初始的Window下添加如下属性: x:Name="mainWindow" WindowStartupLocation="CenterScreen" WindowState="Normal" WindowStyle=&qu

批处理bat倒计时显示

批处理bat倒计时显示 新建批处理bat文件,  .txt→.bat 改扩展名或txt里另存为.bat就可以 红色数字是倒数时间可自行修改,提醒汉子也可以自行修改 @echo offfor /l %%i in (12,-1,0) do (clsecho.echo.echo.echo. 倒计时数%%i后 自动安装完毕启动..ping 127.1 -n 2 >nul)exit 原文地址:https://www.cnblogs.com/xiongmaoshu/p/12598802.html

一个倒计时显示的毫秒数(模仿拼多多)

直接上干货 /** * 毫秒倒计时成时 分 秒的形式 * @param ms * @return */ public static String[] formatSecKillTime(Long ms) { Integer ss = 1000; Integer mi = ss * 60; Integer hh = mi * 60; Long hour = (ms ) / hh; Long minute = (ms - hour * hh) / mi; Long second = (ms - ho

倒计时显示

<script type="text/javascript"> var timer = window.setInterval("Timer()",1000);//启用定时倒计 var secs = 5; function Timer() { secs--; document.getElementById("btnShow").innerHTML = "倒计时:[" + secs + "]"; i

AJAX短信验证码接口,setInterval,clearInterval倒计时显示

intervalId : '', count :120, sendSmsCode:function(){ var _thi = this; if(_thi.smscodeSending){ return; }else if(!$("#mobilePhone").validator().validator('check')){ return; } _thi.smscodeSending = true; var data = new Object(); data.mobile = $('#

SSM实战——秒杀系统之Web层Restful url设计、SpringMVC整合、页面设计

一:Spring整合SpringMVC 1:编写web.xml,配置DispatcherServlet <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.

电商秒杀

秒杀思路:后台根据商品加入秒杀发布秒杀详细信息,生成静态页面,发布信息添加到库,前台查看秒杀信息, (我前台的概念是买家使用的系统为前台,公司内部使用的管理系统为后台),秒杀中库存和事件通过ajax 取服务器时间(客户端的时间不准),秒杀库存的统计已下单为主,库存数量的更改以下单为准,秒杀结束和下面<>里内容 就直接抛秒杀结束的静态页面. <阻止秒杀请求,比如有一个商品,已经有100人在秒杀,前100人至少有一个人来买 正在秒杀的信息可以放入缓存(可以用开源的memcached等)[ke

Java高并发秒杀API之web层

第1章 设计Restful接口 1.1前端交互流程设计 1.2 学习Restful接口设计 什么是Restful?它就是一种优雅的URI表述方式,用来设计我们资源的访问URL.通过这个URL的设计,我们就可以很自然的感知到这个URL代表的是哪种业务场景或者什么样的数据或资源.基于Restful设计的URL,对于我们接口的使用者.前端.web系统或者搜索引擎甚至是我们的用户,都是非常友好的. 第2章 SpringMVC整合spring 2.1 SpringMvc理论 蓝色部分是需要我们自己开发的

小程序倒计时

1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: <p> <block wx:if="{{total_micro_second<=0}}"> 剩余时间:已经截止 </block> <block wx:if="{{clock!='已经截止'}}"> 剩余时间:{{clock}} </block></p> 3..js文件代码: function countdo