- 博客(32)
- 收藏
- 关注
RSS订阅原创 js之中的异步
异步1.知道哪部分代码是异步的;2.必须要知道异步程序之中的数据或者赋值的变量在哪里可用;js:单线程语言上面一行代码不执行结束,下面一行代码不会执行;单线程多线程js中存在很大需要长时间等待才会执行的代码;异步:在js中需要消耗大量时间等待某些程序执行的时候,会让正常程序继续执行.耗时较长的程序等会执行.耗时较长的程序我们把它称之为异步程序;js设定的异步:事件;...
2020-03-31 10:37:30
124
原创 ES6 let 与 const
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。let 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量，一旦声明，常量的值就不能改变。let 命令基本用法:{ let a = 0; a // 0}a // 报错 ReferenceError: a is not defined代码块...
2020-03-30 10:10:14
68
原创 ES6封装形变类，完成连续动画
``` index <script> //形变类 class Transform{ constructor(selector){ this.el=document.querySelector(selector); this.defaultTime=Transf...
2020-03-29 10:13:46
140
原创 ES6 环境搭建
目前各大浏览器基本上都支持 ES6 的新特性，其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。实例var a = 2;{ let a = 3; document.write(a); // 3}document.write('<br>');document.write(a); // 2在 Node.js 环...
2020-03-28 10:30:30
96
原创 JavaScript初学者必备的小知识（全面）
JS和HTMLl的结合方式：使用标签在head中加入在script中引入外部文件JS的数据类型和Java的一模一样，也是八大基本数据类型：byteshortintlongfloatdoublecharboolean（ true //数值等于1，false //数值等于0）字符串相加相减操作：var str="123"alter(str+1); //123...
2020-03-27 09:34:35
133
原创 js手写日历插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>日历</title>...
2020-03-26 16:42:34
192
原创 js写俄罗斯方块
效果：方块定位原理通过16宫格定位坐标，把坐标存到数组中去[[[2,0],[2,1],[2,2],[1,2]],//L[[1,1],[2,1],[2,2],[2,3]], //左L[[2,0],[2,1],[2,2],[1,1]],//凸[[2,0],[2,1],[3,0],[3,1]],//田[[2,0],[2,1],[2,2],[2,3]],//一[[2,0],[2,1],[...
2020-03-25 17:10:19
276
原创 js烟花爆炸的特效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
2020-03-24 08:46:39
577
原创 js消灭笑脸游戏
js消灭笑脸游戏如图：笑脸图片：代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小星星游戏</title></head><style> body{ ...
2020-03-23 18:25:56
266
原创 JavaScript中的事件处理程序（addEventListener）
EventTarget是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。DOM的事件操作，监听和触发，都定义在EventTarget接口，所有的节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象，XMLHttpRequest,AudioNode,AudioContext也部署了这个接口事件处理程序（addEventListener）addEventListener(...
2020-03-23 10:57:07
568
原创 js时钟效果
<!DOCTYPE html><html> <head> <meta charset='uft-8'> <title>史上最简单注释最全的原生js选项卡切换</title> <link rel="stylesheet" type="text/css" href="public/puclic.css" /&g...
2020-03-22 22:54:07
307
1
原创 CSS，JS实现3D切割轮播图
第一步：我们首先要通过CSS来完成一个基本布局，利用 transform-style: preserve-3d设置成3D。下面是CSS部分的代码* { margin: 0; padding: 0; box-sizing: border-box;}li { list-style: none;}/* 轮播图 */.homePage { width:...
2020-03-21 17:02:00
147
原创 ES6
文章目录1.简介2.ECMAScript 的背景3.ECMAScript 的历史4.ES6所学的内容1.简介ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支...
2020-03-20 16:50:31
59
原创 JavaScript系列之回调函数callback
JavaScript系列之回调函数callbackJavaScript回调函数的使用是很常见的，引用官方回调函数的定义：A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.解释得很明确...
2020-03-19 09:10:58
210
原创 JS设计模式之单例模式
在了解单例模式之前，我们要先搞懂什么是设计模式：比较官方的设计模式定义：就是在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。当然说白了就是：设计模式对某个特定场景下对某种问题的解决方案。所以，我们在合适的场景下可能会条件反射一样自然而然想到符合这种场景的设计模式。 所有的设计模式的共同目标都是：高内聚，低耦合。我们在日常的开发当中，都或多或少地接触了设计模式，但是很多时候不...
2020-03-18 18:31:16
103
原创 js中判断鼠标滚轮方向的方法
判断鼠标滚轮的方向，有着两个：一是谷歌、IE（这次IE没有搞特殊）；二是火狐 1、在谷歌、IE中，给我们提供了onmousewheel方法，该方法给我们提过了一个wheelDelta属性，该属性的返回值：正值与负值，其中正值表示滚轮向上滚动；负值表示滚轮向下滚动。 2、而在火狐中，给我们提供了DOMMouseScroll方法，该方法给我们提供了一个detail属性，该属性的返回值：正值与负...
2020-03-17 17:53:25
2012
原创 JavaScript拖拽效果
要实现JavaScript的拖拽效果，首先我们需要知道事件对象几个有关于实现拖拽效果的坐标获取事件对象 var e = e || window.event;根据需求需要用到的拖拽效果的坐标clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离)clientY:鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动条的距离)offsetX:鼠标点击位置...
2020-03-16 11:01:29
71
原创 ES6之Promise解决回调地狱
回调函数：在一个函数里面以形参的方式调用一个传递进来的函数。例如：function a(callback){ callback();}a(function(){})回调地狱：回调函数套用过多。 前端的ajax和jsonp内部充斥着大量的异步，为了能够拿到异步的数据，使用了大量的回调函数，来获取将来异步执行成功之后的数据。从一定程度上来说，回调地狱能解决问题，但是有缺点，或...
2020-03-15 16:44:55
201
原创 拒绝JavaScript，这三个CSS技巧你一定用的上
本文介绍三个非常棒棒的CSS技巧，完全可以在你的项目中代替JavaScript，一起来看看这些技巧吧。:active 伪类与CSS数据上报超实用超高频使用的 :empty 伪类用好 :only-child 伪类1:active伪类与CSS数据上报如果想要知道两个按钮的点击率，CSS开发者可以自己动手，无需劳烦JavaScript开发者去埋点：.button-1:active::af...
2020-03-14 20:11:12
89
原创 js的碰撞检测
二维平面内的圆和矩形碰撞原理找到圆心与矩形的最近点，计算该点到圆心的距离与圆的半径进行比较。方法首先定义最接近点的x坐标，y坐标，圆心坐标，矩形左边和上边到外容器的距离，矩形的宽高。var closest_x , closest_y; var circle_x ,circle_y;var rectangle_x , rectangle_y , rectangle_w , rectan...
2020-03-13 15:16:36
161
原创 js实现点赞效果
效果图如下HTML代码<div class="dian"> <div id="zan"> <img src="images/college_Likes_ic3.png" alt="很棒，赞一个"> <div id="num1">30</div> </div> <div id="cai">...
2020-03-12 17:17:30
1502
原创 vue中响应式是什么？怎么理解响应式原理?
vue中响应式是什么？概念：官网解释：Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。简而言之就是数据变页面变实现原理：Vue在组件和实例初始化的时候，会将data里的数据进行数据劫持(object.definepropty对数据做处理)。被解除过后的数据会有两个属性：一个叫getter，一个叫set...
2020-03-12 17:04:20
6030
4
原创 公告栏上下滚动效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>公告栏上下滚动</title> </head> <style type="text/css"> body { background: grey; } ...
2020-03-11 17:20:13
624
原创 ES6的解构赋值
ES6解构：es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称之为解构。解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。解构模型在解构中，有下面两部分参与：1.解构的源，解构赋值表达式的右边部分。2.解构的目标，解构赋值表达式的左边部分。解构赋值...
2020-03-10 17:38:09
113
原创 JS 防抖和节流
一部分的用户会有频繁的触发事件执行行为（比如连续点击，滑动滚动条等），这就很有可能导致界面卡顿，甚至浏览器的崩溃，防抖和节流就是来解决这种问题。1、防抖触发高频事件后n秒（n为自行设置）内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。注意，只有足够空闲的时间，才执行一次<div id="debounce" style="width: 100px;height: 100...
2020-03-08 14:20:24
146
原创 JS中各种尺寸的获取
JS中各种尺寸的获取页面上的尺寸获取clientWidth/clientHeight——视口大小：可见区域的宽度或高度，不包括border、水平滚动条、margin的元素的宽度或高度，只包括元素的内容区域和padding值。offsetWidth/offsetHeight——视觉大小：看得见的大小，不包括margin的元素的宽度或高度，只包括padding、border、水平滚动条的宽度...
2020-03-07 15:35:15
396
原创 cavans实现滚动弹幕
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- 弹幕文字 --><div class="video-x">...
2020-03-06 15:23:57
97
原创 如何自己写一个new方法去实例对象
我们经常会使用new方法去实例一个对象，这是封装好的方法，我们直接调用就可以了，那怎么自己去封装一个new方法呢？首先我们要知道①对象是由函数生成的，②对象有__proto__属性，函数有prototype属性，③生成对象时，对象的__proto__属性指向函数的prototype属性，这是我们在实现new方法时需要知道的三点（具体为什么这里不做详述）！那么如何去实现new方法，直接上图定义...
2020-03-05 11:16:32
790
原创 javaScript中冒泡排序的实现
冒泡排序就是两两相比较，然后将大的值放在后面。整体的思路就是：如何交换两个变量和要理清总共要比较多少次。1.如何交换两个变量？var a = 10;var b=22;var tmp =a; a = b; b= tmp;2.如何将数组中最大的值放到最后？这种情况只要循环遍历数组，然后两两比较，大的放后面即可，此种情况只需要遍历一次var arr = [9,8,7,6,5...
2020-03-03 15:28:56
83
原创 JavaScript 的闭包原理与详解。
JavaScript 的闭包原理与详解。JavaScript的闭包是一个特色，但也是很多新手难以理解的地方，阅读过不少大作，对闭包讲解不一，个人以为，在《JavaScript高级程序设计》一书中，解释的最为详尽，结合此书，表述一下我对JavaScript闭包的理解，希望能对新手有些帮助。闭包的例子var count=10;//全局作用域 标记为flag1function add(){ ...
2020-03-02 17:05:11
150
原创 事件冒泡和冒泡的阻止
事件冒泡概念：当元素触发了事件的时候，会依次向上触发所有元素的相同事件。事件冒泡的行为演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
2020-03-01 11:27:57
445
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人