相思资源网 Design By www.200059.com

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、代码

复制代码 代码如下:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.9.1.js"> <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>

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

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

标签:
JQuery,小米手机,抢购页面,倒计时

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“JQuery仿小米手机抢购页面倒计时效果”

暂无JQuery仿小米手机抢购页面倒计时效果的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。