全部由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. rdev - 查询/设置内核映像文件的根设备，RAM 磁盘大小或视频模式

    总览 SYNOPSIS rdev [ -rvh ] [ -o offset ] [ image [ value [ offset ] ] ] rdev [ -o offset ] [ image [ ...

  2. 121-基于TI DSP TMS320DM8148的全高清1080P 60fs的视频编解码系统 机器人主板

    基于TI DSP TMS320DM8148的全高清1080P 60fs的视频编解码系统 一.板卡概述 本系统基于最先进的DSP技术,构建一个全高清的视频编解码系统,采用TI的芯片.借助TI的DaVin ...

  3. 从零开始的PHP生活Day1

    PHP 什么是PHP? PHP(Hypertext Preprocessor,超文本预处理器)是一种服务器端的.跨平台的.HTML嵌入式的弱类型开源脚本语言. 1.服务器端:PHP需要使用服务器软件进 ...

  4. 一、AJAX

    一. (function ($) { //1.得到$.ajax的对象 var _ajax = $.ajax; $.ajax = function (options) { //2.每次调用发送ajax请 ...

  5. linux ---apache的安装和配置

    linux环境下的安装:yum安装和tar包安装 yum安装: 首先安装php环境 yum install php55w yum install php55w-mysql yum install ph ...

  6. python数字图像处理（五） 图像的退化和复原

    import cv2 import numpy as np import matplotlib.pyplot as plt import scipy import scipy.stats %matpl ...

  7. Go 数组（1）

    1.一旦声明,数组里存储的数据类型和数组长度就都不能改变了.如果需要存储更多的元素, 就需要先创建一个更长的数组,再把原来数组里的值复制到新数组里. 例如: ]int 2.使用数组字面量声明数组 // ...

  8. BiNGO的GO分析

    GO富集分析对老师们来说想必都不陌生,几乎在任何项目中都会出现.今天就给大家介绍一款简单易学又好用的富集分析小软件---BiNGO.它是Cytoscape软件中很出色的一个插件.它提供的结果中除了文本 ...

  9. 【leetcode】883. Projection Area of 3D Shapes

    题目如下: 解题思路:分别求出所有立方体的个数,各行的最大值之和,各列的最大值之和.三者相加即为答案. 代码如下: class Solution(object): def projectionArea ...

  10. JS中数据结构之队列

    队列是一种列表,不同的是队列只能在队尾插入元素,在队首删除元素.队列用于存储按 顺序排列的数据,先进先出. 队列的两种主要操作是:向队列中插入新元素和删除队列中的元素.插入操作也叫做入 队,删除操作也 ...