<!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. sshd_config 配置文件

    Ssh-server 服务端 sshd_concfig Port Protocol HostKey /etc/ssh/ssh_host_rsa_key HostKey /etc/ssh/ssh_hos ...

  2. Sicily1153-马的周游问题:启发式搜索

    代码地址: https://github.com/laiy/Datastructure-Algorithm/blob/master/sicily/1153.c 题目如下: 1153. 马的周游问题 C ...

  3. JVM中锁优化简介

    本文将简单介绍HotSpot虚拟机中用到的锁优化技术. 自旋锁 互斥同步对性能最大的影响是阻塞的实现,挂起线程和恢复线程的操作都需要转入内核态中完成,这些操作给系统的并发性能带来了很大的压力.而在很多 ...

  4. Telephone directory - SGU 127(水)

    题目大意:有一个电话簿,每页最多纪录K行电话,现在有N个电话要记录在电话薄上,要求同页的电话号码的首位要相同,电话簿的前两页是纪录的别的东西,问最少需要多少页电话簿. 分析:直接求首位数字有多少个即可 ...

  5. poj 1659 Frogs' Neighborhood (贪心 + 判断度数序列是否可图)

    Frogs' Neighborhood Time Limit: 5000MS   Memory Limit: 10000K Total Submissions: 6076   Accepted: 26 ...

  6. Java开发中文件读取方式总结

    JAVA开发中,免不了要读文件操作,读取文件,首先就需要获取文件的路径. 路径分为绝对路径和相对路径. 在文件系统中,绝对路径都是以盘符开始的,例如C:\abc\1.txt. 什么是相对路径呢?相对路 ...

  7. SQL字符串处理函数大全

    select语句中只能使用sql函数对字段进行操作(链接sql server),select 字段1 from 表1 where 字段1.IndexOf("云")=1;这条语句不对 ...

  8. docker 镜像和容器的批量清理

    镜像和容器的清理 删除所有运行中的容器 $ docker kill $(docker ps -q) 删除所有停止的容器 $ docker rm $(docker ps -a -q) 删除所有没有tag ...

  9. java面试32问

    第一,谈谈final, finally, finalize的区别. 第二,Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类,是否可以implements ...

  10. windows 与Linux 互传文件

    下载putty,将putty的安装路径添加到Windows的环境变量中:     我的电脑->属性->高级->环境变量->系统变量,双击其中的Path,在分号后添加putty的 ...