文档章节

jQuery毫秒倒计时

史文帝
 史文帝
发布于 2016/11/28 21:30
字数 219
阅读 58
收藏 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
孝感
程序员
8个很棒的 jQuery 倒计时插件和教程

jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互。下面向大家分享8个优秀的 jQuery倒计时插件和教程。 jQuery Countdown sprit...

晨曦之光
2012/03/09
0
0
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu
06/18
0
0
前端(jQuery样式操作、特殊效果、动画......)

1、jQuery选择器 2、选择器转移 prev()是同级的上一个元素,prevAll()是同级的上面所有的元素 next()是同级的下一个元素,nextAll()是同级的下面所有的元素 3、样式操作 <...

埃菲尔上的铁塔梦i
08/27
0
0
jQuery 的 ready 函数是如何工作的?

学习 jQuery 有许多途径,我们今天从 jQuery 的 ready 函数开始。本例中的代码都来自于 jQuery 脚本库。 如果你使用过 jQuery , 就必然使用过 ready 函数,它用来注册当页面准备好之后可以执...

bosscheng
2015/08/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java的快速失败和安全失败

一:快速失败(fail—fast) 在用迭代器遍历一个集合对象时,如果遍历过程中对集合对象的内容进行了修改(增加、删除、修改),则会抛出Concurrent Modification Exception。 原理:迭代器在...

狼王黄师傅
16分钟前
5
0
Echarts X轴Y轴配置参数详情

mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFamily:"sans......

wqzbxh
18分钟前
1
0
解决kettle使用JDBC读取Oracle速度慢的问题

jdbc连接添加如下信息: defaultRowPrefetch=20000

了凡川
22分钟前
1
0
Linux学习-1015

8.10 shell特殊符号cut命令 8.11 sort_wc_uniq命令 8.12 tee_tr_split命令 8.13 shell特殊符号下 相关测验题目:题目:http://ask.apelearn.com/question/5437 扩展 扩展 1. source exec 区别...

wxy丶
23分钟前
2
0
Spring Boot核心注解讲解

Spring Boot核心注解讲解 Spring Boot最大的特点是无需XML配置文件,能自动扫描包路径装载并注入对象,并能做到根据classpath下的jar包自动配置。 所以Spring Boot最核心的3个注解就是: 1,...

DemonsI
29分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部