- 博客(28)
- 收藏
- 关注
RSS订阅
原创 JS原生实现多个小球碰撞反弹
实现思路：小球的移动，是通过改变小球的left和top值来改变，坐标分别为(x,y)当x/y值加到最大，即加到父级的宽度或者高度时，使x值或者y值减小，同理当x值或者y值减到最小时，同样的使x值或者y值增加，以上的思路可以实现小球的碰壁反弹小球与小球之间的碰撞，要判断小球在被撞小球的哪个方向，从而判断小球该向哪个方向移动，同样的改变小球的坐标值，来实现小球的反弹<!do...
2017-07-17 09:03:04
7018
2
原创 cookie的操作
function addCookie(cookieKey, cookieValue, overSeconds) { document.cookie = cookieKey + "=" + cookieValue + ";max-age=" + overSeconds;}function deleteCookie(cookieKey) { //方式一 document.cookie = ...
2019-07-18 14:09:39
184
原创 JS - 正则表达式字符串中必须含有数字，字母，下划线(强密码)
使用正则表达式中的正向预查/(?=.*[A-Za-z])(?=.*[\d])(?=.*_)/
2019-03-01 13:49:19
2537
原创 Babel中关于Present，Plugin，Stage-x的区别及联系
首先先看一个配置文件.babelrc{ &amp;amp;amp;quot;presets&amp;amp;amp;quot;: [ &amp;amp;amp;quot;env&amp;amp;amp;quot; &amp;amp;amp;quot;react&amp;amp;amp;quot;, &amp;amp;amp;quot;stage-
2019-01-22 15:01:11
1159
原创 JS网红面试题-setTimeout与循环闭包
先看一段代码for (var i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, i * 1000);}输出结果是什么？？ 肯定有好多人以为是 0 1 2 3 4这么想当然是错的，因为setTimeout()执行的是一个异步的操作，那能异步到什么地步呢，就是当所有的代码执行完毕之...
2019-01-17 20:20:18
361
1
原创 React中markdown编辑器react-mde多版本的使用
在项目开发经常会用到markdown编辑器，来实现丰富的文档操作，今天来说一下react-mde的使用方法先说一下常用的react-mde
2019-01-17 19:58:50
1390
原创 在dva框架中实现轮询
const delay = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms))
2019-01-16 18:58:43
2971
5
原创 移动端1px边框问题
.border-1px{ position: relative; &::before{ content: ""; position: absolute; left: 0; top: 0; width: 200%; border:1px solid red; color: red; height: 200%; -...
2019-01-14 13:38:09
113
原创 JS函数防抖与节流
先介绍概念，函数防抖与节流函数防抖概念某个函数在n秒后执行，假如在n秒之内又有事件被触发了，则重新开始计时。例如：人进入电梯之后，电梯门从人进入到关上门再到开始上下运行中间花费的时间为10秒，假如在这10秒之内又有其他的人进入电梯了，那之前的时间计算就会被终止并重新开始计算。也就是在某段时间之内一个事件被触发多次，只有最后一次会被执行适用场景：表单提交时假如用户疯狂的快速多次点击提交按钮...
2019-01-02 19:52:01
490
原创 Express框架的使用教程
Express框架的使用简单教程express是一个开源的框架，大多数公司也在使用这样的框架作为Node中间层或者是服务端使用，下面来简单的讲解一下express的使用，包括(框架的搭建，数据库的操作，服务端的渲染等等)...
2018-12-17 10:49:12
10620
原创 JS原型及原型链
const foo = new Foo();console.log('foo:', foo);// 指向该对象的原型// 对象的__proto__指向自己构造函数的prototypeconsole.log('foo.__proto__:', foo.__proto__);console.log('Foo.prototype:', Foo.prototype);consol...
2018-10-18 09:19:58
139
原创 ES6中箭头函数的指向
今天来说说箭头函数中this的指向，这个问题曾经也困扰了不少人。先看一段代码var a = 1;var obj = { a: 2, foo: function () { console.log(this.a); }}obj.foo(); // 最终的结果2var a = 1;var obj = { a: 2, foo:...
2018-05-28 10:55:15
354
原创 JS网红面试题-setTimeout与循环闭包
先看一段代码 for (var i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, i * 1000);}输出结果是什么？？ 肯定有好多人以为是 0 1 2 3 4这么想当然是错的，因为setTimeout()执行的是一个异步的操作，那能异步到什么地步呢，就是当所有的代...
2018-04-21 19:55:18
3360
2
原创 JavaScript变量提升详解
话不多说，先看一段代码a = 2;var a;console.log(a)结果是 2console.log(a);var a = 2;结果是undefined现在来答疑解惑按照JS代码的执行顺序应该是从上到下一行行的执行的，真的是这样吗？？其实这不是完全正确的。 正确的思路是，包括变量，函数在内的所有声明都会在任何代码在执行前首先被处理。 当你看...
2018-04-21 09:45:36
299
原创 如何从零开始创建React项目
首先运行环境-node是必须的，需要下载安装node的运行环境，官网下载即可点击打开链接 安装好了node之后，自然的就有了npm，npm可以帮助开发人员，下载React项目必用的一些包，当然也可使用yarn，本文使用的是yarn 全局安装create-react-app npm install -g create-react-app create-react-app mya...
2018-01-13 22:56:15
11481
1
原创 JS继承之间的
JS中两个类父类(Parent)和子类(Child)Parent类代码入下 function Parent(name, age) { this.name = name; this.age = age; this.age = age; } Parent类的方法如下(使用原型的变形的方式) Parent.prototype.run = function() { ...
2017-09-06 17:45:25
447
原创 canvas实现粒子星空连线
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>离子星空</title> <style type="text/css"> * { margin: 0; ...
2017-08-23 19:47:06
5925
2
原创 浅谈HTML5中canvas中的beginPath()和closePath()
简介：在HTML5中有一个很重要的阶段就是canvas，canvas中提供了大量的API，能使开发人员利用canvas绘制许多需要的图形，在canvas的绘制中有一个方法叫做beginPath()方法和closePath()方法，接下来详细介绍一下这两个方法，以及他们之间的联系1、beginPath<!DOCTYPE html><html> <head&...
2017-08-20 19:31:56
4299
原创 JavaScript中添加、删除、获得cookie值的函数封装
//封装cookie的操作 //功能一：添加cookie的操作 function addCookie(cookieKey,cookieValue,overSeconds){ document.cookie = cookieKey +"="+cookieValue +";max-age="+overSeconds; } //功能二：删除cookie的操作 function deleteC...
2017-07-27 10:43:17
394
原创 JS贪食蛇代码优化
注意：若是用手机端，需要自行引入touch.js<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,
2017-07-25 23:59:54
365
原创 纯CSS实现小车动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>running_Car</title> <link rel="stylesheet" href="CSS/ani
2017-07-23 15:54:40
1274
原创 JS事件 - 微信摇一摇原理
实现原理：1.微信摇一摇事件需要有硬件支撑，必须要求手机中有陀螺仪2.在JS中给window添加ondevectionmotion事件。该事件在手机晃动，即手机中的陀螺仪发生旋转，该事件会触发3.触发ondevectionmotion事件，会产生一个事件对象，通过该对象中的键值(accelerationIncludingGravity)来获得该重力加速器对象4.重力加速器对象中含有...
2017-07-21 19:13:13
802
原创 JS原生实现自定义滚动条
实现思路：1.外层设置一个div,在外层的div里面设置一个特别高的div(高度为外层5个div的高度)，在高的div里面设置5个div，每个div的高度，都和父级的高度相同2.在外层div的右侧边框以里自定义一个滚动条，（本人用div设置样式作为滚动条）3.最外层的div添加onmousewheel事件，使用e.wheelDelta来获取每次滑动的距离，若为正数则向上滑动，将每次增加...
2017-07-21 13:06:28
1422
原创 JS实现无限加载瀑布流
1.在外层的div中，插入4个ul，ul左浮动2.每次在创建节点之后，插入节点之前，要获取每个ul的高度，找到最小的高度，然后将新创建的li节点插入该ul中3.当文档的高度 - 文档的可视高度 <= 鼠标的滑动距离时 开始继续创建节点<!DOCTYPE html><html> <head> <meta charset="UTF...
2017-07-21 11:03:22
555
原创 JS中几种获取对象宽度和高度的区别
在JS中有多种获取高度和宽度的方式，今天整理一下1、clientWidth / clintHeightclientWidth = 元素的宽度 + 元素的paddingLeft + 元素的paddingRightclientHeight = 元素的高度 + 元素的paddingTop + 元素的paddingBottom注意：如果该元素上存在上下滑动滚动条，则clientWidth...
2017-07-18 19:21:25
2061
原创 浏览器嗅探
前端开发会用到不同的浏览器，以下代码通过使用Bom中的navigator对象来实现对浏览器的嗅探，达到兼容不同浏览器的目的 if(window.navigator.userAgent.indexOf("Chrome") != -1){ alert("谷歌浏览器"); }else if(window.navigator.userAgent.indexOf("Firefox") !...
2017-07-17 17:54:43
1452
原创 JS原生实现多个小球跟着鼠标移动
每个小球移动都有自己的坐标，小球移动的同时，需要进行坐标传递，将第一个坐标依次传递给最后一个坐标，来实现小球跟着移动的效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>小球运动</title> <style
2017-07-16 17:30:39
2874
1
原创 JS插件swiper的使用
1、需要到swiper官网中下载swiper.min.js和swiper.min.css2、在文档的<style></style>标签对中使用link标签引入文件swiper.min.css<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css"/>3、在文档的&
2017-05-28 14:33:06
1469
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人