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(二)-搭建Jenkins环境和配置第一个Job
安装方式一(直接启动): 1.下载最新的版本(一个 WAR 文件).Jenkins官方网址: http://Jenkins-ci.org/ 2.运行 java -jar jenkins.war(需要运 ...
- # asp.net core 1.0 项目结构
1.环境 开发:VS2015 平台:window 7 2.解决方案级别结构 创建一个ASP.NET 5 Template Empty项目: src:存放项目(projects) global.json ...
- COGS1752 [BOI2007]摩基亚Mokia(CDQ分治 + 二维前缀和 + 线段树)
题目这么说的: 摩尔瓦多的移动电话公司摩基亚(Mokia)设计出了一种新的用户定位系统.和其他的定位系统一样,它能够迅速回答任何形如“用户C的位置在哪?”的问题,精确到毫米.但其真正高科技之处在于,它 ...
- 每天一个linux命令---telnet
执行telnet指令开启终端机阶段作业,并登入远端主机. telnet的命令的格式: telnet ip port 例1: 建立连接不成功 [richmail@portal bin]$ telne ...
- 几个Windows电脑小技巧
1. 为cmd命令提示符设置默认的初始路径: 到开始菜单-附件-属性 里面有起始位置选项 其中%HOMEDRIVE%%HOMEPATH%就代表起始位置 如想每次键cmd进入命令提示符后的初始位置是 ...
- BZOJ3485 : [Baltic2012]peaks
首先将每个平原缩成一个点,建出图,相邻两个点之间的边权为它们高度的较小值. 用Kruskal算法求出这个图的最大生成树,每次合并两个连通块时新建一个点指向它们,得到一棵有根树. 对于每个点,求出它子树 ...
- BZOJ3934 : [CQOI2015]标识设计
轮廓线插头DP. 设$f[i][j][a][b][c][d][e]$表示考虑到了$(i,j)$,轮廓线上3个下插头的位置分别为$a,b,c$,是否有右插头,已经放了$e$个$L$的方案数. 然后直接D ...
- 纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
- Codeforces Beta Round #3
A题,水题,还是无法1Y. B题,题意是类似背包的问题,在v的容量下,有1重量和2重量的,如果达到价值最大. 贪心,写的很恶心.看着数据过了. 奇数的时候,先选一个1.之后然后1+1 和 2 比较就行 ...
- android中利用Socket实现手机客户端与PC端进行通信
1. 项目截图