- 博客(43)
- 收藏
- 关注
RSS订阅原创 box-shadow
.add-item{ width: 100%; overflow: hidden; background: #fff; box-shadow:0 0 46px rgba(0,0,0,.6); }如果需要设置透明度的话就需要写成rgba() ; 相反则只需要写上色值；具体语法如下：box-shadow: h-
2018-03-26 11:30:11
522
转载 localStorage 本地存储
1.什么是localStorage ？localStorage 是H5新增的一个特性，专门用于本地存储解决了cookie储存空间过小的问题（cookie中每条cookie的存储空间为4k），而localStorage 一般浏览器支持的大小为5M，不过这点在不同浏览器中会稍有不同；2.localStorage 的优点和局限优点：1、localStorage拓展了cookie的4K限制2、localS...
2018-03-22 10:24:36
344
原创 a标签实现下载图片功能
下载a标签的href属性用于指定超链接目标的 URL，只是能在新页面打开图片要想实现a标签点击下载图片功能，只需加个download属性
2018-03-15 16:33:10
22123
5
原创 前端动态生成二维码 jquery.qrcode.min.js
type="text/javascript" src="./js/jquery.js">src="jquery.qrcode.min.js">首先需要引入以上两个js jquery.qrcode.min.js (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.data=a}funct
2018-03-01 11:20:38
2054
原创 iterable
iterable 字面意思：可迭代的，可重复的 iterable 是ES6标准新引入的类型，而Set，map，Array都属于iterable 类型；那么为什么要加入iterable 类型呢？之前对array的操作大都是基于下标循环，而Set和map都无法使用下标，集合类型不统一；而且对于array类型的for...in循环操作，当加入新属性后会出现意外状况，所以集合类型
2018-01-29 17:09:43
3678
原创 js判断数字或字符串最后一位
1：字符串都具有length属性，可以用str[length-1]拿到最后一个字符，但是这种写法，IE低版本浏览器不支持2:str.charAt(length-1); charAt()方法支持所有浏览器3： var str = "123456"; spstr = str.split(""); spstr[spstr.length-1];
2018-01-17 10:21:54
11604
原创 js 获取到number的length
1.调用toString方法转为字符串后取长度var num = 123456；alert(num.toString().length);2.隐式转字符串后取长度var num = 123;alert((num + '').length)
2018-01-17 09:38:46
27035
原创 js删除数组中某一项,splice()
var id = '3'var tagList = [{"parentTagId":"1","parentTagName":"学校","childTagId":"3","childTagName":"高中"}, {"parentTagId":"1","parentTagName":"学校","childTagId":"4","childTagName":"初中"}
2018-01-08 17:29:40
7361
原创 js实现从本地选取照片
HTML：class="left-title">引用URL：type="text" class="url-text" placeholder="请输入URL地址" >class="url-remarks">备注：必须以http://或者https://开头视图：js代码：// 选择图片function checkImg(){ $("#checkIm
2018-01-04 19:15:19
11860
原创 正则校验URL
给大家先案例一个超级全面的，它验证的情况包括IP，域名（domain），ftp，二级域名，域名中的文件，域名加上端口！用户名等等信息function IsURL (str_url) { var strRegex = '^((https|http|ftp|rtsp|mms)?://)' + '?(([0-9a-z_!~*\'().&=+$%-]+: )?[0-9a-z
2018-01-04 19:03:27
19203
1
原创 jquery 实现开关按钮
HTML：class="div1 open1"> class="left"> class="right"> class="div2 open2">css：.div1{ width: 60px; height: 26px; border-radius: 15px; overflow: hidden; posit
2018-01-03 10:40:00
7435
3
原创 将字符串中的所有. 换成 - replace()方法
var str = "2010.08.01";str = str.replace(/\./g, '\-'); console.log(str);结果：2010-08-01
2017-12-29 15:56:06
3327
原创 window.location.href跳转页面，问号传参并将参数转为json对象
可以直接使用window.location.href进行页面跳转window.location.href = './index.html'问号传参：window.location.href=’index.html?cont=’+count+’&name=’+name;那么我们在新页面接收参数，并且将参数转为可用的json格式时，可以用下面的方法： var url
2017-12-28 10:46:40
9205
原创 css3实现border渐变色
话不多说 ，直接上代码： .box{ width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient(#ddd,#000) 30 30; border-image: -moz-linear-gradient(#ddd,#0
2017-12-25 16:01:10
39416
1
原创 jquery wysiwyg.js实现富文本编辑框，可复制图片及文字
wysiwyg.js是一款十分强大的、所见即所得的jQuery富文本编辑器插件。wysiwyg.js富文本编辑器体积小，支持选择、键盘、占位等众多事件。而且该富文本编辑器的兼容性十分好，甚至兼容IE6可以实现图片及文字复制地址：https://gitee.com/diwuyanting/richText
2017-12-18 14:47:28
2322
原创 判断移动终端是安卓还是iOS
通过判断浏览器的userAgent，用正则来判断手机是否是ios（苹果）和Android（安卓）客户端。代码如下：script type="text/javascript"> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //andro
2017-12-14 10:18:57
5201
原创 jquery event.target 事件委托
在实际项目中经常会遇到动态添加元素，然后再对添加的元素进行操作的需求var that$('.add').on('click',function(){ $('.list').append('哈哈')})$('.list').on('click','.item',function(e){ console.log(e.target.className) if(
2017-12-04 18:54:22
465
转载 vue插件集合
UI组件element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用
2017-11-29 15:10:55
983
原创 display:inline-block 元素间间距去除方法
display:inline-block 元素都会有间距 ，如图：为此给大家分享几种解决方法：1：元素间的间距是因为标签间的间距，所以我们可以直接去掉HTML的空格，但是考虑到代码可读性，所以不可能写成一行，那可以直接按照以下方式写：哈哈哈哈<!---->哈哈哈哈<!---->哈哈哈哈<!---->哈哈哈哈<!---->哈哈哈哈借助HTML注释；
2017-11-27 17:37:42
2499
原创 vue + webpack 构建项目
vue+webpack项目搭建过程：node是必须的，需要先安装好node全局查询node -v：接下来全局安装vue-cli npm install --global vue-cli安装成功后在项目文件夹下 运行 vue init webpack + 项目名：此时文件夹下的目录如下：接下来执行 npm install 或者cnpm
2017-11-21 16:00:52
4321
原创 如何優雅的取整
var a = ~~1.222;var b = 1.222 | 0;var c = 1.222 >> 0; console.log(a+'==='+b+'========'+c)結果如下：不经意间露一手，瞬间提升气质！！！
2017-11-21 11:02:18
264
原创 input禁止输入的方法
1： readonly规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。type="text" value="哈哈哈" readonly="readonly">2：disabled 被禁用的 input 元素可复制，不能接收焦点,设置后文字的颜色会变成灰色。无法与 一起使用。type="text
2017-11-21 10:42:45
99328
1
原创 css更改placeholder的样式
可以用css更改placeholder的字体颜色 html:class="input" maxlength="200" name="text" placeholder="请输入文字" >css:.input::-webkit-input-placeholder { color: red;}.input:-moz-placeholder {
2017-11-20 18:10:10
32889
原创 div 模拟text area 高度自适应，不要滚动条
因为text area的高度不能自适应，但是项目又是需要回显文本加又可输入并且不要滚动条的需求，试了很多方法都不行，最终get到：用div模拟text area去实现高度自适应，并且可输入：class="test_box" contenteditable="true">css部分：.test_box { width: 400px; m
2017-11-20 17:27:00
651
原创 解决网页刷新时布局紊乱（jquery ready和load事件）
PC项目开发时遇到页面刷新时会出现2S左右的紊乱，会影响到用户体验；那么要想直接给用户呈现一个完整的页面，而不在页面加载时就呈现给用户，一般要采用预加载，可以在整个页面都加载完毕时，然后再呈现给用户。（页面加载时，最慢的还是一些脚本、图片，其中图片是主要问题）；解决短暂的页面布局紊乱，可以使用jquery的load事件，如下：$("#fullback").hide();我的
2017-11-20 11:33:17
1307
原创 开关按钮
效果图：代码：Document.div1{ width: 75px; height: 27px; line-height: 30px; border-radius: 5px; overflow: hidden; position: relative; background: #82e497; b
2017-11-15 16:45:01
279
原创 百度地图接口及使用
$(function () { getAddr(); }); //百度地图获取坐标 function getAddr() { var geolocation = new BMap.Geolocation(); var pt; geol
2017-11-15 16:15:08
1337
原创 echarts重复加载
如上图所示，项目中需要点击开关按钮时控制图表上对应的类别的显示和隐藏，但是在点击显示时可以渲染出来，点击隐藏时对应部分却不消失，代码如下：var chart = document.getElementById('lineChart');myChart = echarts.init(chart);myChart.setOption(option);解决办法：var
2017-11-15 15:16:43
4272
1
原创 jquery 添加元素的方法
1.append(); 在所选元素的结尾添加var html = ''+obj.farmName+'';$('#box').append(html);2.prepend(); 在所选元素的开头添加$('#box').prepend(html);3.html(); 在所选元素内添加，如果元素内之前有别的内容会覆盖掉$('#box').htm
2017-11-14 19:24:28
5709
原创 echarts X轴显示不全
项目中有遇到X轴显示不全的问题，如下图：代码如下："xAxis": { "axisLine": { "lineStyle": { "color": "#fcead4", "fontSize": 14 } }, "type": "category", "data": [
2017-11-14 10:04:27
3268
原创 JSON.parse()和JSON.stringify()的用法及区别
JSON.parse()是从字符中解析出json对象：var str = '{"overMoney":0,"castCategoryId":9,"castFarmId":""}';console.log(JSON.parse(str)){overMoney: 0, castCategoryId: 9, castFarmId: ""}而JSON.stringify()刚好相
2017-11-13 16:33:45
1358
原创 js 对象 key 变量
项目中有遇到根据点击的不同按钮将它们的class作为key传进data对象内，那么此时key 就是个变量，在开始写的时候是这样:var data={ id:id, classNameTitle:buttonType, tifier:tifier}console.log(data)打印结果如下：planMoney//为此时的classNameTitle
2017-11-10 11:48:01
3111
1
原创 一句代码搞定数组去重 Set()
[...new Set([1, "1", -1, 1,2,3,4,5, 1, 3])](7) [1, "1", -1, 2, 3, 4, 5]哈哈 有木有很神奇；Set是ES6提供的新的数据结构，类似于数组，但是值都是唯一的，不会有重复的值；Set本身是一个构造函数，用来生成Set数据结构，接下来给大家分享哈 Set的几个方法：var s = new Set();
2017-11-09 10:25:05
8041
1
原创 js判断是否为数字 排除掉空
啦啦啦啦啦 今天写项目需要判断是否是数字再去相乘，之前的东西忘得已经差不多了，so 在度娘的一番教导下，get到了方法，赶紧给大家分享下因为所输入的数字有可能是负数 ，小数，需要排除的是空格 和其他类型 ，所以一开始试了isNaN这个方法，如下：console.log(isNaN(-1.22)) falseconsole.log(isNaN(1)) falseconso
2017-11-07 14:52:09
2015
1
原创 jquery 判断是否有当前父元素 .is()方法
在项目中有两处添加对比的效果，需要点击时往里添加不同的元素，但是功能一样，所以在点击事件时加了个判断，通过判断当前点击元素的父元素是否为其中一个，如果是某一个则拼接相对应内容；那么如何判断当前元素的父元素，代码如下：$(this).parent().is('.costBase')通过jquery的parent方法，用.is()方法可以判断是否为这个元素，如果匹配则返回true,
2017-10-18 16:52:02
4122
原创 jquery查找父 子 兄弟节点方法
jQuery.parent(‘.box') 查找父元素jQuery.parents(‘.box') 找到所有祖先元素，不仅仅局限于父元素jQuery.children() 查找所有子节点jQuery.contents() 查找下面的所有内容，包括节点和文本。jQuer
2017-10-18 16:46:12
492
原创 轮播图 左右点击及底部小圆点
最近pc项目有两处一样的轮播图 有左右点击按钮及底部小圆点接下来 代码奉上：css的写法，可以让子元素根据父元素定位，让它们定位在同一位置，再给子元素根据顺序加上z-index值，第一个最大，一次减小；左右两侧点击按钮直接根据父元素定位，z-index值最大；js代码如下：// 轮播图const Banner = function () { const
2017-10-18 11:24:19
5358
原创 禁止图片img拖动
最近在写一个pc的项目，由于有很多的图片，发现会有拖动的效果，所以百度了一哈哈解决方法；建议大家直接用js解决，一段代码妥妥搞定；jquery解决方法：$('img').on('mousedown',function (e) { e.preventDefault()})选中页面所有img标签，添加mouse down事件 e.preventDefault()
2017-10-18 11:11:49
17533
1
转载 js中的事件委托或是事件代理详解
起因：1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的；2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考；概述： 那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事...
2017-09-27 10:39:54
215
原创 双飞翼布局 移动端header常用布局
在移动端开发时，经常使用双飞翼布局，简单明了，嗖嗖嗖的就搞定头部；接下来给大家奉上代码： html部分： titleleftrightcss部分:.main,.left,.right { float:left; height:200px; text-align: center; }/*先让元素浮动在同一行，并且设置元素文本居中，这样的话main的内容就可
2017-09-06 18:16:39
796
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人