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 一.如火如荼的团 ...
随机推荐
- CentOS7.6系统安装zabbix3.4.8客户端
一. 准备安装包 将本地的zabbix-3.4.8软件包上传至服务器, 二. 安装依赖包 安装依赖包:yum install gcc* pcre* psmisc -y 三. 安 ...
- GC(垃圾回收器)中的算法
GC的两种判定方法 (1) 引用计数法 给对象添加一个引用计数器,每当引用一次+1,每次失效时-1,当计数器为0时,表示对象就是不可能再被使用的. (2) 可达性分析算法 将“GC Roots”对象作 ...
- SpringBoot 快速支持国际化i18n
学习目标 快速学会如何在工程中支持国际化语言. 快速查阅 专题阅读:<SpringBoot 布道系列> 源码下载:springboot-locale-i18n — Hey Man,Don' ...
- git 如何删除远程仓库的错误提交
前言 最近一个版本发生产环境以后,忘了把分支切回开发分支,直接在release分支上开发新功能提交了....于是就需要去删除远程仓库的错误提交. git命令行实现 1.强制返回上次的版本(~1回退到上 ...
- https 配置
参考:https://www.cnblogs.com/tanghuachun/p/9951849.html 1.将pfx文件拷贝到application.properties同级目录下 2.添加配置文 ...
- 如何做好APP功能测试？
一.如何做好app的测试工作? 22 个回答  斗魂大陆 凡是可能会出错的地方,一定会出错!--墨菲法则 腾讯有个平台可以实现适配兼容.服务器压力.性能测试.弱网络.耗电量测试等等,挺全面的.WeT ...
- PHP curl_multi_close函数
curl_multi_close — 关闭一组cURL句柄 说明 void curl_multi_close ( resource $mh ) 关闭一组cURL句柄. 参数 mh 由 curl_mul ...
- hdu 6146 Pokémon GO (计数)
Problem Description 众所周知,度度熊最近沉迷于 Pokémon GO. 今天它决定要抓住所有的精灵球!为了不让度度熊失望,精灵球已经被事先放置在一个2*N的格子上,每一个格子上都有 ...
- 容器————vector
目录 一.介绍 二.声明及初始化 三.方法 front find remove erase substr 一.介绍 向量 vector 是一种对象实体, 能够容纳许多其他类型相同的元素, 因此又被称为 ...
- 【CF1238E】Keyboard Purchase（状压DP，贡献）
题意:有m种小写字符,给定一个长为n的序列,定义编辑距离为序列中相邻两个字母位置差的绝对值之和,其中字母位置是一个1到m的排列 安排一种方案,求编辑距离最小 n<=1e5,m<=20 思路 ...