function Animation(list) {
this.box = document.getElementById(list.id);
this.size = list.size;
this.url = list.url; this.init() // Animation.prototype中的init(),初始化一些值(非私有)
this.DOMready(); // 调用Animation.prototype中的 DOMready(),每一个new Animation()都会执行这里面的语句
} Animation.prototype = {
// 1.init:初始化一些非私有值
init:function(){
this.width = box.clientWidth;
this.height = box.clientHeight;
}, // 2.DOMready:用来生成div的,用到定时器,循环设置
DOMready: function(){
var box = this.box;
var size = this.size;
// 下面保存了this(Animation)到self之中,因为等会要调用Animation.DOMmove(cirDiv)
var self = this; var timer = setInterval(function(){
var top = ;
var xPosition = Math.random()*(self.width - self.size);
var cirDiv = document.createElement("div");
cirDiv.style.cssText = "background:"+LYX_Colors_getRandomColor()+";"+"left:"+xPosition+"px;"+ "width:25px;height:25px;border-radius: 50%;position: absolute;";
box.appendChild(cirDiv); // 调用Animation.DOMmove(cirDiv),给每个div设置定时器,用来调整top值
self.DOMmove(cirDiv)
}, )
}, // 3.调整top值函数
DOMmove: function(cirDiv) {
var top = ;
var self = this;
var cirDiv = cirDiv;
var timer_2 = setInterval(function() {
top++;
cirDiv.style.top = top+"px";
if (top > self.height - self.size) {
box.removeChild(cirDiv);
clearInterval(timer_2);
}
},)
}
} // 新建s调用方法
var s = new Animation({
id: "box",
size: ""
});

JS中的混合模式的更多相关文章

  1. JS中有关对象的继承以及实例化、浅拷贝深拷贝的奥秘

    一.属性的归属问题 JS对象中定义的属性和方法如果不是挂在原型链上的方法和属性(直接通过如类似x的方式进行定义)都只是在该对象上,对原型链上的没有影响.对于所有实例共用的方法可直接定义在原型链上这样实 ...

  2. 5.0 JS中引用类型介绍

    其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...

  3. 【repost】JS中的异常处理方法分享

    我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...

  4. JS中给正则表达式加变量

    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...

  5. js中几种实用的跨域方法原理详解(转)

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  6. 关于js中的this

    关于js中的this this是javascript中一个很特别的关键字,也是一种很复杂的机制,学习this的第一步就是要明白this既不指向函数自身也不指向函数的词法作用域,this实际上是函数被调 ...

  7. 表值函数与JS中split()的联系

    在公司用云平台做开发就是麻烦 ,做了很多功能或者有些收获,都没办法写博客,结果回家了自己要把大脑里面记住的写出来. split()这个函数我们并不陌生,但是当前台有许多字段然后随意勾选后的这些参数传递 ...

  8. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  9. 在node.js中,使用基于ORM架构的Sequelize,操作mysql数据库之增删改查

    Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...

随机推荐

  1. 并查集(删除) UVA 11987 Almost Union-Find

    题目传送门 题意:训练指南P246 分析:主要是第二种操作难办,并查集如何支持删除操作?很巧妙的方法:将并查集树上p的影响消除,即在祖先上(sz--, sum -= p),然后为p换上马甲:id[p] ...

  2. DIjkstra(反向边) POJ 3268 Silver Cow Party || POJ 1511 Invitation Cards

    题目传送门 1 2 题意:有向图,所有点先走到x点,在从x点返回,问其中最大的某点最短路程 分析:对图正反都跑一次最短路,开两个数组记录x到其余点的距离,这样就能求出来的最短路以及回去的最短路. PO ...

  3. HTML5中lineCap端点样式遇到closePath()

    定义和用法 lineCap 属性设置或返回线条末端线帽的样式. 注释:"round" 和 "square" 会使线条略微变长. 默认值: butt JavaSc ...

  4. 每天一个linux命令---useradd

    1.添加用户 useradd  选项  用户名 其中各选项含义如下: -c comment 指定一段注释性描述.-d 目录 指定用户主目录,如果此目录不存在,则同时使用-m选项,可以创建主目录.-g ...

  5. node.js链接mysql

    node.js连接数据库有很多种,比如:mongoose,oracle,mysql...,我自己玩就选了一个我很熟悉的轻量级的mysql数据库尝试了一把,感觉不错. 首先要把mysql客户端安装好,官 ...

  6. Codeforces Round #233 (Div. 2) B. Red and Blue Balls

    #include <iostream> #include <string> using namespace std; int main(){ int n; cin >&g ...

  7. nohup命令浅析

    要将一个命令放到后台执行,我们一般使用nohup sh command & &都知道是放到后台执行这个命令,那么nohup是做什么的? 这就要从unix的信号说起,unix的信号机制可 ...

  8. FFT 模板

    #include<bits/stdc++.h> #define ll long long #define N 600005 using namespace std; inline int ...

  9. asp.net mvc4 HTTP Error 403.14

    asp.net mvc4项目部署到II&上时,出现HTTP Error 403.14 - Forbidden - The Web server is configured to not lis ...

  10. BZOJ3992: [SDOI2015]序列统计

    Description 小C有一个集合S,里面的元素都是小于M的非负整数.他用程序编写了一个数列生成器,可以生成一个长度为N的数列,数列中的每个数都属于集合S. 小C用这个生成器生成了许多这样的数列. ...