2017年04月_画一生情入颜容

原创 CSS3动画实现背景滚动

在上一个模仿微信打飞机的游戏中，在敌机掉落下来时，如果背景图片也可以一直无穷滚动的话，那么效果就会更好。现在就是要利用CSS3来实现一张图片的无穷滚动。首先了解一下CSS3的动画属性： ①.animation-name: 用于将动画（@keyframes 语法）附加到元素上； ②. animation-duration: 定义动画完成一次迭代（从0%到100

2017-04-26 16:28:08 8150

原创案例十三、模仿微信打飞机游戏

首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。 1.生成自己，且可以通过左右键来进行左右移动。//生成自己，且可以左右移动//控制飞机向右移动的函数 function moveRight(event){ context.clearRect(aligh,100,47,47); //防止飞机移除背景外 if(aligh < 260){ v

2017-04-25 20:27:29 2211

原创案例十二、JavaScript实现无穷滚动加载数据

首先实现滚动要借助onscroll事件处理程序。无穷滚动就是滑动滚动条，实现数据块的无穷加载。我们以瀑布流的布局来实现无穷加载。瀑布流就是一些等宽不等高的数据块布局。在滚动条下拉时，它会进行加载。那么问题就是在判断什么时候应该加载。我们首先应该明白瀑布流布局的特点。它将下一个图片总是放在当前列数最低的那一列。所以当加载最后一个蓝色的图片时，也就无疑是最后一个图片了。所以要判断该

2017-04-17 20:12:07 3378

原创将按钮按照value值排序，并且点击按钮后值1s自减一

body中的代码和CSS<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } input{ padding: 20px 30px;

2017-04-12 21:10:39 410

原创 JavaScript中typeof和instanceof用法笔记

typeof一般用来获取一个变量或者表达式的类型。 > typeof undefined 'undefined' > typeof null // well-known bug 'object' > typeof true 'boolean' > typeof 123 'number' > typeof "abc" 's

2017-04-12 20:38:26 384

原创确定实例与原型之间的关系

可以使用两种方式确定实例与原型之间的关系： 1. instanceof操作符 2. isPrototypeOf()方法先来一段代码：function SuperType(){ this.property = true; }//在SuperType函数的原型链上创建实例共享方法 SuperType.prototype.getSuperValue = function(){ return

2017-04-12 20:03:00 1457

原创谈谈对原型链的理解

许多OO语言支持两种继承方式：接口继承和实现继承。接口继承只继承函数签名，实现继承则继承实际的方法。由于函数无签名，在JavaScript中无法实现接口继承。所以只能实现方法继承。实现继承主要依赖原型链。什么是原型对象。我们知道每个构造函数一旦创建都有prototype指针指向它的原型对象（构造函数.prototype）。而原型对象（构造函数.prototype）会默认生成一个const

2017-04-12 19:31:16 14184

原创 [编程题] 字符串编码

给定一个字符串，请你将字符串重新编码，将连续的字符替换成“连续出现的个数+字符”。比如字符串AAAABCCDAA会被编码成4A1B2C1D2A。输入描述: 每个测试输入包含1个测试用例每个测试用例输入只有一行字符串，字符串只包括大写英文字母，长度不超过10000。输出描述: 输出编码后的字符串输入例子: AAAABCCDAA输出例子: 4A1B2C1D2Aimport java.u

2017-04-10 23:22:00 856

原创浅谈对 this 指向的理解

在《javaScript语言精粹》这本书中，把 this 出现的场景分为四类，简单的说就是：有对象就指向调用对象；没调用对象就指向全局对象；用new构造就指向新对象；通过 apply 或 call 或 bind 来改变 this 的所指。首先理解这句话：this对象是在运行时基于函数的执行环境绑定。接下来看第一种情况： 1. 有对象就指向调用对象var name = "this is glo

2017-04-10 21:40:44 787

原创 JavaScript创建对象---工厂模式

在介绍寄生构造函数模式时，先来介绍一下工厂模式 1.工厂模式工厂模式是软件工程领域中一种广为认知的设计模式，这种模式抽象了具体创建对象的过程，因为在ECMAScript中无法创建类。开发人员就发明了一种函数，用函数来封装以特定接口创建对象的细节。function createPerson(name, age, job){ var o = new Object(); o.name

2017-04-10 14:17:46 395

原创组合使用构造函数模式和原型模式

创建自定义类型最常见的就是组合使用构造函数模式和原型模式。构造函数模式用于定义实例的属性。而原型模式我们上节了解到，主要是用于定义公用的属性和方法。首先看一下构造函数模式创建js对象.1. 构造函数模式构造函数模式可以用来创建特定类型的对象function Person(name, age, job){ this.name = name; this.age = age;

2017-04-10 13:47:55 646

原创 JavaScript创建对象 —— 原型模式

我们创建的每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，这个对象我们叫它原型对象。而这个原型对象的用途是包含可以由特定类型的所有实例共享的属性和方法。它所包含的属性和方法可以被所有对象实例共享。所以说，在定义构造函数时，不必在其中定义属性和方法，而是在原型对象中定义。如下： function Person{};Person.prototype.name =

2017-04-09 21:01:24 391

原创理解立即调用函数(function(){ ...})();

首先来看一个示例：var img = document.getElementsByTagName('img'); for(var i = 0; i< img.length; i++){ img[i].onmouseover = function(){ img[i].style.width = 185 +'px';

2017-04-08 17:11:58 427

原创案例十一、使用jQuery动态追加页面数据以及事件委托

我们要执行的任务是页面起初有一部分图片，我们在底下有一个More Photos的链接，点击后，向当前页面后加载一部分图片，再点击该链接，继续加载，直到将我们列出的页面加载完成，此时该链接也消失了。首先效果图如下：这个只截取了最底下的一部分页面。在鼠标悬停在图片上时，还会有文字出现，鼠标移出时文字消失。我们现在要做的就是点击底下的MorePhotos链接时，再加载一

2017-04-06 22:45:25 1016

原创案例十、JavaScript瀑布流布局

先说一下什么是瀑布流布局。就是一堆等宽不等高的数据块组成的页面，如图：现在好多网站都采用这种瀑布流布局，如蘑菇街。美丽说等等。首先要实现它就要明白它是怎样排列的。每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的。。第一行就是按顺序排列，其他的数据块都是在每一列中挑选出最低的那一列依次排进去的。首先实现框架。<div id = "main"> <div class

2017-04-05 22:47:36 13489 1

原创原生js的JSONP跨域请求

但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。JSONP跨域GET请求是常用的解决方案。在进行一些比较深入的前端操作时，不可避免的要进行跨域操作，但是基于安全的原因，浏览器是存在“同源策略“这个机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。即对js能够访问的页面的内容加以限制，只能访问与包含它的文档在同一域中的内容。为了能够访

2017-04-04 21:29:02 4810

原创案例九、jQuery游戏，来抽个奖吧

今天要写的是，利用jQuery写一个抽奖的案例，页面包含四个组件，两个按钮分别是开始和停止的按钮。两个box，分别盛放人员和奖品。当点击开始按钮时，人员不停地进行切换。抽奖的box’中显示等待抽奖结果。当按下停止按钮时，两个盒子分别显示人员名，和所中的奖品。页面的效果图如下：可能页面没有那么好看。我们主要实现的是功能首先在body中定义组件<body><input type = "button

2017-04-01 21:58:24 682

csdn_zsdf的博客