<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="utf-8"/>

        <title>生成一个倒计时效果</title>

        <style type="text/css">

            body{

                margin:0;

                padding:0;

                background: orange;

                width: 100%;

                height: 100%;

                font-size: 5em;

                color: #fff;

                text-align:center;

                font-family: 'microsoft yahei',Arial,sans-serif;

            }

            .countdown{

                position: absolute;

                top:50%;

                left:50%;

                transform: translate(-50%,-50%);

                -webkit-transform: translate(-50%,-50%);

            }

        </style>

        <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>

        <script type="text/javascript">

            $(function() {

                var $countdown = $('.countdown'),

                        number = $countdown.html() * 100 / 100;

                    //number = parseInt($countdown.html());

                var countdownInterval = window.setInterval(function() {

                    number--;

                    if (number == 0) {

                        $countdown.html("你好，涂传龙");

                        window.clearInterval(countdownInterval);

                    } else {

                        $countdown.html(number);

                    }

                }, 1000);

            });

        </script>

    </head>

    <body>

        <div class="countdown">

            60

        </div>

    </body>

</html>

[jQuery编程挑战]006 生成一个倒计时效果的更多相关文章

  1. [jQuery编程挑战]003 克隆一个页面元素及其相关事件

    挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...

  2. [jQuery编程挑战]008 生成逗号分隔数字

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  3. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  4. [jQuery编程挑战]001：实现页面元素加速动画效果

    要求: 页面包含两个HTML元素:一个按钮,一个小方块 动画要求:点击按钮,小方块从页面坐标300,300,加速移动到0,0 相关知识点: jQuery动画方法animate easing参数的设置 ...

  5. [jQuery编程挑战]002：实现一个转盘大抽奖

    body { background-color: #F2F2F2; text-align: center; } .container { position: relative; width: 500p ...

  6. 【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画

    HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...

  7. jquery 实现 点击按钮后倒计时效果，多用于实现发送手机验证码、邮箱验证码

    原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html <!DOCTYPE html PUBLIC " ...

  8. [jQuery编程挑战]007 切换数据表格的行列

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  9. [jQuery编程挑战]005 使用最短的代码生成元素的闪烁效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. (java) Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity.

    /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * Lis ...

  2. 使用php将数组转为XML

    <?php class Array_to_Xml { private $version = '1.0'; private $encoding = 'UTF-8'; private $root = ...

  3. [置顶] Android布局管理器 - 详细解析布局实现

    布局管理器都是以ViewGroup为基类派生出来的; 使用布局管理器可以适配不同手机屏幕的分辨率,尺寸大小; 布局管理器之间的继承关系 : 在上面的UML图中可以看出, 绝对布局 帧布局 网格布局 相 ...

  4. Struts2配置文件讲解

    解决在断网环境下,配置文件无提示的问题我们可以看到Struts.xml在断网的情况下,前面有一个叹号,这时,我们按alt+/ 没有提示,这是因为” http://struts.apache.org/d ...

  5. <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库

    触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线. 下图是各种触摸事件说明: 本文我们 ...

  6. GDB调试总结__1

    该博客旨在分享IT技术心得和实际工作中遇到问题的解决方法,下面是新浪博客地址http://blog.sina.com.cn/qianyumolu,则为分享经济.行业趋势.心灵文章等,有兴趣的朋友能够踩 ...

  7. Android如何创建背景透明的Dialog

    一:控制Dialog 的背景方法:1.定义一个无背景主题主题<!--去掉背景Dialog--> <style name="NobackDialog" parent ...

  8. android开发之使用Messenger实现service与activity交互

    service与activity交互的方式有多种,这里说说使用Messenger来实现两者之间的交互. Service程序 public class MessengerService extends ...

  9. oracle在linux配置信息

    这两天在linux中给已有的oracle添加新实例,其中涉及数据库服务.监听配置,oracle服务是否正常.监听是否成功等操作,特此记录存档,以备后用. oracle服务启动操作命令 1.查看orac ...

  10. Hex编码 十六进制编码

    import java.io.UnsupportedEncodingException; import java.net.URLEncoder; /**  * HEX字符串与字节码(字符串)转换工具 ...