视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JQuery仿小米手机抢购页面倒计时效果_jquery
2020-11-27 21:30:17 责编:小采
文档


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、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google
Chrome游览器下都可实现

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

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

6、代码

代码如下:



http://code.jquery.com/jquery-1.9.1.js">




本次活动已结束。
天时分秒


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毫秒以后启动
});



7、倒计时完成后,设置按钮的hidden属性为false,简单吧~

本代码是从本人项目中截取出来的,小伙伴们可以放心使用,如有疑问,请留言。

下载本文
显示全文
专题