- 博客(51)
- 收藏
- 关注
RSS订阅原创 reduce/some/filter/map/every等方法
1.reduce--让数组中的前项和后项做某种计算，并累计最终值let arr = [1,2,3,4,5];let result = arr.reduce((prev, cur, index, arr)=> { return prev + cur;});//15var result = [ { subject: 'math', s...
2019-04-23 09:09:35
209
原创 dataTables--保留相关操作
主要解释保留表格的操作记录---1.bStateSave(属性设置)---状态保存, 再次加载页面时还原表格状态。2.$("#tableId").DataTable().draw(false);--也会刷新表格，但是会保留我们的操作状态。3.跳转到指定页---const Table = $("#table").DataTable(); Table.page(number).dr...
2019-01-11 14:58:22
355
原创 设置object的key为变量
我们首先把这个object变为字符串，然后再把字符串转为对象。var a = 12;var str = '{'+a+' : "123"}'var obj = eval("("+str+")");得到结果：obj = {12: "123"}更新………………………………………………………………………………………………let a = 'helloWorld',let b =...
2018-08-02 20:44:34
6504
原创 vue element中引入阿里巴巴矢量图标库
选择好自己想要的图标加入购物车，添加至自己的某一个项目中。⚠️在更多操作中，我们需要对项目进行一个编辑。这里的设置主要是为了不和element的图标冲突。然后下载到本地之后，放在src／assets下。在iconfont.css中进行修改。增加一段如图所示的代码：[class^="el-icon-ump"], [class*=" el-icon-ump"] { font-...
2018-07-18 15:10:50
2628
原创 使用css实现一个正方形
很多情况下，在移动端的设计里，会出现要求图片等高等宽，而图片的宽度又是随着不同的移动设备进行改变的，这个时候就需要用到正方形的一个实现。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style
2018-07-02 20:34:40
11262
2
翻译 npm 报错 Module build failed: Error: No PostCSS Config found in
用vue-cli创建的本地项目，本地运行OK。然后换了一个目录，把除了依赖之外的目录全拷贝过去了，但是在npm run dev的时候就报这样的错了。fix：在根目录下建一个文件，postcss.config.js。添加代码：module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} } ...
2018-06-28 10:39:31
4393
原创 vue-cli创建项目设置跨域请求
为什么用vue-cli创建之后的项目调用后台接口会出现跨域的问题。直接调去后台接口就会出现404。是因为vue的localhost与访问域名不一致，导致的跨域问题。所以在这里就用到了代理，也就是代理服务器-Proxy Server，也就是网络信息的中转站。设置代理：在config／index.js中，找到dev:{}, 在这里面设置一个proxyTabledev: { // Pat...
2018-06-27 21:23:20
1056
原创 数据用二进制占位符交互
如图所示：这个一个多选框，每个option对应的值为：<option value=“2">a</option><option value=“4">b</option><option value=“8">c</option><option value=“16">d<
2018-06-08 15:32:47
1214
原创 前端实现复制功能
很多情况下，前端可能会遇到实现复制的功能。这里用的方法是target.find('input').select();var flag = document.execCommand("Cut","false",null);//剪切 var flag = document.execCommand("Cut","false",null);／／复制其中flag为true的时候，代表复制成功。⚠️：1.有...
2018-06-05 18:53:29
3847
原创 如何准确的区分对象和数组
前言--我们可能会经常用到typeof去判断某一个变量的类型。但是如图所示typeof对于区分数组和对象是没有用的。方法一：Array.isArray()。。。var a = [1,2,4];var b= {"name":"lsx"};console.log(Array.isArray(a)) //trueconsole.log(Array.isArray(b)) //false方法二：co...
2018-05-29 21:05:44
3656
原创 select2 option 设置disabled以及如何取消disabled属性
select2使用不久，最近遇到一个问题，需要对某一个option设置为不可选，但是一些操作之后恢复可选状态。1.设置为不可选状态，很容易， $("#single_select option[value='b']").prop('disabled',true); $("#single_select").select2();2.取消option的disabled属性。2.1 $("#single_s...
2018-05-16 17:37:58
11272
1
原创 vue平行组件之间的通信
平行组件之间的通信，需要借助一个空的vue对象。var Event = new Vue();发送依旧是用Event.$emit('自己定义的事件','需要发送的数据')，接收的时候，需要在钩子函数mounted中接收，用Event.$on('相对应的事件',回调函数function(msg){});发送数据：接收数据:...
2018-05-09 11:39:56
1946
原创 vue父组件和子组件之间的通信
1.父组件传递数据给子组件。 原理：将父组件的值作为一个属性，绑定给子组件，在子组件中通过props进行接收。其中props接收的方式有3种： 1.props:['name'] 2.props:{name:{type:String}} 3.props:{name:String}2.子组件跟父组件之间的通信 原理：子组件需要利用一个$emit('声明的事件','需要发送的值...
2018-05-09 10:37:31
2412
原创 小标题自适应的经典布局--flex
实现如图所以的小标题布局。实现的注意点：1.两边的线是自适应的，不能写死。如果屏幕大，则留白超级大。否则，线可能就挨着边了。2.因为后面的北京是图片，所以不能用一个div盖在线上。我的实现的方法：<div class="title"> <div class="line"></div> <div class="text">优惠信息&
2018-05-04 18:48:33
457
原创 filter---的各种值
之前只用过filter的opacity，竟然不知道filter还有很多的值，可以在我们的项目中设置使用。下面将会使用图片➕属性值的方式介绍filter。1.none。。默认值，没有效果。2.blur。。给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；---filter:blur(10px);3.brightness(%)。。给图片应...
2018-05-03 21:01:47
291
翻译 vue-cli的项目中把localhost换成自己的ip无法访问
很多情况下，我们在pc端开发的项目，需要在手机上调试。这个时候，但是发现我如果直接将localhost换成自己的ip,是无法访问的，解决办法：在package.json中，，"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "np...
2018-05-03 10:55:23
3617
原创 webstorm stylus 报红
今天使用vue-cli构建了一个项目。但是使用stylus写法一直报红，但是在浏览器里设置的样式是生效的。其中，package.json中，这些stylus都是安装过的。"style-loader": "^0.13.1","stylus": "^0.54.5","stylus-loader": "^2.5.0",并且在style中，也加了。style lang="stylus
2018-05-02 20:20:05
1733
原创 多个modal重叠，导致modal滚动条消失事件
因为最近一直在用modal，modal上再出现modal也是常见的， 但是遇到了一个bug---例如在modal1上弹出一个modal2，关闭modal2之后，会导致modal1滚动条消失，无法滚动。hack：就是在css样式中，增加一个样式：.modal{overflow:auto!important;}原因---弹出新的modal后，会根据当前新的modal内容设置滚动条，关闭这个modal后...
2018-03-30 17:38:29
2497
翻译 table-cell
table-cell属性是让标签元素以表格单元格的形式呈现，类似于td标签，table-cell会被其他一些css属性破坏，比如float,position:absolute，所以这些属性尽量不同用。设置了table-cell属性的元素对宽度高度比较敏感，对margin值没有反应，相应padding属性。1.table-cell实现等高布局如图所示：三个div里的内容是不相同的，但是容器的高度是根...
2018-02-23 18:41:28
3087
原创 微信小程序---picker
微信小程序摒除了select，因为觉得这个在移动端的操作以及显示不友好，从而产生了picker，picker也就是从底部弹起的滚动选择器，现在支持的有5种，通过mode来区分。具体的参照微信小程序开发文档https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html。本文章主要解释一个mode为selector，平常比较常用的一些固定...
2018-02-08 16:43:08
1170
原创 gulp打包之unable to minify JavaScript
用gulp做的前端代码压缩，今天在打包的时候发现打包出错了。报的错误是--unable to minify JavaScript。但是至于为什么会不能打包，表示很困惑，然后通过一番搜索，最后得出了问题所在。。是因为js代码报错。但是仅仅这样是不够的，因为我们不可能一个文件一个文件的去找，所以，gulp有一个插件，gulp-util，用来打印日志，看具体什么地方出错了。在gulpfile.js打
2018-02-05 11:43:18
11368
1
翻译 微信小程序--实现swiper切换
在写微信小程序的过程中，或许页面会有类似tab切换的功能。如下是我的tab切换效果，在tab的切换里放入了表格。其中有一点需要注意的是，swiper标签会有一个固定的高度，要是超出这个高度就hidden了，解决方法就是---在wxss中，添加这两个样式：page{height: 100%;}swiper{height: 100%;}代码如
2018-02-02 15:03:17
9004
2
原创 echarts设置之stack参数
今天遇到一个问题，就是我是一个tab切换的各种图表，但是获取得到的数据是正确的，我自己分装了一个函数，函数如下：function setEcharts(box,obj){ var optionZhe = { tooltip: { trigger: 'axis', backgroundColor:'#eee',
2018-01-08 22:53:43
37082
1
翻译 在express中使用ejs模板引擎
1.npm install ejs安装ejs模板引擎，然后就会安装到node_modules中，2.修改app.js的设置，我们使用ejs//app.set('views', path.join(__dirname, 'views'));//app.set('view engine', 'jade');app.set('views',path.join(__dirna
2017-12-07 17:07:58
1818
原创 在url中有中文乱码问题的解决
在一个url中可能会有中文的出现，举个例子：http://www.shuxiang?search?=明天会更好当我们获取这个url的时候，中文部分就会出现乱码现象，解决这个问题的方法就是---利用函数decodeURIComponent('放入我们需要传进来的值')；同样的，当我们想要对文字加密显示的话，可以使用函数---encodeURIComponent()；
2017-09-28 23:52:39
1442
原创 datatables中包含的一些小技巧
datatables是很容易，并且很好用的一个表格插件。今天遇到一个本地搜索的问题，之前一直没有用过，今天记录一下。但是这个本地的搜索仅仅适用于前端分页，因为后台分页并没有把所有的数据列出来。允许开启本地搜索：$('#example').dataTable( { "searching": true} );但是我们如果需要只根
2017-09-19 16:53:14
322
翻译 jquery判断checkbox是否被选中的三个方法
我们在做项目的时候，经常会遇到checkbox，但是如何判断一个checkbox是否被选中呢？DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>inputtype="checkbox"/>苹果body
2017-09-11 17:26:08
655
原创 echarts实现双y轴，并且实现制定数据使用y轴
在使用echarts中，我们经常会用到双y轴去展示数据，有时候，我们可能需要自己去设置，具体使用某一个y轴去展示某一个具体的数据。如图所示：我们的y轴有两个，数据共有3个，这个图有两个不好的点：1.没有标明左右坐标具体是显示什么的，2.很明显今日访问人数和昨日访问人数需要使用同一个坐标进行数据的对比。 优化后的设置：1.双y轴的设置，加上具体是用来显示什么数据的2，
2017-09-04 14:39:48
85590
8
原创 echarts中画布的清空
最近做项目的时候，需要用到很多echarts图表类的展示，其中有一点让我困扰很久。如图所示：刚开始的时候可能需要加载全部的数据，但是当我们选择某一个条件的时候，我们只需要加载这一个条件的数据。这个时候我们要做的方法有2个（目前我知道的）：1.legend:{selected:{'周一':false } }就是在legend中的selected选项，我们把需要显示的设
2017-09-03 18:07:51
107306
17
翻译 时间控件二--timepicker
这个jquery-ui-timepicker的日期控件，因为需要，在网上找的，这里合集分类整理一下。效果如图所示：与calendar时间控件的区别是：1.样式的差别2.这个时间控件没法直接选择年份和月份，需要一直点击直到自己想要的月份以及年份。。3.这里的时分秒是滑块的效果，4.这里的js是压缩的，所以就没有进行完善，目前的格式只有，yyyy-mm-dd H
2017-08-17 11:44:46
326
原创 时间控件-时分秒／分秒／年月日
做项目的时候，很多时候我们会遇到使用时间控件的部分，下面介绍一个时间控件，---calendar.js，，这个控件是晚上照的，根据需要，把它修改的更加完善了。首先我们需要引入这些文件：这个日期控件的样式就是这样的；；；其中，完善后的calendar日期控件功能包括：1.我们可以快速选择年份和月份，并且日期是锁定的。2.我们可以选择格式：包括：yyyy-mm-
2017-08-17 11:17:45
12643
2
原创 标签a的空链接问题
偶然间发现，ahref="#">a1会跳跃吗？a>，当页面上有滚动条的时候，点击就会跳到页面最上端，然后才知道原理，是因为，‘#’默认的锚点位置是top。那可能会问，为什么有问题，，还要去用一个空的a标签呢，下面就是解释（摘录前辈的）：给标签增加href属性，就意味着以下事情：:link选择器可以选择到它这个a标签可以获得焦点（可以通过tab+’回车‘按键访问到）在
2017-08-10 15:44:02
525
原创 如何将自己本地的项目传到github上
只需要命令就可以把本地的项目上传到自己的github上。。步骤如下：1.登陆自己的github账号，如下图所示：2.点击new repository进行创建一个新的仓库，用来存放自己的项目;3.也是最重要的部分，用命令将项目上传；1.cd 到上传项目的根目录下，然后初始化本地仓库，git init2.添加当前工作目录文件到index，添加管理，git add ....
2017-08-10 15:15:15
15640
2
原创 gitHub上如何删除已存在的项目
如图所示，我的github上目前有这几个项目：其中我不想要nihao这个项目，但是，没有很明显的标志可以用来删除这个文件，但是github上是有删除项目的功能的，只是隐藏的比较深而已：步骤：1.点击自己想要删除的项目，进入如图所示环节。。。点击settings进入下面的页面： options下面的settings，一直拉到最下面，会看到如下图所示：
2017-08-10 11:52:11
888
原创 利用vue-cli创建的vue项目结构解析
利用vue-cli脚手架，创建出来的vue项目结构如图所示：1.其中index.html是入口文件；2.static中放一些静态资源，比如图片啥的；3.src-router-index.js是用来配置路由的，4. src-main.js,,用来设置引入的文件，，5.app.vue是全部的模板接收，引入各种组件。。部分文件的作用：详情见
2017-08-08 11:20:44
352
原创 用命令创建vue项目
vue项目的开发，需要依赖于node环境，因此，以下内容是在安装好node的基础上进行的……vue-cli开发vue的项目十分方便，它可以帮你快速构建一个具有强大构建能力的Vue.js项目。步骤：1.安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 2.全局安装vue-cli :n
2017-08-08 11:07:28
1279
翻译 css实现聊天气泡以及形状--边框法
实现以下的效果可以利用css的border属性：首先：我们给一个元素四周都加上边框的话，.box{width:10px;height:10px;border:10pxsolid;border-color:#f00 #0f0 #00f#0ff;}形状为：因此：生成一个三角形的css就可以写成为：.box{width:
2017-08-03 14:53:07
1914
原创 数组的交集、并集……
1.集合之间的交集：Array.intersect =function () { var result = newArray(); var obj = {}; for (var i = 0; i arguments.length; i++) { for (var j = 0; j
2017-08-03 11:16:20
755
原创 部分正则验证
1.手机号码：/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;2. 身份证：^([0-9]){7,18}(x|X)?$3.密码：^[a-zA-Z0-9]\w{5,17}$ 字母开头,只能包含字母、数字和下划线4.强密码：/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8
2017-07-31 17:04:24
273
原创 validate与submit
jQuery Validate 插件为表单提供了强大的验证功能，在使用validate.js进行表单的验证时，需要引入一下3个文件：script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js">script>script src="http://static.runoob.
2017-07-31 15:41:12
978
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人