`

jQuery 倒计时 设置几天、小时、分钟、秒等属性只需修改到期时间-20130724

DatesetFullYearsetHourssetSecondssetMilliseconds 
阅读更多
1、效果及功能说明

通过对时间的控制来告诉用户一个活动还剩多少时间，精确到秒

2、实现原理

首先定义活动的截至的时间，要重年份精确到毫秒，在获得当前的年份到秒钟，在用截至时间，减去现在的时间，剩下的还有多少的时间就把还剩下的时间给显示出来就得出了离截止日期还有多久。


主要的方法 

var startTime = new Date();
//获得当前的时间

startTime.setFullYear(2016, 5, 27);
//调用设置年份
startTime.setHours(23);
//调用设置指定的时间的小时字段
startTime.setMinutes(59);
//调用设置指定时间的分钟字段
startTime.setSeconds(59);
//调用设置指定时间的秒钟字段
startTime.setMilliseconds(999);
//调用置指定时间的毫秒字段
var EndTime=startTime.getTime();
//获得截至的时间

var nMS = EndTime - NowTime.getTime();
//截至时间减去当前时间获得剩余时间


var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));
//定义参数 获得天数
var nH = Math.floor(nMS/(1000*60*60)) % 24;
//定义参数 获得小时
var nM = Math.floor(nMS/(1000*60)) % 60;
//定义参数 获得分钟
var nS = Math.floor(nMS/1000) % 60;
//定义参数 获得秒钟 这些就是当前时间


3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现


5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果


7、代码[html5] 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180%;background:#fff;}
.timerbg{background:url(images/bg.png) no-repeat;height:60px;width:980px;margin:20px auto;}
.timerbg div{float:right;font-size:16px;margin:24px 0 0 0;font-weight:800;text-align:left;width:335px;font-family:"微软雅黑","宋体";}
.timerbg div strong{font-size:28px;margin:0 13px;color:#D6000F;font-family:Arial;}
#daoend{margin:24px 0 0 0;width:324px;color:#D6000F;font-size:22px;}
</style>
</head>

<body>

	<div class="timerbg">
		<div id="daoend" style="display:none;">本次活动已结束。</div>
		<div id="dao"><strong id="RemainD"></strong>天<strong id="RemainH"></strong>时<strong id="RemainM"></strong>分<strong id="RemainS"></strong>秒</div>
	</div>
	
	<script type="text/javascript">
	var startTime = new Date();
	//定义参数可返回当天的日期和时间
	startTime.setFullYear(2016, 5, 27);
	//调用设置年份
	startTime.setHours(23);
	//调用设置指定的时间的小时字段
	startTime.setMinutes(59);
	//调用设置指定时间的分钟字段
	startTime.setSeconds(59);
	//调用设置指定时间的秒钟字段
	startTime.setMilliseconds(999);
	//调用置指定时间的毫秒字段
	var EndTime=startTime.getTime();
	//定义参数可返回距 1970 年 1 月 1 日之间的毫秒数
	function GetRTime(){
	//定义方法
		var NowTime = new Date();
		//定义参数可返回当天的日期和时间
		var nMS = EndTime - NowTime.getTime();
		//定义参数 EndTime减去NowTime参数获得返回距 1970 年 1 月 1 日之间的毫秒数
		var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));
		//定义参数 获得天数
		var nH = Math.floor(nMS/(1000*60*60)) % 24;
		//定义参数 获得小时
		var nM = Math.floor(nMS/(1000*60)) % 60;
		//定义参数 获得分钟
		var nS = Math.floor(nMS/1000) % 60;
		//定义参数 获得秒钟
		if (nMS < 0){
		//如果秒钟大于0
			$("#dao").hide();
			//获得天数隐藏
			$("#daoend").show();
			//获得活动截止时间展开
		}else{
		//否则
		   $("#dao").show();
		   //天数展开
		   $("#daoend").hide();
		   //活动截止时间隐藏
		   $("#RemainD").text(nD);
		   //显示天数
		   $("#RemainH").text(nH);
		   //显示小时
		   $("#RemainM").text(nM);
		   //显示分钟
		   $("#RemainS").text(nS); 
		   //显示秒钟
		}
	}
	
	$(document).ready(function () {
	//定义方法
		var timer_rt = window.setInterval("GetRTime()", 1000);
		//定义参数 显示出GetRTime()方法 1000毫秒以后启动
	});
	</script>
	
</body>
</html>
  • 大小: 25 KB
分享到：
| jQuery 分类搜索框带过滤器的搜索框-20130 ...
评论
2 楼 萧远山 2013-07-25  
都必须是自己写出来的，如果一天写不完也没关系 ，都把结果放上来，看看进度
1 楼 萧远山 2013-07-25  
两个题目：
1、象原来你做过的GOOGLE日历一样的控件，现在做做看
2、富本文编辑框
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 倒计时 设置几天、小时、分钟、秒等属性只需修改到期时间

    本文将详细讲解如何利用jQuery实现一个倒计时功能，并着重阐述如何设置几天、小时、分钟和秒等属性，以及如何在倒计时结束后显示特定提示。 首先，我们需要理解倒计时的基本原理。倒计时是通过计算当前时间与设定...

    很好用的jq倒计时插件

    format: 'DHMS', // 显示格式：天、小时、分钟、秒 onExpiry: function() { alert('倒计时结束！'); } // 到期后的回调函数 }); ``` 4. **自定义样式**：使用CSS调整倒计时显示的样式，以适应网站的整体设计。 ...

    Qt 采用http通信json解析读取天气

    Qt 采用http通信json解析读取天气

    岗位晋升360度调查表.doc

    岗位晋升360度调查表.doc

    合法辞退员工的N种方式.pptx

    合法辞退员工的N种方式.pptx

    大模型、Agent、具身智能及人形机器人学习全路径规划.pdf

    大模型、Agent、具身智能及人形机器人学习全路径规划.pdf

    华润万家员工手册.doc

    华润万家员工手册.doc

    招聘需求分析.xls

    招聘需求分析.xls

    光伏+蓄电池系统中双有源桥DC-DC变换器的Matlab仿真与MPPT及闭环控制实现

    内容概要：本文详细介绍了基于‘光伏（PV）+蓄电池+负载’架构的双有源桥DC-DC变换器仿真方法及其在Matlab 2021b中的具体实现。首先解析了光伏系统的MPPT控制，通过扰动观察法使光伏板始终处于最大功率点。接着讨论了蓄电池的恒流充放电控制，利用PI控制器确保电池的安全和高效运作。然后阐述了双有源桥DC-DC变换器的闭环控制机制，借助PID控制器维持系统输出电压的稳定性。最后，文章展示了如何在Matlab Simulink环境下构建完整的仿真模型，涵盖各模块间的电气连接与信号交互，为新能源系统的优化提供了理论和技术支持。 适合人群：从事电力电子、新能源系统设计的研究人员和工程师，尤其是那些需要深入了解光伏储能系统工作原理的人群。 使用场景及目标：适用于希望掌握光伏储能系统中关键组件如MPPT、恒流充放电控制及双有源桥DC-DC变换器的设计与仿真的技术人员。目标是在实际工程项目中提高系统的效率和可靠性。 其他说明：文中提供的代码片段和建模思路有助于读者更好地理解和实践相关技术，同时也强调了一些常见的陷阱和调试技巧，帮助避免潜在的问题。

    数学建模_Matlab_SPSS_教程分享_学习用途_1742838826.zip

    线性代数

    电机调速技术解析：直流电机双闭环与多种电机滞环调速方法对比

    内容概要：本文详细介绍了不同类型电机的调速方法，重点探讨了直流电机双闭环调速、永磁同步电机电流滞环闭环调速以及异步电机滞环电流调速。文中不仅提供了每种调速方法的基本原理和技术特点，还附带了相应的代码示例进行辅助解释。此外，文章对永磁同步电机的电流滞环调速与SVPWM调速进行了对比，指出了各自的优劣之处。最后，强调了在实际应用中选择合适调速方案的重要性。 适合人群：从事电机控制系统设计与开发的技术人员，尤其是有一定电机控制基础的研发人员。 使用场景及目标：适用于需要深入了解电机调速机制及其应用场景的专业人士。目标是帮助读者掌握不同电机调速方法的特点，以便在实际工程中做出最优选择。 其他说明：文章通过具体的代码实例展示了调速方法的实际应用，使读者能够更好地理解和实践相关技术。同时提醒读者在实际调试过程中要注意参数设置和硬件条件的影响。

    人员晋升推荐表.xls

    人员晋升推荐表.xls

    员工生日关怀方案.doc

    员工生日关怀方案

    模拟IC设计：解析国际知名大厂的SAR、Sigma-Delta和Pipeline ADC逆向工程

    内容概要：本文详细介绍了对国际知名大厂的三个逆向ADC电路（SAR ADC、Sigma-Delta ADC和Pipeline ADC）进行深入剖析。作者通过Cadence Virtuoso平台研究了这些电路的标准单元库设计，探讨了各个电路的关键技术和实现细节。对于24bit Sigma-Delta ADC，重点讨论了其调制器部分的时钟相位分配和噪声整形技术；对于16bit SAR ADC，则关注其比较器阵列的独特设计以及动态锁存比较器的应用；而对于14bit Pipeline ADC，着重分析了其级间放大器设计和电荷共享技术。此外，文中还提到了在将这些设计适配到自家工艺过程中遇到的问题及其解决方案，如电容寄生效应、时序约束调整、运放结构优化等。 适合人群：从事模拟集成电路设计的专业人士，尤其是对ADC设计感兴趣的工程师和技术研究人员。 使用场景及目标：帮助读者深入了解高精度ADC的工作原理和设计技巧，掌握逆向工程技术在实际项目中的应用，提高对不同工艺节点下ADC设计的理解和适应能力。 其他说明：文中提供了大量具体的代码片段和仿真命令，便于读者理解和实践。同时，作者分享了许多宝贵的经验教训，强调了在逆向工程中需要注意的技术细节和潜在风险。

    大型立体仓库智能物流系统的PLC控制与优化设计

    内容概要：本文详细介绍了大型立体仓库智能物流系统的构建与优化。该项目涉及一万多个库位、一百多台输送机和八台堆垛机，采用了西门子PLC作为控制核心，通过无线网桥与WCS和WMS系统对接。文章重点讲解了梯形图编程和功能块的应用，如输送机启停控制、堆垛机移动控制、路径规划、无线通讯处理以及异常处理机制。此外，还探讨了设备协同、逻辑优化、任务分配算法和速度曲线规划等方面的技术细节。 适合人群：从事工业自动化、智能仓储系统设计与开发的工程师和技术爱好者。 使用场景及目标：适用于智能仓储系统的设计、实施和维护，旨在提高系统的稳定性、效率和可维护性。 其他说明：文中提供了大量实际项目中的代码示例和调试经验，有助于读者理解和应用相关技术。

    新员工月工作总结表.xlsx

    新员工月工作总结表.xlsx

    西门子PLC汽车电子零件装配线SCL语言模块化编程与集成解决方案

    内容概要：本文详细介绍了基于西门子S7-1500 PLC的汽车电子零件装配线集成解决方案。主要内容涵盖伺服轴控制、阿特拉斯拧紧枪控制、康耐视视觉检测系统以及HMI界面的设计与实现。文中展示了如何利用SCL语言将多种工业设备（如HMI、伺服电机、六轴机器人等）的功能封装为标准化功能块，从而提高系统的模块化程度和可复用性。同时，还分享了一些实际项目中的调试经验和优化技巧，如通过调整加减速曲线避免机械振动、设置扭矩保持时间和视觉检测的防抖定时器等。 适合人群：从事自动化控制领域的工程师和技术人员，尤其是熟悉PLC编程和工业自动化设备集成的专业人士。 使用场景及目标：适用于汽车制造行业的生产线控制系统设计与实施。主要目标是帮助工程师快速掌握如何使用SCL语言构建高效稳定的PLC控制系统，提升生产效率和产品质量。 其他说明：文中不仅提供了详细的代码示例，还结合具体的应用场景进行了深入剖析，有助于读者更好地理解和应用相关技术。此外，强调了模块化编程的优势，如减少重复劳动、便于维护升级等。

    嵌入式系统中基于STM32/AT32/GD32的串口IAP Bootloader实现与远程升级方案

    内容概要：本文详细介绍了如何在STM32、AT32和GD32等Cortex-M系列MCU上实现串口IAP（In Application Programming）Bootloader，支持远程升级及RS485升级。主要内容涵盖Bootloader的工作原理、内存分配、通信协议设计、Flash写入操作以及跳转应用程序的关键步骤。文中提供了具体的代码示例，如Bootloader主循环、RS485收发控制、Flash写入、CRC校验等，并分享了多个实战经验和注意事项，确保数据传输的可靠性。 适合人群：从事嵌入式系统开发的技术人员，尤其是对STM32、AT32、GD32等国产MCU有一定了解并希望掌握串口IAP技术的研发人员。 使用场景及目标：适用于需要远程升级固件的嵌入式项目，帮助开发者避免现场升级带来的不便，提高设备维护效率。目标是让读者能够独立实现一个可靠的串口IAP Bootloader，掌握RS485通信和Flash编程的关键技术。 其他说明：文中提到的代码和配置已在GitHub上提供，方便读者下载和实践。同时，作者分享了许多实战经验和常见问题解决方案，有助于减少开发过程中可能出现的问题。

    线性代数_矩阵运算_方程组解释_MIT公开课笔记用途_1742822302.zip

    线性代数

Magicbox
Global site tag (gtag.js) - Google Analytics