`

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实现一个倒计时功能，并着重阐述如何设置几天、小时、分钟和秒等属性，以及如何在倒计时结束后显示特定提示。 首先，我们需要理解倒计时的基本原理。倒计时是通过计算当前时间与设定...

    JQuery倒计时插件

    1. `index.css`：这是样式表文件，包含插件所需的CSS样式，用于设置倒计时显示的样式，如字体、颜色、布局等。 2. `index.html`：HTML文件是网页的结构，包含了倒计时插件的HTML结构和元素，如计时器的容器div。 3. ...

    jquery实现倒计时，支持多行分别无限循环倒计时

    - 通过将毫秒数转换为天、小时、分钟和秒，我们可以构建出倒计时的显示格式。 3. **jQuery实现**： - 使用jQuery选择器选取需要展示倒计时的元素，如`$("#countdown")`。 - 创建一个`setInterval`函数，每秒更新...

    jQuery翻牌倒计时效果demo

    这个效果通常用于网站或应用中，以创建吸引用户注意力的倒计时计时器，比如促销活动的截止时间显示或者赛事倒计时等。我们将讨论jQuery库的基础知识，以及如何结合JavaScript和ECMAScript语法来构建这样的功能。 ...

    jquery商城促销活动倒计时设置天,小时,分钟,秒且显示到期提示演示页面

    在这个场景中，我们将深入探讨如何使用`jQuery`来实现一个商城促销活动的倒计时功能，显示剩余的天数、小时数、分钟数和秒数，并在倒计时结束后显示到期提示。 首先，我们需要创建一个HTML页面作为演示的基础结构。...

    JQuery 倒计时插件

    4. **多种显示模式**：根据需求，倒计时可以以天、小时、分钟和秒为单位显示，或者只显示部分单位。 5. **动态更新**：如果目标时间发生变化，插件应该能够动态地调整倒计时显示。 在压缩包中的文件"jishi"可能是...

    jquery倒计时插件

    jQuery倒计时插件是一种基于JavaScript库jQuery的实用工具，用于在网页上实现动态的、实时更新的时间显示功能。这种插件通常用于事件预告、限时促销、考试倒计时等场景，为用户提供一种直观的方式了解特定时间点的...

    基于jQuery的倒计时插件

    - **格式化显示**：可以增加选项来控制显示格式，比如天、小时、分钟和秒。 - **回调函数**：允许用户在倒计时结束时提供自定义的回调函数。 - **暂停/恢复**：添加方法让开发者能够暂停或恢复倒计时。 - **实时更新...

    jquery倒计时插件多个倒计时同时计时代码

    3. **格式化时间**：将剩余时间转换成用户友好的格式，如“天、小时、分钟、秒”。 下面是一个简单的jQuery倒计时插件实现示例： ```javascript (function($) { $.fn.countdown = function(endTime) { return ...

    简单的jquery倒计时插件.rar

    3. **格式化显示**：倒计时通常会以天、小时、分钟和秒的形式展示。插件需要处理这些数值的转换和格式化，确保结果显示正确。 4. **事件处理**：当倒计时结束时，插件可能需要触发某些事件或执行特定的回调函数。 ...

    三种颜色的jquery倒计时插件.zip

    1. **时间计算**：使用`Date`对象获取当前时间，然后与目标时间进行对比，计算差值，转换为天、小时、分钟和秒。 2. **定时器**：使用`setInterval`函数定期更新倒计时，确保时间准确无误地减少。 3. **DOM操作**...

    jquery 自动倒计时

    在网页开发中，jQuery 是一个...这个功能在各种场景下都很实用，例如在线考试的剩余时间提示、活动开始前的倒计时等。在实际项目中，你还可以根据需求扩展此功能，例如增加自定义格式化选项，以适应不同的显示需求。

    倒计时插件-jquery.zip

    例如，用户可以通过设置`format`选项来决定时间显示的格式，如"天:小时:分钟:秒"或"HH:mm:ss"。 此外，为了提高用户体验，插件可能还包括了一些优化措施，如防止在倒计时结束后继续执行定时器，或者在页面刷新后...

    95、精确到毫秒jQuery倒计时代码

    4. **格式化时间**：将剩余时间转换为天、小时、分钟和秒的格式，甚至可以精确到毫秒。需要考虑时间的进位，比如当秒数满60时，要增加分钟数。 5. **更新DOM**：将格式化后的时间显示在网页上，这通常涉及到jQuery的...

    jQuery创意精美的网页倒计时代码

    本项目就是基于jQuery实现的一个时分秒倒计时计时器，用户可以自定义倒计时时间，增加了互动性和用户体验。 首先，我们需要了解HTML基础结构。在`index.html`文件中，会包含一个用于显示倒计时的容器，例如一个`div...

    jquery 倒计时效果可计算天、小时、分钟和秒杀.zip

    本资源“jquery 倒计时效果可计算天、小时、分钟和秒杀.zip”显然是一个使用jQuery实现的倒计时功能，特别适用于秒杀活动或者限时促销场景。倒计时功能在电商、营销活动中极为常见，它能够吸引用户注意力并增加紧迫...

    jquery显示当前时间(年-月-日 小时:分钟:秒 星期几)

    本主题聚焦于如何使用jQuery来显示实时更新的当前时间，格式为"年-月-日 小时:分钟:秒 星期几"。下面我们将详细探讨实现这一功能的步骤和相关知识点。 首先，我们需要引入jQuery库。如果你的项目中尚未包含jQuery，...

    jquery时间倒计时特效

    **jQuery时间倒计时特效**是一种常见的网页交互功能，它能为用户提供实时更新的剩余时间显示，常用于活动倒计时、考试倒计时或任何需要时间敏感信息的场景。在网页开发中，jQuery库因其简洁的API和强大的功能而备受...

    jquery时间倒计时

    jquery时间倒计时插件led样式，可分别显示当前时间，新年倒计时，圣诞倒计时，随机数字，随机字母等的LED样式效果；颜色，字体等样式均可自由调整设置。http://www.datouwang.com/jiaoben/1221.html

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