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 ...
随机推荐
- Jenkins启动时报错:java.net.BindException: Address already in use: bind 解决方法
下载jenkins.war包后,进入Jenkins.war包目录下,运行java -jar jenkins.war时报端口被占用的错误:java.net.BindException: Address ...
- The 2015 China Collegiate Programming Contest H. Sudoku hdu 5547
Sudoku Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total Subm ...
- UVA 393
The Doors Description You are to find the length of the shortest path through a chamber containing o ...
- js 图片处理 Jcrop.js API
引入jquery.Jcrop.min.css和jquery.Jcrop.min.js 参数/接口说明 options 参数说明 名称 默认值 说明 allowSelect true 允许新选框 all ...
- 深入浅出 - Android系统移植与平台开发(三)- 编译并运行Android4.0模拟器
作者:唐老师,华清远见嵌入式学院讲师. 1. 编译Android模拟器 在Ubuntu下,我们可以在源码里编译出自己的模拟器及SDK等编译工具,当然这个和在windows里下载的看起来没有什么区别 ...
- Ubuntu root密码修改
安装完Ubuntu后忽然意识到没有设置root密码,不知道密码自然就无法进入根用户下.到网上搜了一下,原来是这麽回事.Ubuntu的默认root密码是随机的,即每次开机都有一个新的root密码.我们可 ...
- jsp统测
. 解析:B/S架构并不是C/S架构的替代品,有些程序例如大型的网络游戏一般使用的是C/S架构 . 解析:web-inf目录中的文件不能被客户端直接访问.所以正确答案为c 解析:jsp的是jsp内置 ...
- TLV简介
引子: 前段时间在项目中第一次接触TLV,项目中用这种格式来传输图片,语音等. 关于TLV TLV是一种可变的格式,意为:Type类型, Lenght长度,Value值.Type:该字段是关于标签和编 ...
- RecyclerView使用时遇到的问题
一.概述 二.常见问题: 1.如何为RecyclerView的Item设置点击事件? 1.1 问题描述 类似于下列方法 RecyclerView.setOnItemClickListener(OnCl ...
- [LintCode] Shape Factory 形状工厂
Factory is a design pattern in common usage. Implement a ShapeFactory that can generate correct shap ...