js实现倒计时+div下落
全部由js动态生成结点，body内无内容
<style>
#count{
position: absolute;
text-align: center;
width: 240px;
height: 260px;
top: 230px;
left: 750px;
margin: 0;
border: 10px black solid;
border-radius: 240px;
font-size: 200px;
}
.block{
background: red;width: 50px;
height: 50px;
display: inline-block;
margin-left: 15px;
position: absolute;
top: 20px;
left: 0;
}
</style>
<body></body>
<script>
var oBody=document.getElementsByTagName('body')[0];
function countDown() {
oBody.innerHTML='<div id="count">3</div>';
var oDiv=document.getElementById('count');
oDiv.timer=setInterval(function () {
oDiv.innerText=parseInt(oDiv.innerText)-1;
if (oDiv.innerText==0)
{
clearInterval(oDiv.timer);
show(); //调用show()方法
}
},1000);
}
countDown();
function show() { //动态生成n个小方块
oBody.innerText='';
for (var i=0;i<23;i++){
oBody.innerHTML+="<div class='block' style='top: 20px;left:"+i*70+"px;'></div>"
}
var timer=null;
var num=0;
var aDiv=document.getElementsByTagName("div");
timer=setInterval(function () {
drop(aDiv[num]);
num++;
if (num===aDiv.length){
clearInterval(timer);
}
},100);
}
function drop(obj) { //把当前小方块向下掉
obj.timer=setInterval(function () {
obj.style.top=parseInt(obj.style.top)+50+'px';
if (parseInt(obj.style.top)>800){
obj.style.top=800+'px';
clearInterval(obj.timer);
}
},50);
}
</script>
js实现倒计时+div下落的更多相关文章
- 一个简单的js实现倒计时函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js时间倒计时
看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...
- js实现倒计时及时间对象
JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...
- JS实现倒计时(天数,时,分,秒)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <titl ...
- 使用html+css+js实现倒计时，开启你痛苦的倒计时吧
使用html+css+js实现倒计时,开启你痛苦的倒计时吧 效果图: 这是我痛苦的倒计时,呜呜呜 好啦,再痛苦还是要分享代码,代码如下,复制即可使用: <!DOCTYPE html> &l ...
- js网页倒计时精确到秒级
网页实时倒计时,精确到秒级,和天数倒计时原理一样. 一个很好用的js倒计时!网页实时倒计时,精确到秒级,和天数倒计时原理一样.js倒计时一般用于商城网站团购,特卖,很多地方都可用到!希望能够给大家带来 ...
- 用JS实现倒计时(日期字符串作为参数)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JS实现倒计时效果，并退出系统
背景:由于单点登录后,一直在本系统操作,可是门户体统的会话失效时间有30分钟,所以30分钟后,需要重新登录系统才可以进行操作. 方法:想过在本系统中的每个操作都先跟门户系统进行交互,渠道refresh ...
- 倒计时的js实现 倒计时 js Jquery
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...
随机推荐
- R语言数据类型与数据结构
一.数据类型 5种 1.character 字符 2.numeric 数值 3.integer 整数 一般数字的存储会默认为数值类型,如果要强调是整数,需要在变量值后面加上 L. x <- 5L ...
- CentOS下安装中文man 手册
为了方便使用man,安装中文手册,具体如下: 版本:CentOS release 6.6 (Final) 中文包:http://pkgs.fedoraproject.org/repo/pkgs/man ...
- vue,一路走来（12）--父与子之间传参
今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到. 父向子组件传参 Index.vue父组件中 <component-a :msgfromfa="(positionno ...
- "=="、equals、hashCode之间的区别
1. "=="分为两种情况: (1) 基本数据类型,比较的是其对应的值是否相等: (2) 引用类型,比较的是他们在内存中存放的地址(或者说,是否指向同意对象). 2. equals ...
- 二、Spring Boot系列：Spring Initializer快速创建Spring Boot项目
1.点击创建新工程 2.选择Spring Initializer和jdk1.8 注意:项目名称要小写字母 3.现在只需要一个创建一个web,选择一个就好 4.没有用的文件,可以删除 5.pom.xml ...
- HttpRunnerManager安装部署（centos7）
一.安装python3环境 参考 二.安装依赖环境 根据根目录requirements.txt文件安装依赖,可以使用pip安装 #pip3 install -r requirements.txt 会遇 ...
- spring cloud学习笔记二 ribbon负载均衡
Ribbon是Netflix发布的负载均衡器,它有助于控制HTTP和TCP的客户端的行为.为Ribbon配置服务提供者地址后,Ribbon就可基于某种负载均衡算法,自动地帮助服务消费者去请求.Ribb ...
- Excel，此文件中的某些文本格式可能已经更改，因为它已经超出最多允许的字体数。
既然是超出最多允许的字体数,那么就不要循环创建IFont.先创建一个IFont font=wk.CreateFont();后面都使用它即可.
- oracle中日期转换
oracle中,日期转换函数有很多,常用命令如下: to_char()命令将时间戳转换为用户规定的日期格式,如: SELECT TO_CHAR(sysdate,'YYYY-MM-DD hh24:mi: ...
- 王爽《汇编》检测9.1(1) | 若要使程序中的jmp指令执行后，CS:IP指向程序的第一条指令，在data段中应该定义哪些数据？
;监测点9.1(1) assume cs:code data segment db dup() data ends code segment start: mov ax,data :这一段一定要补上 ...