JS/jQ
关注
分享
扫一扫
九牛一毛
蒋不会
行你所行，听从你心，无问西东。
展开
-
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 · 1159 阅读 · 0 评论 -
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 · 563 阅读 · 0 评论 -
iOS微信端 audio 自动播放背景音乐
最近有一个要求添加背景音乐的需求，我jio得OK，音频文件发给我就好啦(～￣▽￣)～ 卟啦卟啦写完了，浏览器调试一切都没问题，最后测试才发现iOS系统的没 有 音 乐！！！嗯？瞬间就jio得才疏学浅~最后，也算是得到了解决，￣へ￣，iOS基于安全考虑的限制，不允许自动播放audio和vedio。解决方案： 监听WeixinJSBridgeReady事件微信的JS API建立在微信壳浏览...原创 2019-01-24 11:39:02 · 614 阅读 · 0 评论 -
页面加载进度条百分比实现的伪方法
网页进度条是能够带来更好的用户体验，避免加载过程中一度出现空白页面，但是由于目前浏览器不可以直接获取正在加载对象的大小。所以我们无法通过数据大小来实现 0%~100% 的加载显示过程。因此各种"偏方"随之而来，给出页面加载进度的一个“假象”，其实用户并不在乎页面是不是真的加载到了百分之几，更多人关心只是还要loading多久，so，以假乱真，让用户觉得希望就在下一秒 。٩(๑>◡<๑)...原创 2019-01-26 11:26:00 · 5382 阅读 · 0 评论 -
canvas实现截屏功能 H5页面生成图片
最近发现各种测试结果，未来预测遍布朋友圈，生成个性名片，保存测试结果等等应用成了推广策划们的"常用技俩"，总结一点就是网页截屏，通过用户自主填写或是答案生成图片然后发朋友圈或是其他的圈。而html2canvas 能帮助前端小白实现这一功能：html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。html2canvas 脚本将当页面渲染成一个Canvas图片，通过读取DO...原创 2019-01-16 16:33:13 · 8932 阅读 · 0 评论 -
关于对闭包的理解、概念、用途、注意点
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 var n = 999; function f1(){ alert(n);...转载 2019-02-01 13:09:30 · 514 阅读 · 0 评论 -
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 · 1746 阅读 · 0 评论 -
H5 ios移动端，键盘收起以后页面不缩回
输入框所在的元素用了position:fixed，安卓端一切正常，ios系统在input失焦后键盘缩回去了但是页面不归位。可能原因：键盘事件触发，导致position:fixed失效。解决办法：$("input").on("blur",function(){ window.scroll(0,0);//失焦后强制让页面归位});...原创 2018-12-19 11:01:03 · 10982 阅读 · 1 评论 -
H5监听摇一摇和手机倾斜事件（重力感应）
接口介绍：摇一摇功能（DeviceMotion）摇一摇功能是很多原生APP都可以实现的功能，如微信中的摇一摇找好友，QQ音乐中的摇一摇换歌等。它们都是利用了手机加速传感器提供的API，当监听到手机加速变化的事件时，根据获取的加速值来执行不同的动作。Web APP中HTML5 也提供了类似的接口，就是DeviceMotionEvent。DeviceMotion封装了运动传感器数据的事件，...转载 2018-12-19 10:46:34 · 3937 阅读 · 0 评论 -
h5复制粘贴文字到剪切板
需求：点击按钮时复制某段文字，转发时可以直接粘贴<div id="copy-txt"> 前方高能预警，朋友圈文案在这里哦：**放大招，一分坐公交，还能领红包！</div><button onclick="copyTXT()">复制</button>原创 2019-01-26 11:32:00 · 14563 阅读 · 0 评论 -
常用的正则表达式
正则验证在表单的提交中使用相当频繁，在此整理了一下常用的表达式。（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 · 786 阅读 · 0 评论 -
正则表达式中如何添加变量
如果给义一个字符串或是数组加入变量，是非常简单的事情，但是我们不能用这种常规思维来给正则表达式加入变量，比如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 · 33137 阅读 · 0 评论 -
CSS布局模型
流动模型（Flow）浮动模型 (Float)层模型（Layer）流动模型默认的网页布局模型，块级元素自上而下分布，宽度为100%，独占一行；内联元素从左到右水平分布，内容宽高决定元素的宽高。浮动模型 (包裹性)浮动模型具有包裹性，我把包裹性比喻为让元素display：inline-block，我们默认情况下的div是独占一行，宽度以100%显示的，而一旦给这个div添加了floa...原创 2018-11-22 14:42:19 · 429 阅读 · 0 评论 -
jQuery创建、复制、替换、包裹、删除节点
append()、prepend()、appendTo()、prependTo()、after()、before()、insertBefore()、insertAfter()创建子元素类：创建的内容作为目标元素的子元素。（1）append()/appendTo() :目标元素结尾处插入内容(标签、文本内容)。$(".box").append("&原创 2018-12-04 10:24:28 · 785 阅读 · 0 评论 -
原生JS兼容移动端的轮播图
关于轮播图原生JS兼容IE9+等各大浏览器兼容移动端自适应（根据图片原比例）左右箭头切换点击索引切换移动端滑动切换只需修改图片路径<!DOCTYPE html><html lang="en">&amp原创 2018-12-03 14:02:46 · 1147 阅读 · 0 评论 -
DOM元素的三种属性
系统属性，自定义属性，临时属性原创 2018-12-05 10:54:23 · 6225 阅读 · 0 评论 -
js动态修改@keyframes属性值
CSS3中增加了@keyframes规则用于创建动画，创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。也就是说通过改变CSS样式而达到动画的效果，所以，要动态去改变动画，只有修改样式。document.styleSheets这个接口可以获取网页上引入的link样式表和style样式表。如下：拿到样式表后就可以操作样式啦~insertRule方法用来给当前样式表插入新的样式规则。...原创 2018-12-26 14:56:35 · 29623 阅读 · 3 评论 -
js获取一个区间随机数
var max = 70;var min = 30;var random = Math.random()*(max-min)+min;console.log(random);原创 2018-12-24 11:03:13 · 8908 阅读 · 2 评论 -
伪元素之img标签
伪元素之 img 标签CSS伪元素:before :after等是用来添加一些选择器的特殊效果，在实际开发中我们会经常用到。顾名思义，“伪元素”就是伪装的元素，它不是真正的元素却通过样式就能有着和元素一样的表现，我们常见的块级、行块、行内元素大多都是可以设置伪元素的。我们都知道img元素的外观和尺寸是由外部资源决定的，我们称 替换元素。jǚ gè lì zi举个栗子：img{ ...原创 2018-10-31 09:54:58 · 4890 阅读 · 0 评论