1. <!DOCTYPE html>
  2. <html lang="zh">
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <title>生成一个倒计时效果</title>
  6.         <style type="text/css">
  7.             body{
  8.                 margin:0;
  9.                 padding:0;
  10.                 background: orange;
  11.                 width: 100%;
  12.                 height: 100%;
  13.                 font-size: 5em;
  14.                 color: #fff;
  15.                 text-align:center;
  16.                 font-family: 'microsoft yahei',Arial,sans-serif;
  17.             }
  18.             .countdown{
  19.                 position: absolute;
  20.                 top:50%;
  21.                 left:50%;
  22.                 transform: translate(-50%,-50%);
  23.                 -webkit-transform: translate(-50%,-50%);
  24.             }
  25.         </style>
  26.         <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
  27.         <script type="text/javascript">
  28.             $(function() {
  29.                 var $countdown = $('.countdown'),
  30.                         number = $countdown.html() * 100 / 100;
  31.                     //number = parseInt($countdown.html());
  32.                 var countdownInterval = window.setInterval(function() {
  33.                     number--;
  34.                     if (number == 0) {
  35.                         $countdown.html("你好，涂传龙");
  36.                         window.clearInterval(countdownInterval);
  37.                     } else {
  38.                         $countdown.html(number);
  39.                     }
  40.                 }, 1000);
  41.             });
  42.         </script>
  43.     </head>
  44.     <body>
  45.         <div class="countdown">
  46.             60
  47.         </div>
  48.     </body>
  49. </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. ACM2096

    #include<iostream> int main() { using namespace std; int a,b,count; cin>>count; while(co ...

  2. mysql 表设计

  3. Segments - POJ 3304 (判断直线与线段是否相交)

    题目大意:给出一些线段,然后判断这些线段的投影是否有可能存在一个公共点.   分析:如果这些线段的投影存在一个公共点,那么过这个公共点作垂线一定与所有的直线都想交,于是题目转化成是否存在一个直线可以经 ...

  4. php类获取静态变量值以及调用

    <?php class Test{ public static $static_var = 20; } echo Test::$static_var;exit;

  5. DevExpress 控件 GridControl常见用法

    刚接触DevExpress第三方控件,把GridControl的常见用法整理一下,以供参考: 说明: gcTest   GridControl gvText    GridView //隐藏最上面的G ...

  6. 下载的chm手册打不开的解决方法？

    用ie或者chrome等浏览器下载文件的时候,都会给文件加上一个默认的保护,右键这个文件,打开属性对话框,然后在第一个的选项卡的安全的部分,有个解除这个保护的按钮点下然后确定保存,再打开chm文件就不 ...

  7. android 06 LinearLayout

    xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:la ...

  8. SqlLite 简明教程

    SQL DML 和 DDL        可以把 SQL 分为两个部分:数据操作语言 (DML) 和 数据定义语言 (DDL).         注:"--"双减号为行注释     ...

  9. javascript中涉及到汉字的比较

    在使用js中的"=="进行字符串的比较时,发现在英文情况下是ok的,但在中文比较时则不行了. 在网上搜索,提供了一个解决方法,使用 stringObject.localeCompa ...

  10. JAAS authentication in Tomcat example--reference

    In this tutorial you will learn how to configure JAAS authentication in Tomcat using the HTTP Basic ...