- 博客(28)
- 收藏
- 关注
原创 JS原生实现多个小球碰撞反弹
实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y值增加,以上的思路可以实现小球的碰壁反弹小球与小球之间的碰撞,要判断小球在被撞小球的哪个方向,从而判断小球该向哪个方向移动,同样的改变小球的坐标值,来实现小球的反弹<!do...
2017-07-17 09:03:04 7150 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 218
原创 JS - 正则表达式字符串中必须含有数字,字母,下划线(强密码)
使用正则表达式中的正向预查/(?=.*[A-Za-z])(?=.*[\d])(?=.*_)/
2019-03-01 13:49:19 2570
原创 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 1207
原创 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 405 1
原创 React中markdown编辑器react-mde多版本的使用
在项目开发经常会用到markdown编辑器,来实现丰富的文档操作,今天来说一下react-mde的使用方法先说一下常用的react-mde
2019-01-17 19:58:50 1469
原创 在dva框架中实现轮询
const delay = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms))
2019-01-16 18:58:43 3045 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 124
原创 JS函数防抖与节流
先介绍概念,函数防抖与节流函数防抖概念某个函数在n秒后执行,假如在n秒之内又有事件被触发了,则重新开始计时。例如:人进入电梯之后,电梯门从人进入到关上门再到开始上下运行中间花费的时间为10秒,假如在这10秒之内又有其他的人进入电梯了,那之前的时间计算就会被终止并重新开始计算。也就是在某段时间之内一个事件被触发多次,只有最后一次会被执行适用场景:表单提交时假如用户疯狂的快速多次点击提交按钮...
2019-01-02 19:52:01 527
原创 Express框架的使用教程
Express框架的使用简单教程express是一个开源的框架,大多数公司也在使用这样的框架作为Node中间层或者是服务端使用,下面来简单的讲解一下express的使用,包括(框架的搭建,数据库的操作,服务端的渲染等等)...
2018-12-17 10:49:12 11572
原创 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 150
原创 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 407
原创 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 3379 2
原创 JavaScript变量提升详解
话不多说,先看一段代码a = 2;var a;console.log(a)结果是 2console.log(a);var a = 2;结果是undefined现在来答疑解惑按照JS代码的执行顺序应该是从上到下一行行的执行的,真的是这样吗??其实这不是完全正确的。 正确的思路是,包括变量,函数在内的所有声明都会在任何代码在执行前首先被处理。 当你看...
2018-04-21 09:45:36 310
原创 如何从零开始创建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 11536 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 458
原创 canvas实现粒子星空连线
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>离子星空</title> <style type="text/css"> * { margin: 0; ...
2017-08-23 19:47:06 5998 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 4357
原创 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 430
原创 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 397
原创 纯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 1317
原创 JS事件 - 微信摇一摇原理
实现原理:1.微信摇一摇事件需要有硬件支撑,必须要求手机中有陀螺仪2.在JS中给window添加ondevectionmotion事件。该事件在手机晃动,即手机中的陀螺仪发生旋转,该事件会触发3.触发ondevectionmotion事件,会产生一个事件对象,通过该对象中的键值(accelerationIncludingGravity)来获得该重力加速器对象4.重力加速器对象中含有...
2017-07-21 19:13:13 869
原创 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 1463
原创 JS实现无限加载瀑布流
1.在外层的div中,插入4个ul,ul左浮动2.每次在创建节点之后,插入节点之前,要获取每个ul的高度,找到最小的高度,然后将新创建的li节点插入该ul中3.当文档的高度 - 文档的可视高度 <= 鼠标的滑动距离时 开始继续创建节点<!DOCTYPE html><html> <head> <meta charset="UTF...
2017-07-21 11:03:22 585
原创 JS中几种获取对象宽度和高度的区别
在JS中有多种获取高度和宽度的方式,今天整理一下1、clientWidth / clintHeightclientWidth = 元素的宽度 + 元素的paddingLeft + 元素的paddingRightclientHeight = 元素的高度 + 元素的paddingTop + 元素的paddingBottom注意:如果该元素上存在上下滑动滚动条,则clientWidth...
2017-07-18 19:21:25 2121
原创 浏览器嗅探
前端开发会用到不同的浏览器,以下代码通过使用Bom中的navigator对象来实现对浏览器的嗅探,达到兼容不同浏览器的目的 if(window.navigator.userAgent.indexOf("Chrome") != -1){ alert("谷歌浏览器"); }else if(window.navigator.userAgent.indexOf("Firefox") !...
2017-07-17 17:54:43 1560
原创 JS原生实现多个小球跟着鼠标移动
每个小球移动都有自己的坐标,小球移动的同时,需要进行坐标传递,将第一个坐标依次传递给最后一个坐标,来实现小球跟着移动的效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>小球运动</title> <style
2017-07-16 17:30:39 2927 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 1540
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人