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 一.如火如荼的团 ...
随机推荐
- maven私服nexus3.9安装配置
maven私服nexus3.9安装配置 私服介绍 私服是指私有服务器,是架设在局域网的一种特殊的远程仓库,目的是代理远程仓库及部署第三方构建.有了私服之后,当 Maven 需要下载构件时,直接请求私服 ...
- 关于手机端在同一个Grid中使用不同的布局展现即Layout的使用
标题可能说的不是很清楚,我举个栗子好了,现在你正在写手机端的一个审批模块,这个模块要求能够展示所有待审批的信息 比如出差申请,请假申请,加班申请,以及报销申请 那么我的思路有两个 1:建立一个Tab页 ...
- pwd - 显示出当前/活动目录的名称
总览 (SYNOPSIS) pwd [OPTION] 描述 (DESCRIPTION) 显示出 完整的 当前 活动目录 名称. --help 显示 帮助 信息, 然后 退出 --version 显示 ...
- Java虚拟机——Java内存区域与内存溢出
内存区域 Java虚拟机在执行Java程序的过程中会把他所管理的内存划分为若干个不同的数据区域.Java虚拟机规范将JVM所管理的内存分为以下几个运行时数据区:程序计数器.Java虚拟机栈.本地方法栈 ...
- OpenStack虚拟机网络问题
当发现你的OpenStack虚拟机网络有问题,不妨先试一下这16个步骤 1. Security Group全部打开,这是最基本的,但是很多人容易忘记 其实遇到过无数这种场景了,Debug了半天网络 ...
- java ArrayList的基本使用
package java06; /* 数组的长度是不可以发生改变的 Arraylist 集合的长度可以发生改变 对于ArrayList来说,有一个尖括号<E>代表泛型 泛型:就是装在结合中 ...
- mangodb语句
{ field: { $exists: <boolean> } }
- windows平台搭建Mongo数据库复制集（类似集群）（二）
通过rs.status()命令我们可以查询到各个节点运行正常. 一.数据同步测试 在28011.28012端口上进行插入: 因为SECONDARY是不允许读写的, 在写多读少的应用中,使用Replic ...
- STN空间变换网络
STN的主要思想是通过网络学习一个变化参数,然后计算出新图在原图上对应的坐标,再通过某种填充方法填充新图. 使得得到的新图很好的适应nn训练.可以理解为是拿来把不规范的图像变换为标准形式的图像. 网络 ...
- MySQL查询执行路径
1.客户端发送一条查询给服务器2.服务器先检查查询缓存,如果命中缓存,则立刻返回存储在缓存中的结果.3.服务器端进行SQL解析.预处理,再由优化器生成对应的执行计划.4.MySQL根据优化器生成的执行 ...