- 博客(23)
- 收藏
- 关注
RSS订阅原创 删除两个数组对象中相同的对象
例子如下：var arr1=[{id:1},{id:2},{id:3},{id:4},{id:5}]var arr2=[{id:1},{id:2},{id:3}]var set=arr2.map(item=>item.id) console.log(set) var resArr=arr1.filter(item=>!set.includes(item.id)) cons...
2019-12-09 10:16:58
2320
2
原创 使用vue-qriously生成二维码
一、安装npm i vue-qriously -S二、全局引入//main.jsimport Vue from 'vue'import VueQriously from 'vue-qriously'Vue.use(VueQriously)三、使用//home.vue<template> <div> <qriously :value=...
2019-11-30 15:26:18
665
原创 vue中数组对象去重的方法
vue 可以在methods中写一个方法：methods:{ unique(arr) { // 根据唯一标识orderId来对数组进行过滤 const res = new Map(); //定义常量 res,值为一个Map对象实例 //返回arr数组过滤后的结果，结果为一个数组 过滤条件是，如果res中没有某个键，就设置这个键的值为1 retu...
2019-11-11 16:09:10
5370
1
原创 ES6总结--第二部分之generator & async & await
ES6类 _----------------------------------------------------------------数据类型: number、string、boolean、Object、undefined、function 新增：Symbol 用typeof检测出来数据类型: symbol new Number(12) new String() ...
2019-07-08 22:13:33
197
原创 ES6总结--第三部分之类
程序中类ES6面向对象 ，类 属性 方法函数模拟人: Person 属性: name 展示名字: showName Person.prototype.showNameES5之前： function Person(){ this.name='aaa'; } Person.prototype.showName=function(){}ES6中变形:...
2019-07-08 22:10:18
148
原创 ES6总结--第二部分
数组: ES5里面新增一些东西 循环: 1. for for(let i=0; i<arr.length; i++) 2. while arr.forEach() // 代替普通for arr.forEach(function(val, index, arr){ console.log(val, index, arr); }); arr.ma...
2019-07-07 19:48:10
138
原创 ES6总结--第一部分
ES6 -> ECMA 标准jsES7 ES8.....ES5.xECMA-262 -> ES1.0--------------------------------------------ES2015ES6 -> 2015年6月 ES6.0每年6月份，发布一个版本 2016年6月 ES6.1 ES7 E...
2019-07-07 19:43:21
156
原创 JavaScript 面向对象相关知识小结！
javascript是一种基于对象的语言，但它没有类的概念，所以又和实际面向对象的语言有区别，面向对象是javascript中的难点之一。现在就我所理解的总结一下，便于以后复习：万物皆是对象字面量 – 字面上显示的东西叫做字面量包装类 – 没有new的函数声明就是包装类一、什么是对象？1、对象即键值对的集合。2、 只要是对象就可以有自己的私有属性。3.、只要是new 出来的都是对...
2019-06-07 17:48:42
152
原创 JavaScript中逻辑中断！
今天看见了逻辑中断，就来小结一下！<script type="text/javascript"> // 逻辑中断 （短路操作） // 逻辑或： || // 逻辑与： && // 逻辑或： // 语法： 表达式1 || 表达式2 // 如果第一个表达式的值为真：则返回表达式...
2019-06-06 20:39:57
662
1
转载 Web前端页面性能优化小结
前端的页面主要包括xhtml,css,js。其实xhtml就是现实中所谈到的内容，页面的内容：文字，图片，flash,视频等。而前端开发工作者可以控制的是什么呢？那就是xhtml，css，js的代码及相应的修饰（背景）图片。下面我就根据我自己的经验来说说：一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。结构中主要包括了head和body两个部分，但是我们经常说的是结构语义化主要是...
2019-06-04 10:18:03
196
原创 CSS3弹性盒子flex布局方式
一、CSS3弹性盒子CSS3 弹性盒子：是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的：提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。二、CSS3 弹性盒子内容弹性盒子由弹性容器 和弹性子元素组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。...
2019-06-02 18:02:13
412
原创 原生js实现瀑布流！
一、分析：1、瀑布流布局被广泛运用于图片展示，但是展示的图片需要宽度相等，而高度可以自适应；2、使用js获取图片宽度、获取窗帘宽度，计算一行能容纳的图片个数，然后获取图片的高度，控制从第二行开始的图片先排在上一行中高度最低的下面，以此形成瀑布流的布局；3、使用window.onresize，当窗口大小变化的时候重新计算窗口宽度，以重新进行排版；4、使用window.onscroll，当滚动...
2019-04-29 15:28:11
273
1
原创 原声js和jQuery写放大镜小案例及思路！
放大镜效果，被广泛的应用于商城的商品展示，其效果相比大家都不陌生。其原理也不是很难，那么今天就实现下放大镜效果！一、放大镜实现思路：1、需要一个大盒子和一个小盒子放图片；2、两个盒子放入的是同一张图片；3、小盒子里还需放入一个div相当于是放大镜；4、隐藏大图片的盒子和放大镜的盒子；5、当鼠标移上去是步骤4显示，离开时步骤4消失；6、放大镜的移动事件；7、判断让放大镜移不出盒子；...
2019-04-27 21:11:33
304
原创 jQuery实现轮播图的思路、代码及知识点！
jQuery是一个快速、简洁的JavaScript框架。它设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。的确啊，用jQ写轮播图比js写轮播图代码量少了许多呢！一、轮播图实现思路：1、自动轮播：（1）使所有的图片...
2019-04-25 21:14:20
5436
原创 JSON的概念及使用规则
1、JSON(JavaScript Object Notation) ：JSON是一种轻量级的数据交换格式，基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。2、JSON数据书写格式：名称/值对；3、JSON可以是数字、字符串、逻辑值、数组、对象、null；数字(整数或浮点数)： {“age”:30};对象(在大括号中)：{“name”:“xue”,“...
2019-04-21 20:29:44
541
原创 原生js实现轮播图的思路、代码及知识点！
一、轮播图实现思路：1、自动轮播：（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；（2）使当前下标的图片的层级为1，并且当前li的背景颜色设置为白色；（3）时间函数每隔1秒执行一次。2、手动轮播：点击小圆圈按钮，显示相应图片。（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；（2）当点击小圆点时使它相对应的图片显示并且当前li的背景颜色设置为白色；3、...
2019-04-16 21:34:36
3778
2
原创 高级js实现拖拽事件的思路、代码及知识点！
一、拖拽事件的实现思路：1、鼠标按下时的事件：获取鼠标的位置，找到鼠标按下时到盒子的边界左边界的距离以及到盒子的边界上边界的距离；2、鼠标移动事件：盒子被移动后到浏览器左边界的距离等于盒子定位的左边距；盒子被移动后到浏览器上边界的距离等于盒子定位的上边距；3、鼠标放开事件：清空被移动的函数；二、实现代码如下：css部分：<style type="text/css"> ...
2019-04-16 20:10:28
334
原创 table表格去掉默认样式的方法！
今天在写代码的时候发现表格具有一些默认的样式有时候并不需要，它会影响美观!可以通过以下方式去掉它。cellpadding -- 代表单元格外面距离,用于隔单元格与单元格空间 。cellspacing-- 代表表格边框与单元格补白距离,单元格补白间距离。方法1：（在css样式中设置）table{ border-collapse:collapse; //表格的边框合并，如果相邻，则共...
2019-04-16 18:44:35
15458
原创 【简易幸运抽奖】
这是一个【简易幸运抽奖】的代码，欢迎大家前来指导！<style type="text/css"> //css样式 .bigbox{ width:480px; height:480px; margin: 0 auto; } .box,.box1{ width:150px; height:150px; background: sky...
2019-04-15 22:15:15
310
原创 innerHTML的作用及用法。
对innerHTML的用法有些模糊，今天来总结一下：1、innerHTML有两个作用： （1）获取对象的内容；（2）向对象插入内容；例：这是内容 ，由于id是唯一的，我们可以不获取id。通过 a.innerHTML 来获取id为a的对象的内嵌内容；也可以通过b.innerHTML = "这是被插入的内容"；在id为b的对象中插入内容。例子1（获取对象的内容）：<body>...
2019-04-15 19:24:57
10209
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人