- 博客(26)
- 收藏
- 关注
RSS订阅原创 DOM事件模型
DOM事件模型dom 0级事件模型1.行内事件:在标签中写事件,点击后触发 例如：<input id="btn" type="button" value="" onclick="alert('thanks');" >2.普通事件:可以用js代码添加事件监听函数document.getElementById("myButton").onclick = function () {alert('thanks');}dom 1级事件模型DOM级别1于1998年10月1日成为W3C推
2021-05-31 11:57:23
172
原创 ES6 Set和Map方法
ES6中的SetES6中提供了Set数据容器，这是一个能够存储无重复值的有序列表。创建set通过new Set()可以创建Set，然后通过add方法能够向Set中添加数据项：let set= new Set();set.add(20);set.add('20');console.log(set.size);//2 Set内部使用Object.is()方法来判断两个数据项是否相等，唯一不同的是+0和-0在Set中被判断为是相等的。可以使用数组来构造Set，或者说具有迭代器的对象
2021-05-24 19:34:42
182
原创 反射和代理
什么是反射和代理？反射 :ES6 的反射 API 以 Reflect 对象的形式出现，对象每个方法都与对应的陷阱函数同名，并且接收的参数也与之一致。代理 :代理是用来替代另一个对象（target），JS 通过new Proxy()创建一个目标对象的代理，该代理与该目标对象表面上可以被当作同一个对象来对待。Reflect 对象有许多的方法，下面我们就来看一看：1.Reflect.set() set就是设置该对象的属性值 有三个参数target: 我们需要操作的对象。name: 我们需要设置该对象
2021-05-24 19:01:55
189
原创 迭代器与生成器
1.迭代器迭代就是将一种数据结构按照一定的顺序不断的取出的过程就叫迭代。js中规定一个对象中含有next方法，并且这个next方法返回一个对象 ，那么我们就认为这个对象为迭代器。迭代和遍历是有区别的，遍历是运用循环将数据一次性取完，而迭代是将数据依次取出，一次只能去到一个数据。自定义迭代器 var obj = { next() {// 用于拿到后面的数据 return { value : "Hello World"
2021-05-18 15:27:24
112
原创 Promise 对象
1.什么是Promise对象promise是ES6所提供的的，Promise 对象代表了将要发生的事件，用来传递异步操作的消息。主要可以解决回调地狱的问题2.promise的优缺点
2021-05-17 18:52:14
929
原创 对象的解构赋值
对象的解构赋值上一篇中我们介绍了数组的解构赋值，同样的解构赋值也可以运用到对象里。var {obj,bar} = {obj:"x",bar:"y"}console.log(obj)//xconsole.log(bar)//y数组的解构赋值中，变量和值是一一对应的。但是在对象的解构赋值中变量必须与属性同名才能够赋值成功var {obk} = {obj:"x"};console.log(obk);//undefined如果不一致，那就必须要使变量名成为属性名的值，这里属性名还是相同的，只是把
2021-05-11 19:29:34
297
原创 数组的解构赋值
数组的解构赋值 在ES6中允许按照一定的模式从数组或者对象中进行取值，对变量进行赋值，这个过程就是解构赋值// 以前我们进行变量赋值时是这样做的var i = 1;var l = 2;//在ES6中我们可以这样进行赋值let [x,y,z] = [1,2,3]console.log(x);//1console.log(y);//2console.log(z);//3在本质上这属于一种“模式匹配”，也就是说只要等号两边的模式一样可以进行赋值let [[x],[y,[z]]] = [[
2021-05-10 19:59:38
2513
原创 ES6 let与const
在ES6中新增了两种新的声明方式就是let和const ，所以今天我们就来了解一下它们。一.letlet声明有以下几个特点：1.不能进行重复声明 let a = 4; var a = 4; console.log(a); 这时会报语法错误，因为let不能重复声明同一个变量名2.不存在变量提升 //我们都知道var声明的变量是会被提前的 console.log(a); var a = 4; console.log(b); let b = 3这时a输出undefin
2021-04-26 00:08:36
80
原创 ajax解析
一、 ajax1.什么是ajaxajax：是Asynchronous JavaScript And XML的缩，表示的是异步的JavaScript与XML，ajax可以实现网页的动态更新，而且是在不刷新整个页面你的情况下，对部分内容进行更新。2.同步与异步区别同步：当用户发送请求时，等待服务器响应，在这期间客户端其他代码都无法正常运行。异步：当用户发送请求时，等待服务器响应，在这期间客户端其他代码都可以正常运行。二、实现ajax的五个步骤1.创建请求体 var xhr = new XMLHt
2021-04-26 00:07:58
140
原创 雨滴效果
预览图:首先在body里面写一个canvas标签设置canvas标签的样式#canvas{ background-color: #000; display: block; }js代码如下：先要获取画布和画笔 ,然后然画布的宽和高为页面的宽高 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var width = c
2021-04-05 21:21:24
127
原创 canvas实现动态时钟
用canvas实现动态时钟效果：首先我们在body中写canvas标签 给它设置宽度和高度<body> <canvas id="canvas" width="600" height="600"></canvas></body>然后我们设置一下canvas的样式<style type="text/css"> *{ margin: 0; padding: 0; } #canvas { /* bo
2021-04-05 21:20:56
317
原创 2048小游戏
在写2048之前我们看一下原理是怎么实现的。1.首先我们要有一个4X4的方格 ，里面要放我们的数，我们可以把它看成一个二位数组。2.在数组的任意两个位置随机出2和4，把随机出来的数渲染到我们的页面上3.绑定键盘事件，让键盘的上下左右可以控制页面4.判断上下左右是否有相同的数，如果有则相加，没有就只移动。5.当上下左右都没有相同的数可以相加时游戏结束下面就来写具体代码。画小方格/*画小方格我们只需要16个div就可以了 样式大家可以自己设置，主要是 给min_box设置浮动就可以了*/.
2021-04-05 21:20:34
629
2
原创 原型与原型链
原型1.prototype在JavaScript中每一个函数都有一个prototype属性，这个属性指向函数的原型对象，例如 function A() {} A.prototype.age = "18"; var a = new A(); console.log(a.age)//18上述例子中，函数的prototype指向了一个对象，而这个对象正是调用构造函数时创建的实例的原型，也就是a的原型。原型的概念：每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象
2021-04-05 21:20:10
93
原创 作用域与作用域链
作用域1.什么是作用域 作用域就是在代码运行时某些特定的变量、函数和对象能否被访问，也就是说，作用域决定了代码块中声明的变量和其他资源的可见性。在ES6之前我们所了解到的就是全局作用域和局部作用域，这里的局部作用域就是函数作用域，ES6之后就有了块级作用域，可通过let和const关键字来体现。function Fn() { var a = 2;}Fn();console.log(a);//在控制台打印a的时候会报错，a is not defined 说a没有定义 从这个例子中我们就
2021-03-13 17:12:22
104
原创 DOM简单应用
预览图这里只展示静态的图片，动态的效果就用代码演示了；1先要在文档中显示100个小方块<ul id="father"> <li style="top: 0px;left: 0px;"></li> <li style="top: 0px;left: 100px;"></li> <li style="top: 0px;left: 200px;"></li>
2021-03-07 14:44:19
127
原创 JS操作BOM和DOM
一、JS的实现包含三个部分1.ECMAScript(核心) 描述了JS的语法和基本对象。2.浏览器对象模型（BOM）与浏览器交互的方法和接口3.文档对象模型 （DOM）处理网页内容的方法和接口二、BOMBOM 表示的是 Browser Object Model，浏览器对象模型，BOM的核心的对象是Window对象： 由于BOM的window包含了document，因此可以直接使用window对象的document属性，从window.document我们可以知道，BOM中wind
2021-03-06 17:57:08
216
原创 HTML+JS+CSS实现动态时钟
提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as p
2021-01-28 20:05:18
585
原创 JS中的循环结构
在JS中有三种循环体系，分别是do while 、while和for循环。一、do while在do while循环语句中，不管如何都会先执行一遍do{ }里面的代码，然后再条件判断。 do{ //条件满足的代码 }while(条件)我就直接拿例子演示：如输出100以内的偶数 var i = 1; //声明变量 do { i++; //变量自增 if (i % 2 == 0){//执行语句 document.write(i + "<
2021-01-19 19:15:00
208
原创 JS实现简单放大镜效果
预览图 首先我们要在body里面写我们需要的标签,用img引用外部图片<body> <div class="box"> <img src="img/cy.jpg" alt="" width="100%"> <div class="clicr"> <img src="img/cy.jpg" alt="" > </div>
2021-01-14 19:13:36
449
1
原创 CSS3登录界面动画
预览图首先我们可以给页面进行一下规划，英文字母我们可以给一个h标签，下面的就可以用三个input标签写在form表单里面，后面的动画我们可以用ul li 也可以用div，这里我就用ul li写了<body> <div class="father"> <div class="son"> <h2>Sometimes</h2> <form action="">
2021-01-03 22:42:32
674
原创 iframe应用
前言这里介绍一下css中其他的选择器1.群组选择器群组选择器就是选择多个ld名 类名，然后中间用逗号隔开 <style>.span,#p,.div{}</style><div class="div"></div><p id="p"></p><span class="span"></>2.后代选择器 2.读入数据总结提示：这里对文章进行总结：例如：以上就是今天要讲的内容，
2020-12-23 19:05:55
175
1
原创 CSS基础选择器
前言每一条css样式定义由两部分组成，形式如下： 选择器{样式} ，在{}之前的部分就是“选择器”。“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。一、基础选择器1.通配符选择器 二、复杂选择器总结...
2020-12-23 19:02:46
203
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人