文档章节

jQuery毫秒倒计时

史文帝
 史文帝
发布于 2016/11/28 21:30
字数 219
阅读 60
收藏 0

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="author" content="https://my.oschina.net/u/3010603/blog" />
        <title>jQuery毫秒倒计时</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                var times = 60 * 100; // 60秒  6000毫秒
                countTime = setInterval(function() { //
                    times = --times < 0 ? 0 : times;

                    var ms = Math.floor(times / 100).toString(); //把times除以100取整数,转换为字符字符串

                    if(ms.length <= 1) {
                        ms = "0" + ms;
                    }
                    var hm = Math.floor(times % 100).toString(); //把time的百分比取小数点后面的两位数转换为字符字符串
                    if(hm.length <= 1) {
                        hm = "0" + hm;
                    }
                    if(times == 0) {
                        $("#_txt").html("倒计时结束");
                        clearInterval(countTime);
                    }
                    // 获取分钟、毫秒数
                    $(".a").html(ms);
                    $(".b").html(hm);
                }, 10);
            });
        </script>
        <style>
            .warp {
                width: 100%;
                height: 100px;
                line-height: 100px;
                text-align: center;
                font-size: 40px;

            }
            
            .warp strong {
                width: 100px;
                display: inline-block;
                text-align: center;
                font-family: georgia;
                color: #C9302C;
            }
        </style>
    </head>

    <body>
        <div class="warp">
            <strong class="a">60</strong>秒 <strong class="b"></strong>毫秒
        </div>

        <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

            <div id="_txt"></div>
        </div>
    </body>

</html>

效果:

© 著作权归作者所有

共有 人打赏支持
史文帝
粉丝 1
博文 24
码字总数 8566
作品 0
孝感
程序员
私信 提问
6款不容错过的超棒倒计时jQuery插件

日期:2012-11-12 来源:GBin1.com 如果你曾经开发过类似限时抢购的网站或者应用的话,或者你需要在发布一款超棒游戏之前添加一些神秘元素的话,一个超棒或者超酷的倒计时页面绝对是非 常有必...

gbin1
2012/11/13
1
0
20 款绝佳的 jQuery 倒计时脚本和插件

Circular Countdown jQuery Plugin - MORE INFO / DEMO Coconut – Jquery Countdown Plugin - MORE INFO / DEMO 包含四种不同尺寸的圆。 Dynamic Countdown with Counter – MORE INFO / DE......

oschina
2013/08/29
18K
7
14 个使用 jQuery 开发的模拟、数字时钟

1. CoolClock in jQuery CoolClock 是一个可定制的 jQuery 模拟时钟,使用 SVG 绘制,提供多种外观选择,同时支持数字时钟。 Read More Demo 2.Analog JQuery clock 在该教程中,通过使用 jQ...

红薯
2011/11/28
12.5K
8
8款实用jQuery插件实例欣赏及源码下载

jQuery的确是一款非常轻巧强大的JS框架,相信每一位WEB开发者都非常喜欢他。许多jQuery插件不仅开源,而且代码和设计都十分优雅,对自己的JS开发能力也会有很大提高。下面分享8款实用jQuery插...

yykj
2012/12/12
5
0
8 款实用的 jQuery 插件及源码

jQuery的确是一款非常轻巧强大的JS框架,相信每一位Web开发者都非常喜欢。许多jQuery插件不仅开源,而且代码和设计都十分优雅,对自己的JS开发能力也会有很大提高。下面分享8款实用jQuery插件...

yykj
2013/11/13
733
0

没有更多内容

加载失败,请刷新页面

加载更多

Cookie 显示用户上次访问的时间

import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.Cookie;import javax.servlet.http.HttpServlet;import javax.serv......

gwl_
今天
1
0
网络编程

第14天 网络编程 今日内容介绍  网络通信协议  UDP通信  TCP通信 今日学习目标  能够辨别UDP和TCP协议特点  能够说出UDP协议下两个常用类名称  能够说出TCP协议下两个常用类名称...

stars永恒
今天
1
0
二进制相关

二进制 众所周知计算机使用的是二进制,数字的二进制是如何表示的呢? 实际就是逢二进一。比如 2 用二进制就是 10。那么根据此可以推算出 5的二进制等于 10*10+1 即为 101。 在计算机中,负数以...

NotFound403
昨天
3
0
day22:

1、写一个getinterface.sh 脚本可以接受选项[i,I],完成下面任务: 1)使用格式:getinterface.sh [-i interface | -I ip] 2)当用户使用-i选项时,显示指定网卡的IP地址;当用户使用-I选项...

芬野de博客
昨天
2
0
Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现

自Spring Cloud Alibaba发布第一个Release以来,就备受国内开发者的高度关注。虽然Spring Cloud Alibaba还没能纳入Spring Cloud的主版本管理中,但是凭借阿里中间件团队的背景,还是得到不少...

程序猿DD
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部