JS中的混合模式
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中的混合模式的更多相关文章
- JS中有关对象的继承以及实例化、浅拷贝深拷贝的奥秘
一.属性的归属问题 JS对象中定义的属性和方法如果不是挂在原型链上的方法和属性(直接通过如类似x的方式进行定义)都只是在该对象上,对原型链上的没有影响.对于所有实例共用的方法可直接定义在原型链上这样实 ...
- 5.0 JS中引用类型介绍
其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...
- 【repost】JS中的异常处理方法分享
我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...
- JS中给正则表达式加变量
前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下. 一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...
- js中几种实用的跨域方法原理详解(转)
今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...
- 关于js中的this
关于js中的this this是javascript中一个很特别的关键字,也是一种很复杂的机制,学习this的第一步就是要明白this既不指向函数自身也不指向函数的词法作用域,this实际上是函数被调 ...
- 表值函数与JS中split()的联系
在公司用云平台做开发就是麻烦 ,做了很多功能或者有些收获,都没办法写博客,结果回家了自己要把大脑里面记住的写出来. split()这个函数我们并不陌生,但是当前台有许多字段然后随意勾选后的这些参数传递 ...
- JS中 call() 与apply 方法
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
- 在node.js中,使用基于ORM架构的Sequelize,操作mysql数据库之增删改查
Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...
随机推荐
- 解决ADT升级报错
方法一: 将https://dl-ssl.google.com/android/eclipse/ 改成 http://dl-ssl.google.com/android/eclipse/: 方法二: ...
- java基础内容
此文作java语法基础的起始页,负责总结和目录引导 想我开始接触java语法也有比较长时间了(大概是2015年十月份),到现在(2016-10-25)为止还未系统的学习总结基础语法,亡羊补牢吧,回过头 ...
- javaScript怪癖分析
最近了解到javascript中有些编程怪癖现象,很有意思,有必要总结一下: 1.未知变量名创建全局变量 在我们平常的编写javascript程序的时候,有的人写法不是很正规,在定义变量的时候 直接定 ...
- ural 1069. Prufer Code
1069. Prufer Code Time limit: 0.25 secondMemory limit: 8 MB A tree (i.e. a connected graph without c ...
- 【LINUX/UNIX网络编程】之简单多线程服务器(多人群聊系统)
RT,Linux下使用c实现的多线程服务器.这个真是简单的不能再简单的了,有写的不好的地方,还希望大神轻拍.(>﹏<) 本学期Linux.unix网络编程的第四个作业. 先上实验要求: [ ...
- BZOJ3189 : [Coci2011]Slika
通过离线将操作建树,即可得到最终存在的操作. 然后逆着操作的顺序,倒着进行染色,对于每行维护一个并查集即可. 时间复杂度$O(n(n+m))$. #include<cstdio> cons ...
- CSS抗锯齿 font-smoothing 属性介绍
CSS3里面加入了一个“-webkit-font-smoothing”属性. 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服. 加上之后就顿时感觉页面小清晰了. 淘宝也在用哦! 它有三 ...
- ACM 喷水装置(一)
喷水装置(一) 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 现有一块草坪,长为20米,宽为2米,要在横中心线上放置半径为Ri的喷水装置,每个喷水装置的效果都会让以 ...
- 【BZOJ】2212: [Poi2011]Tree Rotations
题意 给一棵\(n(1 \le n \le 200000)\)个叶子的二叉树,可以交换每个点的左右子树,要求前序遍历叶子的逆序对最少. 分析 可以发现如果交换非叶结点的左右子树,对子树内的交换无影响, ...
- 【BZOJ】1132: [POI2008]Tro
题意 给\(n(1 \le n \le 3000)\)个点,求所有三角形的面积和. 分析 首先枚举一个点,发现把其它点按照关于这个点的极角排序后第\(i\)个点关于前面\(1\)到\(i-1\)的点组 ...