- 博客(80)
- 收藏
- 关注
RSS订阅原创 Leaflet——台风路线展示的封装
一、首次添加台风展示的八要素（typhoonData：{}） typhoonData.typCheck = false; // 台风显示状态 typhoonData.typhoonNameIcon = null; // 台风名称 typhoonData.lineLayer = null; // 实况路线 typhoonData.circleGroup = null; // 实况路线站点 typhoonData.tf_marke.
2022-04-28 17:52:21
970
2
原创 PC端页面自适应不同分辨率的方法
以1920* 1080的设计稿为例，实现PC端不同分辨率适配<script TYPE="text/javascript"> var docEl = document.documentElement; function setRemUnit () { var rem = docEl.clientWidth / 19.2; // 可根据不同电脑分辨率进行手动修改（如1920*1080 为19.2 docEl.style.font.
2022-04-28 17:49:24
4985
1
原创 VUE 列表页跳转到详情页，点击返回上一页，回到原来的位置
一、利用vuex在store/index.js中记录滚动条历史高度记录列表页分页页数let store = new Vuex.Store({ state: { myHistroy: { pageNum: 1, // 列表页分页页数 scrollTop: 0， // 滚动条历史高度 }, }, mutations: { MYHISTROY: (state, myHistroy) => { state.myHistroy=
2022-03-29 16:32:07
3913
原创 VUE 列表页中实现分页加载（下拉到底部触发下一页 ）
1、HTML结构注：该方法所执行的基础是10条数据的高度总和应大于列表盒子固定高度 <ul class="my_list" @scroll="scrollEvent"> <li v-for="(item, index) in myList" :key="item.id"></li> </ul>2.滚动加载分页方法以及所需变量配置 data() { return { isUpdate: true, // 是否到底
2022-03-29 14:04:56
7217
2
原创 多种table列表合并列内容相同的单元格方法（原生table、layui-table、el-table
多种table列表合并列内容相同的单元格方法原生tablehtml: <table class="tablelist" id="tablelist">js: jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件 return this.each(function(){ var that; $('tr', this).eac
2021-10-20 13:33:15
983
原创 js:深拷贝和浅拷贝区别，以及实现深拷贝的方法
定义：浅拷贝：复制一份引用，所有引用对象都指向一份数据，并且都可以修改这份数据。深拷贝（复杂）：复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。1.深拷贝1.1. 最简单的方法就是JSON.parse(JSON.stringify（））function deepCopy(obj) { return JSON.parse(JSON.stringify(obj))}var obj = { age: 1, name: undefined,
2020-12-10 12:35:13
604
1
原创 js:数组去重/排序
数组去重function unique(arr) { if (!Array.isArray(arr)) { console.log('type error!') return } var array = []; for (var i = 0; i < arr.length; i++) { if (array .indexOf(arr[i]) === -1) { array .push(arr[i]
2020-12-10 12:08:44
169
原创 父组件如何触发子组件中的方法
示例：子组件<template> <div> child </div></template> <script> export default { name: "child", props: "someprops", methods: { parentHandleclick(e) { console.log(e) } } }</scrip
2020-12-10 12:00:07
1898
原创 JS 实现图片下载
使用下列fetch方法传入图片地址，可触发图片下载 fetch(url).then((res) => res.blob().then((blob) => { var a = document.createElement("a"); var url = window.URL.createObjectURL(blob); var filename = name || "pic.jpg"; a.h.
2020-12-07 13:31:41
204
原创 vue单页面应用刷新网页后vuex的state数据丢失怎么解决？
一、产生原因其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。二、解决思路1.一种是state里的数据全部是通过请求来触发action或mutation来改变；2.一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中；很显然，第一种方案基本不可行，除非项目很小或者vuex存储的数据很少。而第二种可以保证刷新页面数据不丢失且易于读取。..
2020-10-16 17:12:32
401
原创 js：判断字符串内容中是否包含数字
题目描述定义：字符串 str，检查其是否包含数字，包含返回 true，否则返回 false输入'abc123'·输出'true'方法一、正则，test function containsNumber(str) { var reg=/\d/; return reg.test(str); }方法二、正则，match function containsNumber(str) { return !!str.match(/\d/g); }方法三
2020-07-10 16:58:14
15021
原创 elementUI From表单踩坑之watch 变量监控（解决方法：@change=“nameChange”事件）
-当修改input框内的值（form.name）的时候，watch 监控from失败，watch中的from不相应，打印无效；<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-fo
2020-07-01 18:38:16
3502
3
原创 leaflet——把图片放到地图上（L.imageTransform或者L.imageOverlay.rotated），leaflet——把视频放到地图上（L.videooverlay）
一、把图片放到地图上（有两种方法实现，这两种方式都需要下载js文件并引入项目中）1、第一种（L.imageTransform：https://github.com/ScanEx/Leaflet.imageTransform）var anchors = [ [56.344, 136.595], [56.344, 137.878], [55.613, 137.878], [55.613, 136.595]], clipCoord
2020-05-28 17:49:48
2098
原创 Leaflet自动站点设置
this.markersAdd = L.markerClusterGroup(); // console.log(this.addressPoint1w, this.addressPoint1w.length); for (var i = 0; i < this.addressPoint1w.length; i++) { var a = this...
2020-03-12 19:01:58
231
原创 Js如何将一串数字转换为时间格式（yyyy-MM-dd hh:mm:ss
···let timeStr = ‘20200220210600’;let timeData = staTime.replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/g, ‘$1-$2-$3 $4:$5:$6’);console.log(timeData ); // 2020-02-20 21:06:00···...
2020-03-12 18:58:07
2995
转载 leaflet 把图片放到地图上L.imageTransform或者L.imageOverlay.rotated；把视频放到地图上L.videooverlay；把geoJson放到地图上。
1.把图片放到地图上：有两种方法实现，这两种方式都需要下载js文件并引入项目中：第一种L.imageTransform：https://github.com/ScanEx/Leaflet.imageTransform var anchors = [ [56.344, 136.595], [56.344, 137.878], [55.61...
2020-01-07 15:43:12
758
原创 弹性盒子布局——Flex
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex...
2019-11-18 11:22:40
541
原创 ES6——箭头函数
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。为什么叫Arrow Function？因为它的定义用的就是一个箭头：x => x * x上面的箭头函数相当于：function (x) { return x * x;}箭头函数的作用：箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ … }和r...
2019-11-17 21:01:43
187
原创 JS:值类型和引用类型的深层理解
一.JavaScript中的变量类型有哪些？（1）值类型（基本类型）：字符串（string）、数值（number）、布尔值（boolean）、undefined、null注：这5种基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值）(ES6新增了一种基本数据类型：symbol http://es6.ruanyifeng.com/#docs/symbol )（2）引用类...
2019-11-17 16:22:02
306
原创 GET和POST的具体传参方式以及结构！！！（代码详解）
一、GET 和 POST 传参方式的优缺点1.post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）2.post发送的数据量更大（get有url长度限制）3.post能发送更多的数据类型（get只能发送ASCII字符）4.post比get慢5.Post是向服务器提交数据的一种请求，get是向服务器发索取数据的一种请求。6.get会将数据缓存起来...
2019-08-05 17:59:04
17845
1
原创 JS实现滚动条自动滚动（scrollTop）
js部分很简单：通过控制scrollTop的值来实现自动滚动效果；注意（重点）：1、scrollTop的值不可以加单位，谨记;2、网页缩放比例会影响效果实现（下面具体说）；3、如果这个元素没有被溢出，scrollTop为0；4、设置的scrollTop值小于0，则scrollTop的值为0；5、如果设置scrollTop的值超出了这个容器滚动的值，则scrollTop的值为容器最大...
2019-06-18 14:57:17
34888
2
原创 MVVM 模型之下的 VUE框架
MVVM（Model View ViewModel）VUE 的简介VUE 就是基于 MVVM 模型实现的一套框架，在 VUE 中：Model 指的是 js 中的数据，如对象、数组等等。View 指的是页面视图。ViewModel指的是 VUE 实例化对象。为什么说VUE 是一个渐进式的 javascript 框架，渐进式是什么意思？1、如果你已经有一个现成的服务端应用，你可以将 ...
2019-06-18 11:36:20
396
原创 ES6新特性
es6作用：让 JS能够开发大型的应用程序一、let 和 const1.let 声明的变量不进行变量的提升；console.log(a);let a = 111;2.let 声明的变量不可以重复声明；在形成全局的作用域之后，代码正式运行之前，需要把 let进行过滤，如果 let声明的变量冲重复，直接报错，代码停止运行let class2= 222;let class...
2019-06-18 11:15:54
4872
1
原创 面试5.21
1、对标签的理解和用法什么是meta标签？ 引自下W3school的定义说明一下。meta是用来在HTML文档中模拟HTTP协议的响应头报文。用于网页的＜head＞与＜/head＞中，meta标签的用处很多。meta 中的重要属性：name。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta...
2019-05-22 12:23:57
301
原创 Vue实现数据双向绑定的原理：Object.defineProperty（）
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 get...
2019-05-19 23:20:39
1075
原创 浅谈全局.onload与相关方法事件（document.ready，document.body.onload）区别
浅谈document.ready/window.onload、window.onload/document.body.onload的区别1.document的ready事件通常会比window的onload事件先发生（为什么呢？）因为document的ready是在浏览器加载解析并构建完doc文档模型时发生的，而window的onload是整个文档的内容加载完成时才会发生。例如：在1个...
2019-05-12 23:34:10
1398
原创 Vuex核心原理（state，mutations和actions，getters）
VuexVuex核心原理如图示，Vuex为Vue Components建立起了一个完整的生态圈，包括开发中的API调用一环。围绕这个生态圈，简要介绍一下各模块在核心流程中的主要功能：Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。在new的vuex实例里面，有state，mutations和ac...
2019-05-12 22:58:58
2205
原创 Vuex的辅助方法（mapState、mapGetter、mapMutation、mapAction）
Vuex在new的vuex实例里面，有mutations和actionsstate:{} 里面存储的是数据mutation：必须是同步函数，通过commit触发mutations中的函数，修改state中的数据actions：可以是异步函数，通过dispatch触发actions中的函数，actions提交的是mutations，而不是直接变更数据getters：可以认为是vuex...
2019-05-12 20:29:35
6744
原创 HTTP缓存机制及原理
彻底弄懂HTTP缓存机制及原理在介绍HTTP缓存之前，作为知识铺垫，先简单介绍一下HTTP报文HTTP报文就是浏览器和服务器间通信时发送及响应的数据块。浏览器向服务器请求数据，发送请求(request)报文；服务器向浏览器返回数据，返回响应(response)报文。报文信息主要分为两部分1.包含属性的首部(header)--------------------------附加信息（...
2019-04-13 20:25:29
148
原创 简单实现一个 js 多线程
简单实现一个 js 的多线程执行和多线程之间数据的传递JS作为脚本语言，它的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。（这里这些问题我们不做研究）但是单线程的语言，有一个很致命的确定。如果说一个脚本语言在执行时，其中某一块的功能在执行时耗费了大量的时间，那么就会造成阻塞。这样的项目，用户体验是非常差的，所以这种现象在项目的开发过程中是不允许存...
2019-04-13 20:00:58
10855
原创 用一个标签实现类似"—— 第三方登录 ——"这种效果
如何用一个标签实现类似"—— 第三方登录 ——"这种效果，写出代码。 <style> *{ text-decoration:none; } a{ color: #000; } </style>...
2019-04-13 19:32:51
497
2
原创 设置 margin 的上下和设置宽高无效，其他有效的元素有哪些？
设置 margin 的上下和设置宽高无效，其他有效的元素有哪些？1、和其他元素都在一行上；2、高和外边距不可改变；3、宽度就是它的文字或图片的宽度，不可改变；4、设置宽度width无效。5、设置高度height无效，可以通过line-height来设置；6、设置margin只有左右margin有效，上下无效；7、设置padding只有左右padding有效，上下则无效。注意元素范...
2019-04-13 19:14:40
2504
原创 代码执行后会发现 li 标签之间有间距，如何修改？
<style> ul{ width: 300px; height: 50px; } li{ width: 50px; height: 50px; background: blue; displa...
2019-04-13 18:56:37
1804
原创 HTML 标签是否支持自定义？该自定义标签所包含的属性是否也支持自定义？
HTML 标签是否能够自定义，标签所包含的属性是否支持自定义，如果可以那要怎样才能够实现？document.careatElement(“ccc”)
2019-04-13 18:12:21
3153
1
原创 盒子模型有时候会出现设置背景、边框无法撑大和设置内外间距异常，一般来说此类问题的原因是什么？
盒子模型有时候会出现设置背景、边框无法撑大和设置内外间距异常，一般来说此类问题的原因是什么？答：当前盒子模型是怪异盒子模型（盒子模型属性当中不含有 berder/padding）。...
2019-04-13 16:24:22
2025
原创 如何使用原生 js 给一个按钮绑定两个 onclick 事件？
代码如下： Var btn=document.getElementById(‘btn’); // 事件监听 绑定多个事件 var btn4 = document.getElementById("btn4"); btn4.addEventListener("click",hello1); btn4.addEventListener("click",hello2); function ...
2019-04-11 13:09:06
7738
原创 如何获取到浏览器 url 中的参数？
测试地址为：http://www.baidu.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23实例如下：function showWindowHref(){ var sHref = window.location.href; var args = sHref.split('?');...
2019-04-10 17:26:50
3081
原创 使用正则表达式验证邮箱格式？
需满足的验证逻辑:1）@之前必须有内容且只能是字母（大小写）、数字、下划线(_)、减号（-）、点（.）；2）@和最后一个点（.）之间必须有内容且只能是字母（大小写）、数字、点（.）、减号（-），且两个点不能挨着；3）最后一个点（.）之后必须有内容且内容只能是字母（大小写）、数字且长度为大于等于2个字节，小于等于6个字节；邮箱验证的正则表达式： ^[a-zA-Z0-9_.-]+...
2019-04-10 17:10:09
2782
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人