destoon开发笔记-JQ+JS实现倒计时功能

页面代码

<div class="time "  class=""  id="onBidtime125" pid="125">
    <div class="timeicon" ></div>
        距离结束:<span class="day">-</span> 天 <span class="hour">-</span> 小时 <span class="minute">-</span> 分 <span class="second">-</span> 秒
        <script type="text/javascript">
            $(function(){
                endDown2("1472287680","1470660651","#onBidtime125","#onBidtime125 .day","#onBidtime125 .hour","#onBidtime125 .minute","#onBidtime125 .second");
            });
        </script>
</div>

  JS代码

/ 结束倒计时
//etime 结束时间
//ntime  服务器时间
function endDown2(etime,ntime,boxobj,day_elem,hour_elem,minute_elem,second_elem)
    var now_time = new Date(ntime*1000);
    var end_time = new Date(etime*1000);
    var sys_second = (end_time-now_time)/1000;
    var timer = setInterval(function(){
        if (sys_second > 0) {
            sys_second -= 1;
            var day = Math.floor((sys_second / 3600) / 24);
            var hour = Math.floor((sys_second / 3600) % 24);
            var minute = Math.floor((sys_second / 60) % 60);
            var second = Math.floor(sys_second % 60);
            day_elem && $(day_elem).text(day);//计算天
            $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
            $(minute_elem).text(minute<10?"0"+minute:minute);//计算分
            $(second_elem).text(second<10?"0"+second:second);// 计算秒
        } else {
            clearInterval(timer);
            $(‘#bidTimeStatus‘).remove();
            $(boxobj).html(‘‘);
            $(boxobj).addClass(‘end‘);
        }
    }, 1000);
}
// 开始倒计时
function startDown2(etime,ntime,boxobj,day_elem,hour_elem,minute_elem,second_elem){
    var now_time = new Date(ntime*1000);
    var end_time = new Date(etime*1000);
    var sys_second = (end_time-now_time)/1000;
    var timer = setInterval(function(){
        if (sys_second > 0) {
            sys_second -= 1;
            var day = Math.floor((sys_second / 3600) / 24);
            var hour = Math.floor((sys_second / 3600) % 24);
            var minute = Math.floor((sys_second / 60) % 60);
            var second = Math.floor(sys_second % 60);
            day_elem && $(day_elem).text(day);//计算天
            $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
            $(minute_elem).text(minute<10?"0"+minute:minute);//计算分
            $(second_elem).text(second<10?"0"+second:second);// 计算秒
        } else {
            $(‘.noStartBidTbox .th‘).html(‘拍卖已开始‘);
            $(boxobj).html(‘‘);
            $(boxobj).addClass(‘into‘);
        }
    }, 1000);
}

  需要时时与服务器同步时间JS代码

function endDown(etime,ntime,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem){
    var now_time = new Date(ntime*1000);
    var end_time = new Date(etime*1000);
    var native_time = new Date().getTime(); //本地时间
    var now_cha = now_time - native_time; //服务器和本地时间差
    var native_end_time = end_time - now_cha; //本地结束时间
    var sys_second = 0;
    var bidpids = $(boxobj).attr(‘pid‘);
    if(bidpids){
        var bidpid = bidpids;
    }
    endDowntimer = setInterval(function(){
        // 检查本地时间是否更改
        if(Math.abs(native_time - new Date().getTime())>1000){
            clearInterval(endDowntimer);
            $.post(ajaxGetTime, {‘pid‘:bidpid},function(data){
                endDown(data.endtime,data.nowtime,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem);
            });
        }
        sys_second = (native_end_time - new Date().getTime())/100; //本地结束剩余时间
        if (sys_second > 0) {
            sys_second -= 1;
            var day = Math.floor((sys_second / 36000) / 24);
            var hour = Math.floor((sys_second / 36000) % 24);
            var minute = Math.floor((sys_second / 600) % 60);
            var second = Math.floor((sys_second/10) % 60);
            var msec = Math.floor(sys_second % 10); //毫秒
            day_elem && $(day_elem).text(day);//计算天
            $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
            $(minute_elem).text(minute<10?"0"+minute:minute);//计算分
            $(second_elem).text(second<10?"0"+second:second);// 计算秒
            $(msec_elem).text(msec);// 计算秒的1/10
            native_time = new Date().getTime();
        } else {
            clearInterval(endDowntimer);
            // 本地时间结束提交服务器验证是否结束
            $.post(ajaxCheckSucc, {‘pid‘:bidpid},function(data){
                if(data.status==0){
                    // startDown(data.end_time,data.now_time,".noStartTime",".noStartTime .day",".noStartTime .hour",".noStartTime .minute",".noStartTime .second",".noStartTime .msec");
                    endDown(data.end_time,data.now_time,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem);
                }else{
                    if(data.status==1){
                        $(‘#bidTimeStatus‘).remove();
                        $(boxobj).html(‘‘);
                        $(boxobj).addClass(‘end‘);
                        var user = data.nickname;
                        if(data.uid==userid){user =‘您‘;}
                        var msg = ‘恭喜‘+user+‘以‘+data.money+‘元,拍到《‘+data.pname+‘》‘;
                    }else if (data.status==2){
                        var msg = ‘《‘+data.pname+‘》未达到保留价,流拍!‘
                    }
                    popup.success(msg,‘结束提示‘,function(action){
                //success 返回两个 action 值,分别是 ‘ok‘ 和 ‘close‘。
                        if(action == ‘ok‘){
                            window.top.location.reload();
                        }
                        if(action == ‘close‘){
                            window.top.location.reload();
                        }
                    });
                }
            });
        }
    }, 100);
}
// 开始时间倒计时
function startDown(etime,ntime,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem){
    var now_time = new Date(ntime*1000);
    var end_time = new Date(etime*1000);
    var native_time = new Date().getTime(); //本地时间
    var now_cha = now_time - native_time; //服务器和本地时间差
    var native_end_time = end_time - now_cha; //本地结束时间
    var sys_second = 0;
    var bidpids = $(boxobj).attr(‘pid‘);
    if(bidpids){
        var bidpid = bidpids;
    }
    startDowntimer = setInterval(function(){
        if(Math.abs(native_time - new Date().getTime())>1000){
            clearInterval(startDowntimer);
            $.post(ajaxGetTime, {‘pid‘:bidpid},function(data){
                startDown(data.endtime,data.nowtime,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem);
            });
        }
        sys_second = (native_end_time - new Date().getTime())/100; //本地结束剩余时间
        if (sys_second > 0) {
            sys_second -= 1;
            var day = Math.floor((sys_second / 36000) / 24);
            var hour = Math.floor((sys_second / 36000) % 24);
            var minute = Math.floor((sys_second / 600) % 60);
            var second = Math.floor((sys_second/10) % 60);
            var msec = Math.floor(sys_second % 10); //毫秒
            day_elem && $(day_elem).text(day);//计算天
            $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
            $(minute_elem).text(minute<10?"0"+minute:minute);//计算分
            $(second_elem).text(second<10?"0"+second:second);// 计算秒
            $(msec_elem).text(msec);// 计算秒的1/10
            native_time = new Date().getTime();
        } else {
            $(‘.noStartBidTbox .th‘).html(‘拍卖已开始‘);
            $(boxobj).html(‘‘);
            $(boxobj).addClass(‘into‘);
            window.top.location.reload();
        }
    }, 100);
}

  

原文地址:https://www.cnblogs.com/68xi/p/8546763.html

时间: 2024-11-10 14:44:08

destoon开发笔记-JQ+JS实现倒计时功能的相关文章

JS实现倒计时功能

上午主要编写了倒计时的功能,用了两种算法,一种是最终秒数.分钟数.小时数减去当前的秒.分钟和小时,当然要重点注意的就是借位的问题.另一种算法就是将最终时间转换成秒数,当前时间转换成秒数,相减之后再换算成小时.分钟和秒,再分别显示出来. 下面是我编写的代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title

模块:js实现一个倒计时功能

1.给显示内容加样式 <style> #p1{font-size: large; color: red;} </style> 2.客户端页面 <div id="p1">100</div> <button onclick="px()">倒计时开始</button> <button onclick="px1()">暂停</button> 3.js处理 &l

js实现是倒计时功能

工作中经常用到倒计时的功能,最近在整理之前做的项目的时候,发现自己写过一个倒计时的功能的效果,这里和大家分享下!实现这个功能是用原生js写的,不需要加载额外的库文件!功能比较简单,但是可以在此基础上扩展程序,得到想要的效果! 这里附上效果图先: 效果比较简单,只是简单的加了下样式! 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>倒计时功能&l

js倒计时功能

<input id="countdown" type="text" value="140时50分20秒"> <script> var oCountdown = document.getElementById("countdown"), nowStamps = Date.now() - 100, // 服务器当前时间 endStamps = Date.now() + 50000 - 100, // 活动结

JS实现为控件添加倒计时功能

一.概述 在有些报表需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个报表在每天10点后才能查询 当倒计时结束的时候,查询功能可用 这种功能如何实现的呢 二.实现思路 主要原理是利用控件的setEnable(true)/setEnable(false)来进行设置控件的可用与不可用状态,在获取时间的过程中,需要利用到js中的获取时间,利用JS的定时器函数setInter

Android开发:验证码倒计时功能实现

前言 现在好多个APP里面都有验证码倒计时按钮,实现方式大概有下面几种: 1.使用线程和Handler的方式,定时刷新倒计时数字,这种方式容易导致内存泄露,所以一般都使用弱引用,控制数字的刷新. 2.自定义倒计时按钮 3.使用Android提供的CountDownTimer结合TextView实现倒计时功能 这篇主要就是说下用第三种方式实现,简单好用 效果图 实现 以下是核心代码: /** * Created by hfs on 2017/5/9. */ public class TimeCou

原创:微信小程序+WEB使用JS实现注册【60s】倒计时功能

1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubmit="bindMobile"> <view class="form_group"> <text>手 机:</text> <input type="number" placeholder="请

李兴华JavaWeb开发笔记

李兴华JavaWeb开发笔记 1.Java语法-基础 环境变量-JAVA_HOME, PATH, ClassPath 变量名 作用 举例 JAVA_HOME 指向JDK目录 C:\Program Files\Java\jdk1.7.0_21 PATH 指向java.exe目录. %JAVA_HOME%\bin; %JAVA_HOME%\jre\bin CLASSPATH 执行.jar文件.zip文件..class文件所在目录. (程序要用到哪些.class文件,) %JAVA_HOME%\lib

[开发笔记]-未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService...匹配的导出【转载自:酷小孩】

原文地址:http://www.cnblogs.com/babycool/p/3199158.html 今天打算用VisualStudio2012做一个js效果页面测试的时候,打开VS2012新建项目,但是并没有像之前那样顺利的创建页面,而是弹出了一个错误窗口. 我的系统是win8专业版 64位 ,同时安装了VS2010和VS2012.然后我又试了一下VS2010,新建项目.新建网站等等,一切正常. 额,看来这个问题就是只和VS2012有关系了. 百度一番之后,找到了两篇文章: vs2012建立