• 倒计时功能


    倒计时方法一:以s为单位

    1、html

     <div class="remainingtime time-item">
            <span id="day_show"></span>
            <span id="hour_show"></span>
            <span id="minute_show"></span>
            <span id="second_show"></span>
            <input id="e_time" type="hidden" value="120">
        </div>

    js

    <script type="text/javascript">
        //活动倒计时
        var intDiff = $('#e_time').val();
        intDiff = parseInt(intDiff);//倒计时总秒数量
        function timer(intDiff){
            window.setInterval(function(){
                var day=0,
                    hour=0,
                    minute=0,
                    second=0;//时间默认值
                if(intDiff > 0){
                    day = Math.floor(intDiff / (60 * 60 * 24));
                    hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                    minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                    second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                }
                if (day <= 9) {day = '0' + day;}
                if (hour <= 9) {hour = '0' + hour;}
                if (minute <= 9) {minute = '0' + minute;}
                if (second <= 9) {second = '0' + second;}
                $('#day_show').html(day+"");
                $('#hour_show').html(hour+'');
                $('#minute_show').html(minute+'');
                $('#second_show').html(second);
                intDiff--;
            }, 1000);
        }
        $(function(){
            timer(intDiff);
        });
    </script>

    扩展:多个倒计时

    html

    <div class="group-des-time" data-time="{$vo.time}">剩余9:00:10</div>
    <div class="group-des-time" data-time="{$vo.time}">剩余9:00:10</div>

    js

    $(".group-des-time").each(function(){
            var intDiff = parseInt($(this).attr("data-time"));//倒计时总秒数量
            var $_this = $(this);
            
            timer(intDiff, $_this);
           })
        function timer(intDiff, $_this){
            window.setInterval(function(){
            var day=0,
                hour=0,
                minute=0,
                second=0;//时间默认值        
            if(intDiff > 0){
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $_this.html("剩余"+hour+":"+minute+":"+second);
            intDiff--;
            }, 1000);
        } 

    倒计时方法二:以ms为单位

    html

    <div class="js-time"></div>

    js

        // 抢购倒计时
        function countTime() {  
            //获取开始时间  
    //      var date = new Date();  
    ////      var now = date.getTime();  
    //      var nowDate = new Date(nowTime);  
    //      var now = nowDate.getTime(); 
    //      //设置截止时间  
    //      var endDate = new Date(endTime);  
    //      var end = endDate.getTime();  
    //      //时间差  
    //      var leftTime = end-now;  
            if (leftTime>=0) {  
                var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
                var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
                var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数   
                hours = checkTime(hours);
                minutes = checkTime(minutes);
                seconds = checkTime(seconds);
                leftTime=leftTime-1000;
            }else{
                console.log("111")
                $(".item-pop").addClass("fn-hide");
                window.clearInterval(ordertimer);
                ordertimer = null;
                
            }
            //将倒计时赋值到div中  
            var time = hours + ":" + minutes + ":" + seconds;
            $(".js-time").html(time);
      
        }
        function checkTime(i) { //将0-9的数字前面加上0,例1变为01
            if (i < 10) {
                i = "0" + i;
                }
                return i;
        }
  • 相关阅读:
    Scala中隐式转换(implicit conversion)的优先顺序
    protege4.0使用中的理论
    国外程序员整理的 C++ 资源大全
    什么是本体论?
    深入分析C++引用
    在基于对话框的MFC程序中,使程序在任务栏中不显示图标
    PhoneGap搭建运行环境(3.2版本)
    [JS代码]如何判断ipad或者iphone是否为横屏或者竖屏
    windwos iis 7.5 使用html 报405错误
    NodeJs 开源
  • 原文地址:https://www.cnblogs.com/qdlhj/p/10095323.html
Copyright © 2020-2023  润新知