zoukankan      html  css  js  c++  java
  • 电商限时购:精确到毫秒的倒计时!

    现如今做电商网站必不可少的一个效果就是限时抢购,这也是各大电商网站的一种促销手段。下面的图片就是聚划算上面的限时抢的效果

    一、实现限时抢的效果需要用到的知识 :Javascript Date()对象

    • Date()返回当前的日期和事件
    • getYear()返回年份 获得年最好用
    • getFullYear()方法来操作(完整格式如2016)
    • getMonth()返回月份值(从0开始,+1)
    • getDay()返回星期几(0-6)
    • getHours()返回小时数(0-23)
    • getMinutes()返回分钟数(0-59)
    • getSeconds()返回秒数
    • getTime()返回毫秒数

    当然,上面的调用方法我们不一定全部用到,也要看你自己的需求,废话不多说,我们直接上代码:

      1、HTML页面代码:

    <p class="left-time"></p>
    

    我们把倒计时的内容放在class为left-time的<p>标签内.

      2、JS脚本:

    $(function(){ 
        function leftTime(){
            var endTime = new Date("2016/5/20,12:00:00");//结束时间
            var curTime = new Date();//当前时间
            var leftTime = parseInt((endTime.getTime() - curTime.getTime())/1000);//获得时间差
            //小时、分、秒需要取模运算
            var d = parseInt(leftTime/(60*60*24));
            var h = parseInt(leftTime/(60*60)%24);
            var m = parseInt(leftTime/60%60);
            var s = parseInt(leftTime%60);
            var ms = parseInt(((endTime.getTime() - curTime.getTime())/100)%10);
            var txt = "剩余:"+d+"天"+h+"小时"+m+"分钟"+s+"."+ms+"秒";
            $(".left-time").text(txt);
            if(leftTime<=0){ $(".left-time").text("团购结束");}
        };
        leftTime();
        var set = setInterval(leftTime,100);
    });
    

    上面的js就实现了一个简单的限时抢的小例子,其中parseInt()方法是取整,getTime()把时间转化为毫秒,除了parseInt()方法之外,还可以用Math.floor()向下取整的方法代替.

    最后记得不要忘记了给个if()判断时间结束的时候需要显示的内容哦,不然就会出现不必要的小bug哟!O(∩_∩)O~

  • 相关阅读:
    wampserver服务器离线,无法访问此网站 找不到 项目 的服务器 DNS 地址。
    node.js(一)介绍与安装
    js全局函數
    类和对象的定义
    iframe框架学习
    while和do-while的区别
    html5视频音频
    列表
    html表格的学习
    云课堂数组1
  • 原文地址:https://www.cnblogs.com/EnderH/p/5347942.html
Copyright © 2011-2022 走看看