自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端小贤

路漫漫其修远兮,吾将上下而求索

  • 博客(64)
  • 收藏
  • 关注

原创 使用微信的JSDK方法来获取定位的经纬度,本地测试方法总结

1.开启D:\soft\natapp的应用2.在项目的文件夹F:\city_cloud\zhoushan\zhoushan-wx-public-server\weixin中打开cmd ,输入puer -p 803.在代理的平台打开链接http://xiaxiaoxian.natapp1.cc /* 前端自己合成签名的要素 *//** * 保存token */ va...

2019-04-16 17:55:55 1966

原创 JavaScript 判断对象中是否有某属性

一、点( . )或者方括号( [ ] )  通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回undefined。当然,这里的“不存在”指的是对象自身和原型链上都不存在,如果原型链有该属性,则会返回原型链上的属性值。// 创建对象let test = {name : 'lei'}// 获取对象的自身的属性test.name //"lei"...

2019-03-19 09:23:36 1172

原创 单行文本溢出显示省略号,单行文本溢出显示省略号

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>萧山城管11</title></head><body> <style> .div_text{ w

2019-02-11 10:10:03 349

原创 函数节流和防抖

前言事件的触发权很多时候都属于用户,有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器事件:window.onresize、window.mousemove等,触发的频率非常高,会造成浏览器性能问题 如果你碰到这些问题,那就需要用到函数节流和防抖了。一、函数节流(throttle)函数节流:一个函数执行一次后,只有大于设定的执行周期后...

2019-01-07 18:56:33 310

原创 CSS三栏布局的四种方法

1.绝对定位法<div class="left">Left</div><div class="main">Main</div><div class="right">Right</div>body,html{ padding: 0px; margin

2019-01-04 17:47:15 234

原创 几种常见的CSS布局

一、单列布局常见的单列布局有两种:header,content和footer等宽的单列布局 header与footer等宽,content略窄的单列布局 1.如何实现对于第一种,先通过对header,content,footer统一设置width:1000px;或者max-width:1000px(这两者的区别是当屏幕小于1000px时,前者会出现滚动条,后者则不会,显示出...

2019-01-04 16:01:35 961 1

原创 如何居中一个元素(终结版)

一、水平居中1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。 .parent{//在父容器设置 text-align:center; }此外,如果块级元素内部包着也是一个块级...

2019-01-04 11:18:01 136

原创 如何清除浮动

 一、浮动到底是什么?二、浮动有什么特点?浮动的特点,可以用八个字总结:脱标、贴边、字围和收缩。为了更好说明,请看下图:当框 1 向左浮动时,它脱离文档流(脱标)并且向左移动(贴边),直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。如果框2中有文字,就会围着框1排开(字围)。如果把所有三个框都向...

2019-01-03 19:03:39 1463

原创 深入理解BFC

  一、什么是BFCFormatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IF...

2019-01-03 18:35:33 192

原创 详解正则表达式匹配方法 match()

match本身是JavaScript语言中字符串对象的一个方法,该方法的签名是  match([string] | [RegExp])它的参数既可以是一个字符串,也可以是一个正则表达式。该方法绝大多数都是要使用正则表达式的,所以参数为string的情况不在本文讨论范围之内。其实参数即使是一个简单的string,其返回值也跟使用正则表达式的结果无异,而且使用正则表达式的变化比较多,用法复杂,所以...

2018-12-22 23:53:56 6183

原创 git用ssh方式下载和提交代码

1、运行Git Bash客户端,执行ls ~/.ssh; 如果列出下图这两个rsa文件,那应该就不需要配置ssh key了,如果不放心就将这几个文件删掉,重新生成。2、生成ssh key文件,执行ssh-keygen -t rsa -C "xxx.xxx.com";     - t 指定密钥类型,默认是 rsa ,可以省略    -C 设置注释文字,比如git的地址。    -...

2018-12-21 09:32:48 3574

原创 Linux下配置Node.js环境

1.下载代码下载地址:https://nodejs.org/en/download/下载Linux Binaries (.tar.xz)版本,位数根据操作系统位数选择2.复制代码包用FTP上传代码包到/usr/local/3.解压代码包命令:$xz -d node-v4.4.4-linux-x86.tar.xz     $tar -xvf  node-v4.4.4-li...

2018-12-13 18:02:51 248

原创 vue +element 搭建项目,要求既支持pc端又支持移动端

使用场景:有适配pc端改为适配pc端和移动端,使用2套css代码实现App.vuecreated: function () { if(document.documentElement.clientWidth > 640){ require('./style/index.scss'); this.plaform = 'pc'; }els...

2018-12-10 23:21:30 19278 6

原创 JavaScript模板引擎Template.js使用详解

1.语法:            (1) 使用:引用简洁语法的引擎版本,例如: <script src="dist/template.js"></script>              (2) 表达式:{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。            (3)输出表达式 : 对内容编码输出: {{content}} ,不编码输出: ...

2018-12-03 10:22:59 1242

原创 如何将引入的iframe页面缩小,适应当前页面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, m

2018-11-29 23:24:49 11604

原创 日期格式化

Date.prototype.format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月 "d+": this.getDate(), //日 "H+": this.getHours(), ...

2018-11-28 14:02:19 211

原创 vue设置点击电话跳转到手机拨打电话的界面

<p>联系电话:<a :href="'tel:' + item.phone">{{item.phone}}</a></p> 

2018-10-26 15:18:58 12618

原创 jquery的常用API汇总

1.$.contains()方法定义与用法:$.contains() 方法用于判断指定元素内是否包含另一个元素。即判断另一个DOM元素是否是指定DOM元素的后代。语法: $.contains( container, contained ); container: Element类型 指定可能包含其他元素的祖辈容器元素 contained: Element类型 ...

2018-10-17 09:51:06 2847 1

原创 如何让类数组也使用数组的方法比如:forEach()

思路: 让类数组绑定数组的方法<div>1</div><div>2</div>方法一:let div = document.getElementsByTagName('div');div.forEach = Array.prototype.forEach;div.forEach(item=>{ console....

2018-10-16 15:25:17 1713

原创 jquery的$.extent()方法的总结

1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。 2.jQuery.fn.extend(object);给jQuery对象添加方法。jQuery.fn = jQuery.prototype = { init: function(selector, context) { //内容 }}  2.jQuery.fn...

2018-10-15 09:24:32 1136

转载 删除input框type="number"时,默认的上下小箭头

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .deal::-webkit-textfield-decoration-c

2018-10-14 23:38:57 732

原创 js中使用template.js插件

$.ajax({ url:'http://10.162.12.85:8080/api/info?code=bingbing2&type=1', type:'get', dataType: 'json', success:function (res) { // 设置车牌号 if (res.info.navicerts.length !=0) { $...

2018-09-07 17:24:31 1317

原创 js在for循环中绑定事件

// 控制准运证信息的展开 for (var i=0; i<=res.info.navicerts.length; i++) { (function(i) { $('#collapse-btn'+i).toggle(function(){ $('#allow-list-wrapper'+i).hide(); $('#layui-icon'+i).htm...

2018-09-07 17:17:10 2036

原创 Iterator接口和for...of循环

let arr = ['hello','world']; let map = arr[Symbol.iterator](); // 数组直接调用iterator接口,返回一个对象map console.log(map.next()); // {value: "hello", done: false} done:循环没有下一步状态:true没有,false:有状态,循环并没有结束 c...

2018-08-31 21:19:57 100

原创 HTML5的新特性----拖放功能

拖放的基本概念很简单:创建一个绝对定位的元素,使其可以用鼠标移动<h1>拖动源对象可以触发的事件</h1> <img src="img/p3.png" id="p3"> <script> //源对象:开始拖动 p3.ondragstart = function(){ console.log('drag sta...

2018-08-31 21:19:31 326

转载 学习vue的双向数据绑定的原理

1. vue数据双向绑定的原理。2. 实现简单版vue的过程,主要实现{{}}、v-model和事件指令的功能。 vue数据双向绑定原理vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,那么vue是如果进行数据劫持的,我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西。代码:var vm = new Vue({ da...

2018-08-31 21:18:48 201

原创 使用CSS修改HTML5 input placeholder颜色

::-webkit-input-placeholder { /* WebKit browsers */ color: #999;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999;}::-moz-placeholder { /* Mozilla Firefox 19+ */ col...

2018-04-20 15:20:51 688

转载 less的语法概括

1.变量的使用@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }输出:#header{ color: #6c94be }2.混合在 LESS 中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性. 下面有这样一个class:// 通用样式....

2018-04-04 17:28:39 224

转载 5分钟上手写ECharts的第一个图表

方法一  :模块化单文件引入1、新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom。<!DOCTYPE html><head> <meta charset="utf-8"> <title>ECharts</title></head><body&amp

2018-04-03 18:07:06 420

原创 谈谈浅拷贝和深拷贝的区别,以及实现的方法

两者的区别:一个对象浅复制后,是深层次的对象地址的复制,并没有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会发生改变,而深复制的则是开辟了一个新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。话不多说,上代码:// 原始对象var obj = { a:1, arr: [2,3], say:functi...

2018-03-22 22:44:43 4222 1

原创 Iterator接口和for...of循环

// 数组已经帮我们内置这个Iterator接口let arr = ['hello','world']; let map = arr[Symbol.iterator](); // 数组直接调用iterator接口,返回一个对象map console.log(map.next()); // {value: "hello", done: false} done:循环没有下一步状态:true...

2018-03-20 22:35:34 191

原创 ES6中的异步对象Promise

回忆一下ES5中的怎么使用异步方法// es5中的异步回调 let ajax = function(callback){ console.log('执行') // 执行 setTimeout(() => { callback&&callback.call(); }, 1000) }; aja...

2018-03-20 21:54:46 271

原创 缓存方式之cookie的使用

构造一个cookie的函数var CookieUtil = { get:function(name){ var cookieName = encodeURIComponent(name) + "="; var cookieStart = document.cookie.indexOf(cookieName); var cookieValue = null; if(cookie...

2018-03-20 11:29:59 650

原创 ES6中定义的类和对象

类的基本定义和生成实例:// 类的基本定义和生成实例 class Parent{ //定义一个类 constructor(name='xiaxaioxian'){ this.name= name; } } // 生成一个实例     let g_parent = new Parent();     console.l...

2018-03-20 11:10:15 8732

原创 Proxy代理 和 Reflect反射(反射的是obj)的概念

1. Proxy代理// 供应商(原始对象) let obj = { time:'2018-01-03', name:'net', _r: "123" } // 创建代理商,传入obj数据 let monitor = new Proxy(obj,{ get(target,key){ // 拦截对象属性的读取 tar...

2018-03-19 14:55:23 199

原创 web性能优化之事件节流

问题:鼠标滚轮滚动一下,scroll事件触发了12次document.addEventListener('scroll',function(){ console.log('hello')})事件节流背后的思想是指:某些代码不可以在没有间断的情况下连续重复执行,第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码,第二次调用该函数时,它会清除前一次的定时器,并设置一个,如果前一个定时器已...

2018-03-19 09:47:31 535 1

原创 vue.js项目的mock数据配置

/*方法二:利用express框架*/ var apiServer = express()var bodyParser = require('body-parser')apiServer.use(bodyParser.urlencoded({ extended: true }))apiServer.use(bodyParser.json())var apiRouter = expres...

2018-03-11 18:28:58 470

原创 学习webpack记录(三)

问题1:如何打包生成多页面的文件 要点:入口多js文件实例化多个htmlWebpackPlugin , 使用 chunk:['main','a'],来指定每个文件各自包含的js文件  也可使用excludeChunks:['a','b']  除了a.js和b.js问题2:如何实现3个html文件中main.js是直接在html文件中生成的,而a.js/b.js/c.js都是通过cdn的形式外链介入...

2018-03-07 18:04:30 171

原创 学习webpack(二)

1.在webpack.config.js中写入以下代码var path = require('path'); // 导入路径包 module.exports={ entry:'./src/script/main.js',//入口文件 output:{ path:path.join(__dirname, 'dist'),// 指定打包之后的文件夹 ...

2018-03-07 14:47:18 139

原创 学习webpack记录(一)

1.首先遇到一个坑:webpack hello.js hello.bundle.js 报错原因:webpack 4.1.0版可能不支持这种写法,换成webpack 3.8.1  转换成功!2.打包的时候,文件以数组的形式放在hello.bundle.js中3.require(js文件)可以打包,但是require(css文件)报错原因是没有相关的loader: css-loader : webpa...

2018-03-06 18:07:46 218

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除