博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 倒计时功能源码
阅读量:6873 次
发布时间:2019-06-26

本文共 1344 字,大约阅读时间需要 4 分钟。

<div class="time timers" rel="<?php echo date('m/d/Y', time()+24*3600)?>">
                           <span class="ico_time"></span>
                           <span class="data_title ">还剩
<span class="data_pink pinkft"><span class="hours">7</span>时<span class="mins">46</span>分<span class="">33</span>秒</span>
                                                </span>
 </span>
                         </div>
//以下是js代码
 $(document).ready(function(){
timing();
});
// 倒计时
function timing()
{
    $(".timers").each(function(){
        var endtime = new Date($(this).attr("rel")).getTime();
        var nowtime = new Date(); 
        var youtime = 0;
       
        youtime = endtime - nowtime;
 
        var seconds = youtime/1000;
        var minutes = Math.floor(seconds/60);
        var hours = Math.floor(minutes/60);
        var CHour= hours % 24;
        var CMinute= minutes % 60;
        var CSecond= Math.floor(seconds%60);//"%"
var MS=Math.floor(youtime) % 10;
        if(endtime<=nowtime){
            //$(this).html("已过期")//如果结束日期小于当前日期就提示过期啦
        }else{
            $(this).html("还剩<span class='pinkft data_pink'><span class='hours'>"+CHour+"</span>时<span class='mins'>"+CMinute+"</span>分<span class=''>"+CSecond+'.'+MS+"</span>秒</span>");      
            if(CHour < 10){
                $("#hours").text("0"+CHour);
            }else{
                $("#hours").text(CHour);
            }
 
            if(CMinute < 10){
                $("#minute").text("0"+CMinute);
            }else{
                $("#minute").text(CMinute);
            }
 
            if(CSecond < 10){
                $("#second").text(CSecond+'.'+MS);
            }else{
                $("#second").text(CSecond+'.'+MS);
            }
        }
    });
    setTimeout("timing()",100);
}

转载于:https://www.cnblogs.com/xiaojingjing/p/4218758.html

你可能感兴趣的文章
LNMMP架构的安装配置和功能的实现
查看>>
几个设置让你的邮箱不会爆满
查看>>
我的友情链接
查看>>
在linux6上安装RAC时多路径的权限设置
查看>>
[转载] 七龙珠第一部——第037话 忍者出现
查看>>
网络数据通信加密系统中加密解密流程
查看>>
PXE+KickStart无人值守安装RHEL
查看>>
十年,站酷已成设计论坛霸主,博客园却成无兵之将
查看>>
ansible安装
查看>>
使用bind搭建DNS服务器
查看>>
Windows server 2008R2 DHCP服务器
查看>>
计算机网络笔记--数据链路层(一)
查看>>
我的友情链接
查看>>
Java方法重载注意事项
查看>>
爱创课堂每日一题第五十九天- javascript继承的6种方法
查看>>
16.1 Tomcat介绍 16.2 安装jdk 16.3 安装Tomcat
查看>>
JS 正则表达式用法
查看>>
文档查看cat_more_less_head_tail
查看>>
python课堂笔记之django-day01(4)
查看>>
九月十九日作业
查看>>