全部由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下落的更多相关文章

  1. 一个简单的js实现倒计时函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js时间倒计时

    看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...

  3. js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  4. JS实现倒计时(天数,时,分,秒)

    <!DOCTYPE html> <html> <head>   <meta charset="utf-8" >   <titl ...

  5. 使用html+css+js实现倒计时,开启你痛苦的倒计时吧

    使用html+css+js实现倒计时,开启你痛苦的倒计时吧 效果图: 这是我痛苦的倒计时,呜呜呜 好啦,再痛苦还是要分享代码,代码如下,复制即可使用: <!DOCTYPE html> &l ...

  6. js网页倒计时精确到秒级

    网页实时倒计时,精确到秒级,和天数倒计时原理一样. 一个很好用的js倒计时!网页实时倒计时,精确到秒级,和天数倒计时原理一样.js倒计时一般用于商城网站团购,特卖,很多地方都可用到!希望能够给大家带来 ...

  7. 用JS实现倒计时(日期字符串作为参数)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. JS实现倒计时效果,并退出系统

    背景:由于单点登录后,一直在本系统操作,可是门户体统的会话失效时间有30分钟,所以30分钟后,需要重新登录系统才可以进行操作. 方法:想过在本系统中的每个操作都先跟门户系统进行交互,渠道refresh ...

  9. 倒计时的js实现 倒计时 js Jquery

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...

随机推荐

  1. RESET - 把一个运行时参数值恢复为缺省值

    SYNOPSIS RESET name RESET ALL DESCRIPTION 描述 RESET 将运行时参数恢复为缺省值. RESET 是下面语句的一个变种 SET parameter TO D ...

  2. 05.Linux-CentOS系统普通用户SSH远程问题

    问题:appuser用户SSH远程连接Linux服务器出现的问题: Connecting?to?localhost:22...Connection?established.To?escape?to?l ...

  3. 141-FMC141-4路 250Msps/16bits ADC, FMC板卡

    FMC141-4路 250Msps/16bits ADC, FMC板卡 一.产品概述: 本板卡基于 FMC 标准板卡,实现 4 路 16-bit/250Msps ADC 功能.遵循 VITA 57 标 ...

  4. java 局部变量与成员成员变量的区别

    package java04; /* 局部变量和成员变量的不同: 1.定义的位置不一样 局部变量:定义在方法内部 成员变量:在方法外部,直接写在类中 2.作用范围不一样 局部变量:只有方法中能使用,除 ...

  5. ltp-ddt nand_perf_ubifs_w_cpuload

    NAND_M_PERF_UBIFS_CPU_LOAD source 'common.sh';/opt/ltp/runltp -f ddt/nand_perf_ubifs -s "NAND_S ...

  6. html5 带声音的导航

    代码实例: <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3. ...

  7. 【leetcode】1032. Stream of Characters

    题目如下: Implement the StreamChecker class as follows: StreamChecker(words): Constructor, init the data ...

  8. webpack对html模板的处理

    一.打包html模板到相应目录并且引入js 需要安装 html-webpack-plugin 然后在plugins里实例化 new HtmlWebpackPlugin({ template:'./sr ...

  9. java File类的使用以及一些函数

    package file; import java.io.File; import java.io.IOException; import org.junit.jupiter.api.Test; /* ...

  10. S1.2 Python开发规范指南

    参考链接 Python风格规范 分号 不要在行尾加分号, 也不要用分号将两条命令放在同一行. 行长度 每行不超过80个字符 例外: 长的导入模块语句 注释里的URL 不要使用反斜杠连接行. Pytho ...