[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 ...
随机推荐
- sshd_config 配置文件
Ssh-server 服务端 sshd_concfig Port Protocol HostKey /etc/ssh/ssh_host_rsa_key HostKey /etc/ssh/ssh_hos ...
- Sicily1153-马的周游问题:启发式搜索
代码地址: https://github.com/laiy/Datastructure-Algorithm/blob/master/sicily/1153.c 题目如下: 1153. 马的周游问题 C ...
- JVM中锁优化简介
本文将简单介绍HotSpot虚拟机中用到的锁优化技术. 自旋锁 互斥同步对性能最大的影响是阻塞的实现,挂起线程和恢复线程的操作都需要转入内核态中完成,这些操作给系统的并发性能带来了很大的压力.而在很多 ...
- Telephone directory - SGU 127（水）
题目大意:有一个电话簿,每页最多纪录K行电话,现在有N个电话要记录在电话薄上,要求同页的电话号码的首位要相同,电话簿的前两页是纪录的别的东西,问最少需要多少页电话簿. 分析:直接求首位数字有多少个即可 ...
- poj 1659 Frogs' Neighborhood (贪心 + 判断度数序列是否可图)
Frogs' Neighborhood Time Limit: 5000MS Memory Limit: 10000K Total Submissions: 6076 Accepted: 26 ...
- Java开发中文件读取方式总结
JAVA开发中,免不了要读文件操作,读取文件,首先就需要获取文件的路径. 路径分为绝对路径和相对路径. 在文件系统中,绝对路径都是以盘符开始的,例如C:\abc\1.txt. 什么是相对路径呢?相对路 ...
- SQL字符串处理函数大全
select语句中只能使用sql函数对字段进行操作(链接sql server),select 字段1 from 表1 where 字段1.IndexOf("云")=1;这条语句不对 ...
- docker 镜像和容器的批量清理
镜像和容器的清理 删除所有运行中的容器 $ docker kill $(docker ps -q) 删除所有停止的容器 $ docker rm $(docker ps -a -q) 删除所有没有tag ...
- java面试32问
第一,谈谈final, finally, finalize的区别. 第二,Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类,是否可以implements ...
- windows 与Linux 互传文件
下载putty,将putty的安装路径添加到Windows的环境变量中: 我的电脑->属性->高级->环境变量->系统变量,双击其中的Path,在分号后添加putty的 ...