xiaxiaoxian-优快云博客

原创使用微信的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 2080

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

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

2019-03-19 09:23:36 1235

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

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

2019-02-11 10:10:03 395

原创函数节流和防抖

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

2019-01-07 18:56:33 342

原创 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 265

原创几种常见的CSS布局

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

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

原创如何居中一个元素（终结版）

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

2019-01-04 11:18:01 164

原创如何清除浮动

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

2019-01-03 19:03:39 1505

原创深入理解BFC

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

2019-01-03 18:35:33 221

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

2018-12-22 23:53:56 6520

原创 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 3707

原创 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 292

原创 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 19693 6

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

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

2018-12-03 10:22:59 1403

原创如何将引入的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 11869

原创日期格式化

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

2018-11-28 14:02:19 250

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

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

2018-10-26 15:18:58 12800

原创 jquery的常用API汇总

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

2018-10-17 09:51:06 2924 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 1770

原创 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 1172

转载删除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 795

原创 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 1377

原创 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 2083

原创 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 122

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

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

2018-08-31 21:19:31 364

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

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

2018-08-31 21:18:48 229

原创使用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 723

转载 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 253

转载 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 462

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

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

2018-03-22 22:44:43 4426 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 216

原创 ES6中的异步对象Promise

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

2018-03-20 21:54:46 312

原创缓存方式之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 695

原创 ES6中定义的类和对象

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

2018-03-20 11:10:15 8841

原创 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 240

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

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

2018-03-19 09:47:31 580

原创 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 508

原创学习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 196

原创学习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 166

原创学习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 258

空空如也

空空如也