自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 guid 生成

全局唯一标识分区表(GUID Partition Table,缩写:GPT)是指全局唯一标示磁盘分区表格式。它是可扩展固件接口(EFI)标准(被Intel用于替代个人计算机的BIOS)的一部分,被用于替代BIOS系统中的以32bits来存储逻辑块地址和大小信息的主引导记录(MBR)分区表。 ...

2020-03-27 10:14:13 20 0

原创 file 获取本地文件路径(图片)

代码直接用就可以了,当然请注意浏览器版本 //传入file文件 getObjectURL(file) { let url = null; if (window.createObjcectURL != undefined) { ...

2020-03-17 15:59:01 108 0

原创 ajax请求

原声实例 var result = null;//在不知道值是什么类型的时候 可以通过null去赋值 var rep = new XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(); rep.open("GET",&q...

2020-03-13 11:58:28 30 0

原创 全选,取消,单选拼接ID

本案例是在react项目实战中使用的,需求是把选中的列表项的id以“,”号拼接作为参数,修改状态。后台给的是数据列表,并没有可供是否选中的参数作为判断依据。这就需要前端多相关的数据处理。 案例分析 1,首先需要对后台数据保存本地,遍历添加一个checket=false属性,因为开始是未选中...

2020-03-12 15:54:39 26 0

原创 倒计时

function TimeDown(params) { // console.log(endDateStr) //结束时间 let endDate = new Date(endDateStr.replace(/-/g,"/"));...

2020-03-12 15:07:43 22 0

原创 数组{对象}去重 [ {},{},{}]

先看实例的原数组; //原数组对象 [ {name: "NBA美国职业篮球联赛", matchScreen: true}, {name: "NBA美国职业篮球联赛", matchScreen: true}, {name: &quo...

2020-03-02 10:32:38 31 0

原创 深拷贝(多层次数组对象的拷贝)

在开发过程中很多时候需要对多层级数组或者对象中的某一些数据做特殊处理,但是简单的重新赋值会改变原来的对象,所以处理起来就很麻烦。简单的浅拷贝就满足不了我们的需求了。当然ES6提供了深拷贝的方法JSON.stringify() 和JSON.parse(),基于实际的开发经验,我也有自己的深拷贝的方法...

2020-01-15 10:56:59 30 0

原创 滚动条样式

.scrollBarStyle { &::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } ...

2019-12-20 16:50:49 17 0

原创 关键帧动画,折叠面板(parseFloat,requestAnimationFrame,cancelAnimationFrame)

当前项目是在react项目中的,所以本案例代码改变数据申明和数据更改都是react的方式 效果图如下: 首先声明几个变量 constructor(props) { // 变量申明 super(props); this.state = { ...

2019-12-09 18:09:44 28 0

原创 webpack(process.env.NODE_ENV)build打包自动区分环境

webpack每次打包都要切换地址(很烦) 前端项目在每次打包的时候都要求切换后台地址,如果有哪次忘记了切换地址就打包的,发到线上就报错了,又要修改地址后再打包。虽然这不是什么难事,就花费时间而已,但是作为一名合格的码农,就是要遵循偷懒原则,所以我们要做一个判断处理。 process.env....

2019-11-28 16:09:33 250 0

原创 数组遍历区分父子级重排遍历多维数组

背景:在开发实战中,后台传给前台的数据是一个数组,数组根据id和pId一一对应具有父子级关系, 如:第一个对象 a.id='1' ;a.pid='0'; 第二个对象 b.id='5'; b.pid='1'; 第三...

2019-11-06 15:53:57 96 0

原创 时间戳转换成时间格式

timestampToTime(timestamp) { var date = new Date(timestamp); //时间戳为10位需*1000,时间戳为13位的话不需乘1000 var Y = date.getFullYear() + "-";...

2019-11-01 15:03:55 20 0

原创 DOM事件,捕获和冒泡 自定义事件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Eve...

2019-02-13 11:16:47 118 0

原创 原生JS --360度全景展示

介绍:本案是鼠标任意在桌面上(左右)滑动,展示360度各个角度的展示图。 实现方法:要各个角度的图片(n张),图片名序号排列(0,1,2,3……n),通过鼠标点击事件(document.onmousedown),鼠标滑动事件(document.onmousemove)和鼠标离开事件(docume...

2018-09-26 14:37:08 1489 0

原创 vue 封装键盘组建

 本案例是根据实战需求写的,所以功能也是根据项目需求来写的,但是主体思路是大同小异的。先看效果图  <template>部分html代码 <template> <div class="keyboard&qu...

2018-09-19 18:07:35 903 0

转载 新增和关闭(新)浏览器页面

从新打开一个浏览器窗口页面(不是在原来的页面窗口上新建一个页面) window.location.origin + '/#/help',链接路由地址 window.open(window.location.origin + '/#/help',&quo...

2018-09-12 10:45:44 212 0

原创 主输入框控制子输入框,单个子输入框自行控制,实时计算总和

本案是一个游戏,一个主输入框输入金额,全部子输入框的金额也跟着变化,然后子输入框单独输入金额,自己变化,然后总金额要实时根据所有子输入框金额计算总价。   以上两张图应该可以看明白,但是需要说明一下的是,上面列表的数据是从前一个页面以数组的形式传过来的,而且输入框内的数据初始值是0,所以列...

2018-09-08 16:53:21 140 0

原创 Vue js实时显示当前时间

当前实例在vue项目中 export default { data(){ return{ nowTimes:{ yy:0, dd:"00", ...

2018-09-08 15:02:52 28006 9

原创 时间戳转化成时间格式

timestampToTime(timestamp) { var date = new Date(timestamp); //时间戳为10位需*1000,时间戳为13位的话不需乘1000 var Y = date.getFullYear() + "-"...

2018-09-03 15:43:34 133 0

原创 vue 移动端 封装分页插件

分页插件在手机移动端很常见,插件很多,但是因为分页需求不同,所以先选择什么插件也是一个纠结的问题。但是分页插件的核心思路是大同小异的,与其老是用别人的东西,不如自己写一个来的实在。 本项目技术栈:vue   vuex  less  效果图如下: 功能思路: 1.开始显示总条数和第一页 ...

2018-08-17 16:30:44 3151 3

原创 Vuex,iView UI面包屑导航使用扩展

本案例是基于Vuex的公共数据库,你在了解本案例之前要了解Vuex的使用方法。https://www.iviewui.com/components/breadcrumb打开网址我们可以知道这个组件的面包屑导航是基于路由跳转的。但是我们项目中常常用到单页面查询面包屑导航。小生开始为这个纠结好久。然后...

2018-05-04 12:14:04 6470 4

原创 Vue.js阿拉伯数字转化成人民币的中文

输入框内输入数字,后面显示中文大写的金额在template中在输入框数字改变的时候实时更改大写金额数  vue 的@on-change事件 @on-change="NumberToChinese(formCustom.passwd)"<template&g...

2018-04-02 14:55:45 3687 0

原创 Vuex使用实记

我们都知道Vuex是一个专门为vue.js应用程序开发的状态管理模式。通俗点说,就是把我们所使用的变量全部放在一个地方(容器)存起来。在页面复杂而且很多的时候,有些变量是要实时更改变化的,而且很多组件都会用到相同的变量。正因为把所有的变量存在一起,是方便统一管理更新变量状态,方便每一个组件实时调配...

2018-03-22 18:21:50 190 0

原创 前端面试题

 前端面试题整理  2017.03.12  Poetry  shudong.wang 目录 $HTML, HTTP,web综合问题 1、前端需要注意哪些SEO2、的title和alt有什么区别3、HTTP的几种请求方法用途4、从浏览器地址栏输入url到显示页...

2018-01-15 10:44:33 3496 0

转载 移动端悬浮球

这是一个常见的案例,在写移动端的时候。很多网站APP 都会有类似手机的悬浮球,可以在界面上随意拖动,然后点开就是一个连接,效果图如下 图中有一个客服的悬浮球点击是一个窗口连接,可以随意滑动,代码如下<!DOCTYPE html> <html lang="en&qu...

2017-12-30 15:05:29 1799 1

原创 vue 组件弹出框点击显示隐藏

本案实现的效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了。所以只能在弹出页面点击取消实现关闭隐藏弹出框。这样就需要写两个点击事件,但是两...

2017-12-28 20:35:34 13689 5

原创 Vue 点击时间获取时间段查询

最近做了一个按时间段查询的案例,效果图如下 html代码<template> <div class="personalReport_time"> <input type="date" :max="th...

2017-12-26 18:06:07 5374 1

原创 git 上传代码基本使用

初始化操作: git clone 地址 //将远程项目导入本地 此时默认的分支为master 该分支不可修改 所以必须切换到别的分支 你才能开始修改代码 不然你本地改的代码都要作废。 git branch 分支名 //创建分支 git checkout 分支名 //切...

2017-12-25 14:56:18 199 0

原创 vue动态路由配置

最近写的一个项目,需要配置一个动态的路由,就是路径调到一个页面上去,而且后面的参数是可传可不传的。废话不多说看代码…… 在index.js文件下export default new Router({ routes: [ { //根路由 path: '...

2017-12-15 10:35:45 1816 0

原创 Vue 弹出层时 禁止页面滑动

上代码 /***滑动限制***/ stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; docu...

2017-12-11 17:42:11 18633 3

原创 二级菜单点击显示当前内容

案例描述 最近做了一个二级菜单点击事件的效果,一级菜单有3个,二级菜单是固定的,而且html布局并不是父子级关系,具体请看效果图如下 html结构入下<div> <ul> <li>您好!日期</li> ...

2017-12-09 12:19:54 772 0

原创 Vue2.0缓存

最近在做一个手机端的网站,遇到页面的缓存问题,自己由于经验不足,走了弯路。由于有些页面需要缓存,有些页面不需要。所以用全局缓存是不行的,必须要使用单页面的缓存。 单页面缓存 本案列适用于跳转到下一页然后回到当前页时需要显示第一次进入本页的信息。 1.在index.js配置路由的文件中设置:e...

2017-12-09 11:43:52 4834 0

原创 基于vue2.0版本的手机端mint-ui 的Loadmore上拉刷新下拉加载的方法,对于初学者来说很有帮助,开始写走了很多弯路,网上找到这个方法,简单实用,不多说看代码……

class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">      "loadTop" :bottom-method="...

2017-11-24 21:06:17 1177 0

原创 css3 弹性盒 常用属性笔记

Css3-3 多列: column-count:设置列的个数 可以把一行文字分割成设置的列的个数。 如果设置了列的宽度 当列的最小宽度和 不够总宽度的时候 列的数量就会缩小 Column-width:可以设置列的最小宽度 Column-span:设置列的横跨数量 (常用于设置标题) co...

2017-08-16 19:03:32 408 0

原创 Css3 常用选择器 背景 边框 渐变

选择器: Ele~ele2: 选择Ele 后面的ele2标签p~ul{background:#ff0000;} //为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景:Ele[key(^$*)=value] 选择对应的元素(^开头,﹩结束*包含)div[class^="t...

2017-08-14 21:26:40 357 0

原创 正则表达式使用规则

正则表达式 使用环境: 1.登录:密码验证(字符串+数字)”ucai123” 2.注册:邮箱、手机号、帐号 3.解析歌词(lrc)创建方式: 1.new RegExp(); 如:公式:var regexp = new RegExp(“匹配的规则”,”修饰符”); var regexp...

2017-08-09 19:10:49 269 0

原创 数据库 webSQL使用方法

webSQL 是一个操作数据库的对象 里面封装了操作数据库的方法是通过sql语句操作数据库的(创建数据库、建表、增删改查) Sql语句?是一个可以操作数据库的字符串 类似正则的规则 他不会自己执行,需要各个平台单独操作数据库的函数 执行 这个sql语句 才能让sql执行在webSQL里面 ...

2017-08-09 19:06:19 3198 2

原创 Html5中数据存储的方式

1.Storage 2.webSQL 数据库操作 3.Indexeddb 数据库操作 在HTML5本地存储中,Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了Web Storage(Local Storage和Session Storage)与...

2017-08-08 19:13:37 213 1

原创 应用缓存(Application Cache)

应用缓存是在移动设备没有网络的情况下。不出现404报错,并且可以基本使用。 使用步骤: 1.需要有一个引用缓存文件,.manifest为尾缀的文件 a)是用于配制需要配制的缓存的文件 b )在不同情况下缓存的内容 2.在html 中引入manifest文件html文件代码<!DOC...

2017-08-07 18:55:49 222 0

原创 web前端 H5 百度地图API 案列 <连续获取十个地址 并显示位置信息>

思路: 1 先右键开启可以收集的功能 2 双击地图 添加经纬度到数组 3 添加到10个 关闭收集的功能 4 地址收集完成后再地图上显示这是个地标(图标) 5 创建一个信息窗口的对象 6 单击图标显示位置信息步骤 1在html中先设置格式和引入百度地图API文件、js文件...

2017-08-04 19:39:44 3178 0

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