- 博客(38)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 canvas圆角矩形/边框/图片
// 圆角矩形roundRect(x, y, w, h, r, ctx) { ctx.save() ctx.beginPath() // 左上弧线 ctx.arc(x + r, y + r, r, 1 * Math.PI, 1.5 * Math.PI) // 左直线 ctx.moveTo(x, y + r) ctx.lineTo(x, y + h - r) // 左下弧线 ctx.arc(x + r, y + h - r, r, 0.
2021-12-16 17:39:39
1222
原创 element-ui上传视频获取时长
var audioElement = new Audio(file.url),duration;audioElement.addEventListener("loadedmetadata", function() { duration = audioElement.duration; console.log('时长：'+duration+'s')}) 根据场景在on-change或者before-upload等属性中使用。
2021-08-24 21:05:13
578
原创 uniapp H5图片压缩上传
compress.js/** * 参数说明： * imgSrc 图片url * scale缩放比例 0-1 * type 返回图片类型 默认blob * callback 回调设置返回值 */export function translate(imgSrc, scale, type , callback) { var img = new Image(); img.src = imgSrc; img.onload = function() { var that = .
2021-06-22 11:12:24
799
原创 uniapp 可拖拽进度条、滑动条、评分条、movable-area
uniapp movable-area简单应用sliderBar组件<template> <view> <view class="slider-box"> <view class="flex"></view> <movable-area class="sliderBar" :style="{width: (100 - minScore)+'%'}"> <view class="gone" :styl
2021-02-24 10:50:10
8492
10
原创 Nuxt去除data-n-head等默认属性
去掉例如以下属性：至于为什么要去掉呢，你永远不知道你的甲方有多**，举个栗子：一把辛酸泪 ~以下是解决办法：（1）安装 npm install cheerio（2）引入nuxt.config.jsimport cheerio from 'cheerio'export default {hooks: { 'render:route': (url, result) => { this.$ = cheerio.load(result.html,{decodeEn
2020-11-03 17:18:16
5756
15
原创 Nuxt 配置sitemap.xml
installnpm install @nuxtjs/sitemapnuxt.config.jsimport axios from ‘axios’modules: [ '@nuxtjs/sitemap' ]访问sitemap.xml自己的链接/sitemap.xml如：https://www.lgmyu.com/sitemap.xml如下表示成功：
2020-10-27 16:55:32
2148
4
原创 纯css 加载动画
NO.1<div class="NZ-loading-container loading-inline"> <div class="NZ-loading-item NZ-loading-cricel-1"></div> <div class="NZ-loading-item NZ-loading-cricel-2"></div> <div class="NZ-loading-item NZ-loading-cricel-3">
2020-10-22 15:17:07
245
原创 uniapp判断是否微信浏览器
// #ifdef H5 let ua = window.navigator.userAgent.toLowerCase() if (ua.match(/MicroMessenger/i) == 'micromessenger') { // do something } // #endif
2020-07-18 17:30:47
5740
原创 css改变图片颜色(加有色滤镜)
图片需要改颜色的部分需调成纯黑色，背景为纯白色<style type="text/css"> .box{ width: 230px; height: 200px; background-image: url(img/bg.png),linear-gradient(#C62F2F,#C62F2F); background-blend-mode: lighten; background-size: 100% 100%; }</style><div c.
2020-07-07 15:09:27
2858
原创 uniapp scroll-view scroll-top设置无效
uniapp scroll-view scroll-top设置无效根据需求，切换到 scroll-view 滚动区域时 滚动条回到顶部，初步尝试在切换的时候设置 this.scrollTop = 0，发现无效，一番查证：当重复设置某些属性为相同的值时，不会同步到view层。 例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。解决如下：
2020-06-04 13:13:49
7262
7
原创 Build settings from command line: SDKROOT = iphoneos12.1 note: Using new build system note: Plannin
HBuilder ios云端打包报错如下：亲测有效（仅针对我），前方巨坑~~~~~~~在自动生成图标这一栏，选择自己需要的png图片（官方建议是1024X1024，我的是256x256的也行）；不选中“不替换手动设置的图标”；点击“自动生成所有图标并替换”，系统会生成android、ios各个尺寸的logo，并自动填充到下方对应的栏目里，我当时是自己分开选的本地logo。（愚...
2019-11-28 16:35:21
3017
1
原创 uniapp打开App Store下载页面
if(platform == 'ios'){ appUrl = 'itms-apps://itunes.apple.com/cn/app/idXXXX?mt=8';// XXXX为对应的AppID plus.runtime.openURL(appUrl);}
2019-11-27 17:27:03
3207
原创 uniapp 报错：this.$refs.mpvueCityPicker.show is not a function...
不要放在循环里面。。。
2019-11-14 15:04:56
2286
原创 niceScroll报错：Unable to preventDefault inside passive event listener due to target being treated as p
niceScroll插件报错：Unable to preventDefault inside passive event listener due to target being treated as passive.滑动时反复报错。粗暴的解决办法就是：jquery.nicescroll.js
2019-05-13 11:49:22
1768
原创 css中margin属性值百分比的使用
margin使我们使用得很频繁的一个属性，用来设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度，可以有 1 到 4 个值。例子：margin:10px 5px 15px 20px;说明：属性值描述auto浏览器计算外边距length规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px%规定基于父元素的宽度的百分比的外边距inheri...
2019-02-21 17:27:41
13164
3
转载 关于对闭包的理解、概念、用途、注意点
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 var n = 999; function f1(){ alert(n);...
2019-02-01 13:09:30
520
原创 h5复制粘贴文字到剪切板
需求：点击按钮时复制某段文字，转发时可以直接粘贴&lt;div id="copy-txt"&gt; 前方高能预警，朋友圈文案在这里哦：**放大招，一分坐公交，还能领红包！&lt;/div&gt;&lt;button onclick="copyTXT()"&gt;复制&lt;/button&gt;
2019-01-26 11:32:00
14599
原创 页面加载进度条百分比实现的伪方法
网页进度条是能够带来更好的用户体验，避免加载过程中一度出现空白页面，但是由于目前浏览器不可以直接获取正在加载对象的大小。所以我们无法通过数据大小来实现 0%~100% 的加载显示过程。因此各种"偏方"随之而来，给出页面加载进度的一个“假象”，其实用户并不在乎页面是不是真的加载到了百分之几，更多人关心只是还要loading多久，so，以假乱真，让用户觉得希望就在下一秒 。٩(๑&gt;◡&lt;๑)...
2019-01-26 11:26:00
5482
原创 安卓H5 微信浏览器location.reload()刷新页面无效
初步判断： 微信浏览器自身缓存，更多参考解决方案： window.location.href 代替，并在url后加时间戳或者随机数window.location.href = location.href+'?time='+((new Date()).getTime());...
2019-01-25 16:23:36
1854
原创 iOS微信端 audio 自动播放背景音乐
最近有一个要求添加背景音乐的需求，我jio得OK，音频文件发给我就好啦(～￣▽￣)～ 卟啦卟啦写完了，浏览器调试一切都没问题，最后测试才发现iOS系统的没 有 音 乐！！！嗯？瞬间就jio得才疏学浅~最后，也算是得到了解决，￣へ￣，iOS基于安全考虑的限制，不允许自动播放audio和vedio。解决方案： 监听WeixinJSBridgeReady事件微信的JS API建立在微信壳浏览...
2019-01-24 11:39:02
630
原创 canvas实现截屏功能 H5页面生成图片
最近发现各种测试结果，未来预测遍布朋友圈，生成个性名片，保存测试结果等等应用成了推广策划们的"常用技俩"，总结一点就是网页截屏，通过用户自主填写或是答案生成图片然后发朋友圈或是其他的圈。而html2canvas 能帮助前端小白实现这一功能：html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。html2canvas 脚本将当页面渲染成一个Canvas图片，通过读取DO...
2019-01-16 16:33:13
9016
原创 微信H5测试答题抽奖
通过答题参与抽奖活动。根据用户选择的答案给出一个测评等级或系统评价如图：思路很简单：得到相应的题目和答案$(jason).each(function (j,e) { let jason=(that.data[i].answer)[j]; let keys = []; for (let p1 in jason) { if (jason.ha...
2019-01-09 15:56:49
4589
2
原创 js动态修改@keyframes属性值
CSS3中增加了@keyframes规则用于创建动画，创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。也就是说通过改变CSS样式而达到动画的效果，所以，要动态去改变动画，只有修改样式。document.styleSheets这个接口可以获取网页上引入的link样式表和style样式表。如下：拿到样式表后就可以操作样式啦~insertRule方法用来给当前样式表插入新的样式规则。...
2018-12-26 14:56:35
29770
3
原创 H5抽奖小游戏万圣节抓南瓜
效果如下：游戏规则：把行走的南瓜拖到下方的&quot;锅里&quot;游戏倒计时30s，时间越短南瓜速度越快，抓住的南瓜积分达到120分即可获得抽奖机会整体思路：圈出南瓜行走区和煮锅区南瓜从行走区右方随机位置出现给南瓜添加“跳走”的动画南瓜“跳出”行走区后删除拖曳南瓜的时候检测touchmove事件，实时改变南瓜的位置拖曳的南瓜到达煮锅区的时候，南瓜被煮增加积分，删除南瓜时间到判断积分是...
2018-12-24 16:40:47
1080
原创 js获取一个区间随机数
var max = 70;var min = 30;var random = Math.random()*(max-min)+min;console.log(random);
2018-12-24 11:03:13
8931
2
原创 a标签里嵌套a标签
由于需求需要在a标签里面再嵌套一层a标签：<a href="javascript:;"> father tag A <a href="javascript:;">Child tag A</a></a>结果样式乱了套，一看，耶？明明是父子关系，浏览器解析的结果却是：一番查阅：a标签嵌套a标签，浏览器会自动添加结束符号。而H...
2018-12-20 14:21:47
5136
2
原创 H5 ios移动端，键盘收起以后页面不缩回
输入框所在的元素用了position:fixed，安卓端一切正常，ios系统在input失焦后键盘缩回去了但是页面不归位。可能原因：键盘事件触发，导致position:fixed失效。解决办法：$("input").on("blur",function(){ window.scroll(0,0);//失焦后强制让页面归位});...
2018-12-19 11:01:03
11102
1
转载 H5监听摇一摇和手机倾斜事件（重力感应）
接口介绍：摇一摇功能（DeviceMotion）摇一摇功能是很多原生APP都可以实现的功能，如微信中的摇一摇找好友，QQ音乐中的摇一摇换歌等。它们都是利用了手机加速传感器提供的API，当监听到手机加速变化的事件时，根据获取的加速值来执行不同的动作。Web APP中HTML5 也提供了类似的接口，就是DeviceMotionEvent。DeviceMotion封装了运动传感器数据的事件，...
2018-12-19 10:46:34
4150
原创 WebStorm和vue的一系列设置
一、WebStorm支持Vue1、安装vue插件（1）File --&amp;amp;amp;gt; Settings --&amp;amp;amp;gt; Plugins ，点击Browse repositories，在浏览存储库中搜索：（2）搜索vue，点击 Install 进行安装，安装之后点击 Restart WebStorm 重启：2、 添加vue模板（1）File --&amp;amp;amp;gt; Settings --&a
2018-12-14 13:52:12
2363
原创 vue1.0到vue2.0的变化
1. 组件模板不再支持片段代码，必须有一个顶级元素包裹，例如：version1.0：&lt;template&gt; &lt;h3&gt;h3标签&lt;/h3&gt; &lt;p&gt;p标签&lt;/p&gt;&lt;/template&gt;version2.0：&lt;tem
2018-12-06 14:02:57
660
原创 jQuery创建、复制、替换、包裹、删除节点
append()、prepend()、appendTo()、prependTo()、after()、before()、insertBefore()、insertAfter()创建子元素类：创建的内容作为目标元素的子元素。（1）append()/appendTo() :目标元素结尾处插入内容(标签、文本内容)。$(&amp;amp;amp;quot;.box&amp;amp;amp;quot;).append(&amp;amp;amp;quot;&
2018-12-04 10:24:28
814
原创 原生JS兼容移动端的轮播图
关于轮播图原生JS兼容IE9+等各大浏览器兼容移动端自适应（根据图片原比例）左右箭头切换点击索引切换移动端滑动切换只需修改图片路径&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt;&amp
2018-12-03 14:02:46
1161
原创 CSS布局模型
流动模型（Flow）浮动模型 (Float)层模型（Layer）流动模型默认的网页布局模型，块级元素自上而下分布，宽度为100%，独占一行；内联元素从左到右水平分布，内容宽高决定元素的宽高。浮动模型 (包裹性)浮动模型具有包裹性，我把包裹性比喻为让元素display：inline-block，我们默认情况下的div是独占一行，宽度以100%显示的，而一旦给这个div添加了floa...
2018-11-22 14:42:19
438
原创 正则表达式中如何添加变量
如果给义一个字符串或是数组加入变量，是非常简单的事情，但是我们不能用这种常规思维来给正则表达式加入变量，比如var param = 3;var reg = "/^[0-9]+"+param+"[a-z]+$/"; ✘var reg = /^[0-9]+"+param+"[a-z]+$/; ✘var reg = /^[0-9]+$/+param+/^[a-z]+$/; ✘首先不考虑准确性...
2018-11-21 17:30:02
33672
原创 常用的正则表达式
正则验证在表单的提交中使用相当频繁，在此整理了一下常用的表达式。（1）用户名 : 14个英文或7个汉字（数字、下划线）var regName = /^([\u4e00-\u9fa5\d_]{2,7})$|^([a-zA-Z0-9_]{3,14})$/;（2）手机号: 中国大陆手机号var regPhone = /^1[356789][\d]{9}$/;var regTel = /^...
2018-11-21 16:17:05
803
原创 伪元素之img标签
伪元素之 img 标签CSS伪元素:before :after等是用来添加一些选择器的特殊效果，在实际开发中我们会经常用到。顾名思义，“伪元素”就是伪装的元素，它不是真正的元素却通过样式就能有着和元素一样的表现，我们常见的块级、行块、行内元素大多都是可以设置伪元素的。我们都知道img元素的外观和尺寸是由外部资源决定的，我们称 替换元素。jǚ gè lì zi举个栗子：img{ ...
2018-10-31 09:54:58
4964
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人