全部由js动态生成结点，body内无内容

  1. <style>
  2.     #count{
  3.         position: absolute;
  4.         text-align: center;
  5.         width: 240px;
  6.         height: 260px;
  7.         top: 230px;
  8.         left: 750px;
  9.         margin: 0;
  10.         border: 10px black solid;
  11.         border-radius: 240px;
  12.         font-size: 200px;
  13.     }
  14.     .block{
  15.         background: red;width: 50px;
  16.         height: 50px;
  17.         display: inline-block;
  18.         margin-left: 15px;
  19.         position: absolute;
  20.         top: 20px;
  21.         left: 0;
  22.     }
  23. </style>
  24. <body></body>
  25. <script>
  26.     var oBody=document.getElementsByTagName('body')[0];
  27.     function countDown() {
  28.         oBody.innerHTML='<div id="count">3</div>';
  29.         var oDiv=document.getElementById('count');
  30.         oDiv.timer=setInterval(function () {
  31.             oDiv.innerText=parseInt(oDiv.innerText)-1;
  32.             if (oDiv.innerText==0)
  33.             {
  34.                 clearInterval(oDiv.timer);
  35.                 show();     //调用show()方法
  36.             }
  37.         },1000);
  38.     }
  39.     countDown();
  40.     function show() {  //动态生成n个小方块
  41.         oBody.innerText='';
  42.         for (var i=0;i<23;i++){
  43.             oBody.innerHTML+="<div class='block' style='top: 20px;left:"+i*70+"px;'></div>"
  44.         }
  45.         var timer=null;
  46.         var num=0;
  47.         var aDiv=document.getElementsByTagName("div");
  48.         timer=setInterval(function () {
  49.             drop(aDiv[num]);
  50.             num++;
  51.             if (num===aDiv.length){
  52.                 clearInterval(timer);
  53.             }
  54.         },100);
  55.     }
  56.     function drop(obj) {             //把当前小方块向下掉
  57.         obj.timer=setInterval(function () {
  58.             obj.style.top=parseInt(obj.style.top)+50+'px';
  59.             if (parseInt(obj.style.top)>800){
  60.                 obj.style.top=800+'px';
  61.                 clearInterval(obj.timer);
  62.             }
  63.         },50);
  64.     }
  65. </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. 2019-1-5-Windows-的-Pen-协议

    title author date CreateTime categories Windows 的 Pen 协议 lindexi 2019-01-05 11:14:49 +0800 2019-01-0 ...

  2. quotastats - 显示与配额子系统相关的统计信息

    SYNOPSIS(总览) quotastats DESCRIPTION(描述) 该命令显示与配额子系统相关的统计信息.

  3. python常用函数 N

    nlargest(int , iterable,key) 查找最大的n个元素. 例子: 还支持传入key进行复杂元素比较:如:nlargest (n, list,key=lambda a:a[b]). ...

  4. bzoj2004 [Hnoi2010]Bus 公交线路 矩阵快速幂+状压DP

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=2004 题解 如果 \(N\) 没有那么大,考虑把每一位分配给每一辆车. 假设已经分配到了第 \ ...

  5. Codeforces Round #584 - Dasha Code Championship - Elimination Round (rated, open for everyone, Div. 1 + Div. 2)

    怎么老是垫底啊. 不高兴. 似乎 A 掉一道题总比别人慢一些. A. Paint the Numbers 贪心,从小到大枚举,如果没有被涂色,就新增一个颜色把自己和倍数都涂上. #include< ...

  6. Yii Ar model 查询

    Ar model 查询 参照表: CREATE TABLE tbl_user ( id INTEGER NOT NULL PRIMARY KEY AUTO_INCREMENT, username VA ...

  7. 刷题or源码链接

    Hadoop权威指南的Github https://github.com/tomwhite/hadoop-book hadoopAPI http://hadoop.apache.org/docs/cu ...

  8. sql语句中判断空值的函数

    COALESCE()函数 主流数据库系统都支持COALESCE()函数,这个函数主要用来进行空值处理,其参数格式如下:  COALESCE ( expression,value1,value2……,v ...

  9. 【leetcode】1018. Binary Prefix Divisible By 5

    题目如下: Given an array A of 0s and 1s, consider N_i: the i-th subarray from A[0] to A[i] interpreted a ...

  10. MongoDB笔记【2】——基本概念和基本指令

    - 基本概念 数据库(database) 集合(collection) 文档(document) - 在MongoDB中,数据库和集合都不需要手动创建,当我们创建文档时,如果文档所在的集合或数据库不存 ...