JavaScript
文章平均质量分 73
We_jia
这个作者很懒,什么都没留下…
展开
-
JavaScript(三十八)继承
1、原型链继承,将父类的实例作为子类的原型,他的特点是实例是子类的实例也是父类的实例,父类新增的原型方法/属性,子类都能够访问,并且原型链继承简单易于实现,缺点是来自原型对象的所有属性被所有实例共享,无法实现多继承,无法向父类构造函数传参。2、构造继承,使用父类的构造函数来增强子类实例,即复制父类的实例属性给子类,构造继承可以向父类传递参数,可以实现多继承,通过call多个父类对象。但是构...原创 2019-06-29 22:50:03 · 307 阅读 · 0 评论 -
JavaScript(二十三)三级联动demo
三级联动效果展示图全部代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body>省原创 2019-03-07 22:04:10 · 201 阅读 · 0 评论 -
JavaScript(二十四)对象与计时器
过分过分的原创 2019-03-14 18:17:51 · 234 阅读 · 0 评论 -
JavaScript(三十六)js跨域方法
一、跨域概述JS跨域是指通过js在不同的域之间进行数据传输或通信,如Ajax向一个不同的域请求数据,或者通过JS获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,即为不同的域;网址是 http://baidu.com:8080?user=name&pwd=passwordhttp: 协议baidu.com 域名 (注意...原创 2019-03-15 12:13:17 · 255 阅读 · 0 评论 -
JavaScript(三十五)原生Ajax请求
一、AJax概述Ajax是一种快速创建动态网页的技术。通过后台与服务器进行少量数据交换,Ajax可使网页实现异步更新。即在不重新加载整个网页的情况下,对网页的某部分进行更新。二、区分同步与异步同步:通俗理解代码必须按顺序执行,后面代码必须等待前面代码执行完成才能执行,即当客户端发送请求到服务器端,服务器返回响应之前,客户端都处于等待,卡死状态。就是当你浏览页面的时候,你点击一个按钮...原创 2019-03-15 12:12:58 · 205 阅读 · 0 评论 -
JavaScript(十九)飞机大战demo
用JS实现飞机大战小游戏,效果图如下:说明:飞机产生子弹的速度并没有如此之快,为了录制gif图,缩短了时间;思路分析整体的思路用的是单例模式,使用的方法有构造函数,面向对象,继承等。一、创建地图,使用的是图片,封装类的方法二、创建用户飞机,使用封装类的方法1.在创建用户飞机之前需要创建一个飞机类,之后创建用户飞机和敌机就可以使用继承2.飞机用图片表示,故在构造飞机创...原创 2019-02-21 21:21:13 · 933 阅读 · 2 评论 -
JavaScript(二十)经典贪吃蛇demo
JS实现贪吃蛇小游戏,效果图如下: 思路分析:一、创建地图1.封装一个地图类function map() { this._map = null; //封装接受地图对象的属性 this._span=null; //创建地图的方法 this.createMap = function () { ...原创 2019-02-21 22:51:46 · 315 阅读 · 0 评论 -
HTML5之Web存储
HTML5 Web存储介绍使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.数据以 键/值 对存在, web网页的数据只允许该网页访问使用。俩种方式:sessionStorage和localStora...原创 2019-02-21 22:52:48 · 295 阅读 · 0 评论 -
JavaScript(十八)Js中的五种开发模式
一、工厂模式 function stu(){ var s=new Object(); s.name="张三"; return s; } stu();说明:在函数中定义对象,并定义对象的各种属性 调用函数,返回对象二、构造函数模式 function stu(){ //属性+方法 ...原创 2019-02-20 14:05:43 · 698 阅读 · 0 评论 -
JavaScript(二十六)倒计时demo
倒计时效果展示图全部代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .b {原创 2019-03-14 18:18:14 · 151 阅读 · 0 评论 -
JavaScript(二十七)钟表demo
钟表效果图展示全部代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * {原创 2019-03-14 18:18:32 · 249 阅读 · 0 评论 -
JavaScript(三十七)阻止表单的默认提交事件
一、将input 标签的type属性从type="submit"改为type=“button”二、将input标签改为button标签三、在事件中添加event.preventDefault()四、用onclick点击事件来return false注意是onclick内是return func();而不是简单的调用func()函数<!DOCTYPE html>...原创 2019-04-12 10:03:40 · 1257 阅读 · 0 评论 -
JavaScript(三十一)滑动图片轮播demo
滑动图片轮播的原理就是整体移动,也就是动态改变图片父容器的marginLeft值,来实现整体向左移动效果展示全部代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title>原创 2019-03-14 18:19:47 · 191 阅读 · 0 评论 -
JavaScript(三十四)正则表达式+表单验证demo
正则表达式知识点效果图展示采用的是正则表达式进行判断的一次性表单验证,点击注册以后才会判断格式是否都正确!全部代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title&g原创 2019-03-15 12:12:01 · 260 阅读 · 0 评论 -
JavaScript(三十三)表单验证demo2
表单验证填完每一项内容就进行判断,不符合要求就会报错效果展示全部代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>表单验证</title> <link原创 2019-03-14 18:20:11 · 197 阅读 · 0 评论 -
JavaScript(三十二)一次性表单验证demo
一次性表单验证所有信息填完以后,点击注册,若某一项内容不符合要求就会报错,若没有报错就会注册成功!效果展示全部代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title&g原创 2019-03-14 18:19:58 · 190 阅读 · 0 评论 -
JavaScript(三十)立体轮播图demo
立体轮播图效果展示HTML代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .block {原创 2019-03-14 18:19:26 · 445 阅读 · 0 评论 -
JavaScript(二十九)淡入淡出轮播图demo
简单版轮播图效果展示全部代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .b {原创 2019-03-14 18:19:02 · 172 阅读 · 0 评论 -
JavaScript(二十八)无缝滚动demo
无缝滚动效果展示图全部代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * {原创 2019-03-14 18:18:44 · 168 阅读 · 0 评论 -
JavaScript(二十五)数字字母汉字验证码demo
验证码效果图全部代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .block {原创 2019-03-14 18:18:02 · 279 阅读 · 0 评论 -
JavaScript(十二)淘宝图片放大镜案例
在电商网站中,产品的细节是必不可少的,这就需要产品的放大镜效果,那我们就来看一下放大镜是怎么做出来的呢?同时这也是我做的第一个JavaScript的小案例 嘻嘻。先看一下效果 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <titl原创 2018-12-29 21:32:35 · 459 阅读 · 0 评论 -
JavaScript(十一)事件的绑定
要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。在JavaScript中,有三种常用的绑定事件的方法:在DOM元素中直接绑定; 在JavaScript代码中绑定; 绑定事件监听函数。一、在DOM元素中直接绑定这里的DOM元素,可以理解为HTML标签。JavaScript...原创 2018-12-29 20:22:04 · 430 阅读 · 0 评论 -
JavaScript(八)事件
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。主要事件将 js里面的事件简单分为: 键盘事件 鼠标事件 窗口事件 移动端的事件(触屏) ...原创 2018-12-28 22:14:08 · 347 阅读 · 0 评论 -
JavaScript(七)DOM
一、DOM简介HTML DOM (文档对象模型)当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。二、查找 HTML 元素通过 JavaScript,来操作 HTML 元素。通过DOM,可访问 JavaScript HTML 文档的所有元素。如果要操作HTML元素,我们首先找到该元素。有三种常用方法来获取元素:通过 类名 找到 ...原创 2018-12-28 19:52:00 · 149 阅读 · 0 评论 -
JavaScript(五)条件语句
条件语句条件语句用于基于不同的条件来执行不同的动作。if 语句 只有当指定条件为 true 时,使用该语句来执行代码if...else 语句 当条件为 true 时执行代码,当条件为 false 时执行其他代码if...else if....else 语句 使用该语句来选择多个代码块之一来执行swit...原创 2018-12-27 21:12:18 · 269 阅读 · 0 评论 -
JavaScript(六)函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。其实也就是一种封装,即将一些语句封装到函数里面,通过调用的形式执行这些语句。一、定义函数俩种方式:一种是函数声明,另一种是函数表达式(1)函数声明function 函数名字 (){}function是一个关键字,和var、typeof一样都是关键字,后面要加空格。 函数名字的命名规定和变量的命名规定一样,只能...原创 2018-12-28 17:42:24 · 241 阅读 · 0 评论 -
JavaScript(四)循环语句
for循环案例一在控制台输出1~100:for (var i = 0; i < 10; i++) { console.log(i); }案例二输出1-100的和 var sum =0; for(i=1;i++;i<=100){ sum+=i; } console.log(sum);注意:所...原创 2018-12-26 22:32:18 · 1115 阅读 · 0 评论 -
JavaScript(三)运算符
算数运算符给定y=5运算符 描述 例子 结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x=10 / 除 x=y/2 x=2.5 % 求余数 (保留整数) x=y%2 x=1 一元运算符给定y=5++ 累加 ...原创 2018-12-26 10:50:08 · 343 阅读 · 0 评论 -
JavaScript(二)数据类型
数据类型六种数据类型 null、undefined、number、bool (boolean)、string,object。字符串 string字符串是存储字符(比如 "你好ya")的变量。字符串可以是引号中的任意文本,可以使用单引号或双引号。 function String(){ var x="haha"; console.log(x);...原创 2018-12-25 20:21:51 · 108 阅读 · 0 评论 -
JavaScript (九)事件冒泡
事件冒泡事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。也就是说在事件冒泡中,最内部的元素将首先触发其事件,然后是栈内的下一个元素触发该事件,以此类推,直到到达最外面的元素。案例web页面中有俩个div元素,一个位于另一个的内部。这俩个元素和document对象都指定了针对mousedown事件的事件处理程序。<!DOCTYPE html><...原创 2018-12-29 17:27:27 · 236 阅读 · 0 评论 -
JavaScript(十)事件的委托
JS中的事件委托或者是事件代理详解起因1、这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的;2、其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考;概述那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。那这是什么意思呢...转载 2018-12-29 19:18:53 · 194 阅读 · 0 评论 -
JavaScript(二十二)数据分页demo
数据分页效果图思路分析在每页上显示定量的数据,通过给button绑定点击事件来实现翻页的效果,利用面向对象的开发方法,将所需的变量定义,根据需要去调用,建立计算总页数函数、当前页函数、创建页面数据函数、创建点击类函数、创建页数显示函数进行元素之间的相互调用,实现在页面上显示初始页的值和实现下方翻页按钮的功能,最终实现数据分页的效果。HTML代码<!DOCTYPE ht...原创 2019-03-07 22:03:24 · 300 阅读 · 0 评论 -
JavaScript(二十一)淘宝购物车demo
效果图展示思路分析本案例有一个重要的知识点就是索引对索引 通过搭建桥梁1.实现点击按钮框 2.实现商品数量的加减 3.算每一件商品的总金额 小数点 保留俩位 ().toFixed (2) 4.算所有选中商品的总金额以及点+ -时的总金额 5.只选某几个商品的总金额 加单独事件 6.处理全选的问题 7.已选商品个数HTML代码<!DOCTYPE...原创 2019-03-07 22:00:09 · 1396 阅读 · 0 评论 -
JavaScript(十七)JS的四种继承方法
JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。JS面向对象知识中,继承是比较难比较抽象的一块内容,而且实现继承有很多种方法,每种方法又各有优缺点,需要对面向对象知识中的对象、原型、原型链、构造函数等基础知识掌握透彻,下面我们介绍四种继承的方法:原型链继承,构造继承,实例继承,组合继承。既然要实现继承,那么首先我们得有一个父类,代码如下: /*先定义一个父类对象*/ ...原创 2019-02-17 16:34:55 · 161 阅读 · 0 评论 -
JavaScript(十三)递归
递归当函数直接或者间接调用自己时,则发生了递归,它有俩个要素:递归边界 递归的逻辑 ——递归"公式"斐波那契数列我们知道Fibonacci数的递推公式为:F(0)=F(1)=1,F(n)=F(n-1)+F(n-2) n>=2;明显地给出了递归边界n=0或1的时候F(n)的值,和递归逻辑F(n)=F(n-1)+F(n-2),即递推公式<script> ...原创 2019-01-08 22:11:20 · 192 阅读 · 0 评论 -
JavaScript (十六) 计算器案例
做了一个简单的计算器案例,先看一下效果 将整体的思路,分成8个步骤 绑定click事件 解决 一开始是0 再输入小数点拼接 和其他值直接拼接的问题 限制小数点的个数 点击+-*/不显示在屏幕上 = 结果运算 eval 数组重置 运算 中间需要数组存储数据(动态数组) 例子: 9* / 清0 ac 删除 del <!DOCTYPE htm...原创 2019-01-11 12:53:18 · 397 阅读 · 1 评论 -
JavaScript(十五) 数组
一、数组的概念数组对象是使用单独的变量名来存储一系列的值。二、创建数组创建一个数组,有三种方法。下面的代码定义了一个名为 myNews数组对象1.常规方式:var myNews=new Array(); myNews[0]="name"; myNews[1]="age";myNews[2]="sex";2: 简洁方式:var myNews=new ...原创 2019-01-10 22:59:50 · 179 阅读 · 0 评论 -
JavaScript(十四) 字符串函数
JavaScript 字符串用于存储和处理文本。字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号; 字符串的索引从 0 开始,这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推; 可以使用内置属性 length 来计算字符串的长度;我们直接看案例来学习JavaScript的字符串函数,介绍常用的11个字符串函数。var a = "abc";var b = ...原创 2019-01-10 20:29:28 · 159 阅读 · 1 评论 -
JavaScript(一)变量
js简介JavaScript(Java脚本)是一种基于对象(Object)和事件驱动( Event Driven)并具有安全性能的脚本语言,使用JavaScript可以轻松的实现与HTML的交互操作,并且完成丰富的页面交互效果,它是通过嵌入或调入在标准的HTML语言中实现的,它的出现弥补了HTML的缺陷,是java与HTML折衷的选择。基于对象:指的是程序的内部已经为用户提供好了若干个...原创 2018-12-25 19:14:05 · 521 阅读 · 0 评论