[jQuery编程挑战]006 生成一个倒计时效果
<!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 生成一个倒计时效果的更多相关文章
- [jQuery编程挑战]003 克隆一个页面元素及其相关事件
挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...
- [jQuery编程挑战]008 生成逗号分隔数字
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- jQuery实现的手机发送验证码倒计时效果代码分享
这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...
- [jQuery编程挑战]001：实现页面元素加速动画效果
要求: 页面包含两个HTML元素:一个按钮,一个小方块 动画要求:点击按钮,小方块从页面坐标300,300,加速移动到0,0 相关知识点: jQuery动画方法animate easing参数的设置 ...
- [jQuery编程挑战]002：实现一个转盘大抽奖
body { background-color: #F2F2F2; text-align: center; } .container { position: relative; width: 500p ...
- 【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画
HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...
- jquery 实现 点击按钮后倒计时效果，多用于实现发送手机验证码、邮箱验证码
原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html <!DOCTYPE html PUBLIC " ...
- [jQuery编程挑战]007 切换数据表格的行列
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- [jQuery编程挑战]005 使用最短的代码生成元素的闪烁效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
随机推荐
- lightoj 1030 概率dp
题目链接:http://lightoj.com/volume_showproblem.php?problem=1030 #include<cstdio> #include<cstri ...
- linux平台MongoDB数据库安装
跟Ruiy哥一起玩转吧; <一,初始化玩转MongoDB> 1,关闭SElinux(Ruiy哥根据经验知红帽的SElinux架设就是个错误,还记得不管啥结构首先要关闭的就是它); 2,设置 ...
- 公司开发的APP，如何生成一个二维码，供客户下载使用
1.其实和简单,因为一般的用户使用扫一扫,大多数都是用微信自带的扫一扫工具 而,微信打开的二维码页面,会自动屏蔽apk文件,所以显然把apk的url生成一个二维码,让用户扫一扫就能直接下载,这样是行不 ...
- poj3693 Maximum repetition substring
题意 给出一个长度为\(n(n\leqslant 100000)\)的串,求一个字典序最小的子串使得它是某个字符串重复\(k\)次得到的,且\(k\)最大 题解 后缀数组论文上的题,跟上一篇uva那个 ...
- XML认识
XML概念 XML是eXtensible Markup Langguage 缩写,称之为可扩展标记语言.XML 被设计用来传输和存储数据.与HTML不同的是: HTML被设计用来显示数据,其焦点是数据 ...
- 【设计模式 - 16】之迭代器模式（Iterator）
1 模式简介 迭代器模式是JAVA中非常常用的模式,List.Map.Set等常见集合中都封装了迭代器Iterator. 迭代器模式的介绍: 迭代器模式用于顺序访问集合对象中的元素,而不需要 ...
- C# WinForm 判断窗体控件是否修改过
本文转载:http://www.cnblogs.com/LinFx/archive/2011/12/23/2299895.html 1.自定义控件, 和接口 ) return IsModify(con ...
- BAE、SAE 与 GAE 对比
从数据库.应用配置.计费.域名绑定.平台服务对比了 BAE.SAE 以及 GAE 的优劣,最后给出云平台选型的建议. 数据库SAE 不支持 InnoDB(可申请支持),BAE 默认支持. BAE 不支 ...
- centos安装g++
安装: yum -y install gcc automake autoconf libtool make 安装g++: yum install gcc gcc-c++
- java Map实现的cache manager
一个模仿memcached的JAVA虚拟缓存工具,可以缓存java对象 import java.io.ByteArrayInputStream; import java.io.ByteArrayOut ...