自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(25)
  • 资源 (1)
  • 收藏
  • 关注

原创 开发小程序碰到的问题

背景开发小程序偶尔会需要携带数据跳转页面,一般是在链接上带参数一起跳转页面。有些参数有特殊符号或者值是一个json,这里就需要借助encodeURIComponent()对参数值进行编码,到目标页面后再用decodeURIComponent()进行解码,一直这样没碰到什么问题。后来需要增加分享功能,这时候还是一样在分享的链接带上参数,进行编码就可以了,本地一直没问题,直到传到体验版,这时候发现解码出现了问题,解码结果不是我们的数据。。。还是编码的结果。解决将上述解码的结果再次解码,就得到原先的数据!!

2021-07-01 14:12:44 95

原创 clip-path

使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。语法clip-path: <clip-source> | <basic-shape> | <geometry-box> | none;<clip-source>: 剪切元素的路径<basic-shape>: 定义图形,有四个值inset , circle , ellipse , polygon<geometry-box>: 它将为基本形状提供相应的参考框盒。通

2021-06-09 18:38:29 482

原创 弹性布局 flex属性详解

弹性布局flex属性详解弹性布局里的flex属性主要用于容器里子元素的空间分配,flex属性有三个属性值,分别为flex-grow,flex-shrink,flex-basis语法flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]默认值为0 1 auto。后两个属性可选flex-grow:子元素的放大比例,默认0(不放大,即使容器有剩余空间,也不使用)flex-shrink:子元

2021-04-01 18:08:32 590

原创 JavaScript数组方法

可向数组的末尾添加一个或多个元素,并返回新的长度语法arrayObject.push(item1,item2,…,itemX)用于删除并返回数组的最后一个元素语法arrayObject.pop()返回值arrayObject 的最后一个元素说明pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。用于把数组的第一个元素从其中删除,并返回第一个元素的值语法ar

2021-02-01 19:02:53 175

原创 flex布局

flex布局简介Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性使用给元素添加display: flex 就能使用.box { display: flex;}行内元素也可以用.box { display: inline-flex;}webkit内核的浏览器须加-webkit前缀.box { display: -webkit-flex; display: flex;}注:使用flex布局后,子元素的flo

2020-12-29 17:28:54 128

转载 vue中ref的作用以及使用

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例1、获取dom元素<template> <div id="app"> <div ref="testDom">11111</div> &lt...

2020-04-22 16:58:25 1263

原创 vue 使用axios访问后台数据

1、安装axios和qsaxios是一个基于Promise用于浏览器和node.js的HTTP客户端。特征1、从浏览器中创建XMLHttpRequest2、从node.js发出http请求3、支持Promise API4、拦截请求和响应5、转换请求和响应数据6、取消请求7、自动转换JSON数据8、客户端支持防止CSRF/XSRF安装npm install axios --s...

2020-04-17 15:37:55 840

原创 git 提交代码

本地仓库未创建 git init git add . (“.”表示提交全部文件,若要提交某个文件可把“.”换成文件名) git commit -m "first commit" git remote add origin url.git(url为仓库地址) git push -u origin master本地仓库已创建git remote add origin url.git(u...

2020-04-10 16:58:07 135

原创 文字轮播效果

这里写自定义目录标题纵向横向纵向代码ul { list-style: none; margin: 0; padding: 0; } #content li { font-size: 14px; height: 20px; line-height: 20px; ...

2020-01-10 17:06:04 168

原创 开发前端项目遇到的问题

移动端new Date()new Date(“2019-12-30 23:59:59”).getTime(),苹果手机ios用js的Date() 获取到的日期时间,显示NaN,安卓手机正常。解决方法:new Date(“2019/12/30 23:59:59”).getTime()。正则替换方法:“2019-12-30 23:59:59”.replace(/-/g, ‘/’)audio标...

2019-12-30 11:11:51 908

原创 PhotoSwipe插件,类似手机相册查看图片,可左右滑动,缩小放大

下载地址:https://github.com/dimsemenov/photoswipe#引入 <link rel="stylesheet" href="js/photoswipe/photoswipe.css"> <link rel="stylesheet" href="js/photoswipe/default-skin/default-skin.css">...

2019-10-24 15:59:44 853

原创 Canvas相关知识点

html结构&lt;canvas id="canvas"&gt;当前浏览器不支持canvas,请更换浏览器后再试&lt;/canvas&gt;注意:设置canvas的宽高建议不用css设置,可在canvas标签里写或者在script里写canvas.width = 800;canvas.height = 800;canvas先设置状态再进行绘制绘制线context.moveTo...

2019-03-01 14:57:41 317

原创 移动web HTML5使用photoswipe模仿微信朋友圈图片放大浏览

原文网址:http://www.cnblogs.com/theroad/p/5397229.html使用js框架是PhotoSwipe。PhotoSwipe是一个图片放大插件,兼容pc和移动端,经历过多个版本的迭代且一直在不断更新,踩过的坑不知凡几,在移动端有着巨大的优势。1、可控制多种风格如:标题、分享、全屏按钮,点击事件、是否加入字幕,背景透明等。2、可支持移动端触摸手势兼容pc端...

2019-02-15 13:34:41 763

转载 vscode es6语法配置检测

话说,为了配置vscode,es6语法自动检测,百度的各种攻略,踩坑不少,最重要还没用。。。。。。将最后解决的方法分享大家,共同进步!配置方法:1.插件下载 ESLint,JavaScript(ES6) code snippets打开vscode —点击右侧扩展商店—搜索框输入es,找到以下2个插...

2019-02-02 11:28:48 3554

原创 移动端H5页面开发的几种方法

单位: px宽度百分比,高度px在不同屏幕下的效果是不一样的,可用媒体查询(@media)对不同宽度的手机进行适配,麻烦,不推荐使用单位:rem1、flexible用法:https://blog.csdn.net/sinat_27358671/article/details/827722062、原生js重置rem单位(function (doc, win, imgW) { ...

2019-02-02 09:48:30 21601 2

原创 雪花飘落特效改成落下红包雨,几秒钟后雪花消失

有些手机网站,进入首页会有雪花飘落,或者其他什么飘落,雪花飘落特效是网上找的一个插件,链接:http://www.bvbcode.com/cn/btqof3gv-893846-down。 现在有一个需求,将雪花改成红包,但是红包不要一直飘,只需要飘几秒钟,几秒钟之后红包消失。因此在雪花飘落特效的基础上进行修改。 飘落图片的大小是随机的,如下图,红框里为随机生成的大小,最小值...

2019-01-31 17:17:13 767

原创 数字从0增长到指定数字

效果如图,数字从零开始增长,增长到123456时停止HTML&lt;div id="num"&gt;0&lt;/div&gt;css#num { margin-top: 100px; text-align: center;}#num img { display: inline-block; width: 52px;}jsvar num = 1...

2019-01-29 14:26:00 3241

转载 VsCode快捷键

按 Press功能 FunctionCtrl + Shift + P,F1显示命令面板 Show Command PaletteCtrl + P快速打开 Quick OpenCtrl + Shift + N新窗口/实例 New window/instanceCtrl + Shift + W关闭窗口...

2019-01-28 11:21:02 170

原创 手机网站,第一次进入网站显示广告海报,浏览其他页面回到首页不显示

很多APP、网站刚进入都会显示广告弹窗或者海报,浏览其他页面返回首页不再显示,当关闭网站再重新进入到首页再显示,可以考虑用cookie或者本地存储,本文介绍的是H5的本地存储。关于HTML5本地存储的知识HTML本地存储有两个对象:localStorage和sessionStorage。localStorage: 永久储存,删除数据需要手动删除;sessionStorage: 浏览器关闭数...

2019-01-25 16:54:30 832

原创 Date对象的一个小例子

简单的一个date对象的小例子。功能,获取当前月份的天数以及对应周几。1、获取某一个月份的天数。例如2月份有几天,代码如下var date = new Date(2019,2,0);var days = date.getDate();运行效果如下:2019年2月份有28天(若为闰年,则为29天,不需要再进行判断)2、根据日期获取星期几,例如获取2019年1月22日是星期几var d...

2019-01-22 15:25:58 550

原创 Date对象

获取时间var t = new Date();获取时间的方法t.getYear();//获取年份:从1900年开始计算,获取到的是2~3位数的年份t.getMonth();//获取月份:月份从0开始计算,0代表1月,11代表12月t.getDate();//获取天数t.getDay();//获取星期几:0~6 从0开始,0代表周日t.getHours();//获取小时t.getM...

2019-01-21 13:59:25 138

原创 学习vue 目录结构

创建完项目后,目录如下图 目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录,包括端口号等。我们初学可以使用默认的。 node_modules npm 加载的项目依赖模块 src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件: assets: 放置一...

2018-10-26 15:45:46 122

原创 学习vue——创建项目、打包部署项目

用命令提示符安装vue,创建vue项目一、安装node.js(www.runoob.com/nodejs/nodejs-install-setup.html)检查Node.js版本,用cmd打开命令提示符node --version二、安装vuenpm install vue若用该方法安装,由于npm是国外的,速度会非常慢,建议先安装淘宝镜像npm install -g cnpm...

2018-10-08 15:08:47 217

原创 关于图标的使用

现在很多小图标都用到了字体库,例如:Font Awesome(http://fontawesome.dashgame.com/), 好处就是保证图标不失真,还可以随意改变图标的颜色以及大小。做移动端的时候,一般图标建议用字体库或者svg,如果图片是图片,可能在不同分辨率的手机下,图标可能会有锯齿甚至模糊,字体库的图标大小可以用font-size来控制。一、Font AwesomeAwes...

2018-09-30 10:58:16 238

原创 flexible.js的使用

移动端项目,考虑到兼容性,现在使用比较多的是用rem。flexible.js是淘宝为了适配移动端开发的一个插件。首先,引入文件,引入flexible.js和flexible.css 或者flexible_css.js,flexible.js;其次,设计稿一般以iphone6的尺寸为标准,宽度为750px;最后,计算方式为: 测量的尺寸/75例:测量一个div的高度为75px,则转化为re...

2018-09-19 14:57:05 8413

flexible.js

淘宝的网页手机端采用了flexible.js对移动端进行适配,设计图一般为750px,单位为rem,计算方式为设计图测量的宽度/75(若设计图为640px,则应除以64)。例如,测量某一个div的高度为75px,则换算成rem为:75/75=1rem。

2018-09-19

空空如也

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

TA关注的人

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