JS
羽筠
这个作者很懒,什么都没留下…
展开
-
vue中获取短信验证码交互功能快速开发代码整理
vue中获取短信验证码交互功能快速开发代码整理父组件相关代码:HTML:原创 2024-04-29 18:08:07 · 275 阅读 · 1 评论 -
uniapp picker 多列选择器用法
uniapp picker 多列选择器联动筛选器交互处理方法,uniapp 多列选择器 mode="multiSelector" 数据及筛选联动交互处理,通过接口获取数据,根据用户选择当前列选项设置子列数据,实现三级联动效果,本示例中处理了三级无数据时则从数据中删除,处理三级后二级无数据时则亦从数据中删除,删除的数据最终不展示在筛选器中。原创 2024-04-17 11:07:50 · 3600 阅读 · 0 评论 -
uniapp中获取位置信息处理
处理逻辑:一、获取定位时,用户直接同意授权获取定位,得到位置信息; 第1步:获取用户当前的授权状态 => 第2步:判断是同意授权位置时 => 第3步:获取位置 二、获取定位时,用户拒绝授权获取定位的: 第1步:获取用户当前的授权状态 => 第2步:判断是未同意授权位置时,引导用户打开设置界面,重新选择授权功能 => 第3步:用户选择允许授权后 第4步:重新获取位置,得到位置信息 第3步:用户选择不允许授权后 第4步:可至第1步,继续重新获取位置 引用文件可复用的处理逻辑代码:引用文件:需要获取位置代码处执行原创 2024-02-28 17:55:00 · 3631 阅读 · 2 评论 -
接物游戏demo
指定时间内,接到元素则加分,接到炸弹则减分,计时结束,游戏停止。接物元素设置了不同分值。原创 2023-10-20 18:58:24 · 336 阅读 · 0 评论 -
调研生成GIF表情包之路
调研生成GIF表情包之路调研阶段分解GIF图片、合成GIF图片合成GIF图片 - 表情包方案优化阶段表情包可视化编辑、生成配置信息数据工具PHP合成生成GIF动图PHP使用imagick扩展合成透明GIF图帧重叠问题解决方案原创 2023-02-16 15:54:17 · 490 阅读 · 0 评论 -
表情包可视化编辑、生成配置信息数据工具
表情包可视化编辑、生成配置信息数据工具,合成GIF图片 - 表情包 后续,用于快速、便捷生成 img_config.js 中 要生成的GIF每一帧数据(写入头像图片信息参数)原创 2023-02-16 11:57:16 · 501 阅读 · 0 评论 -
解决计算精度损失导致数据运算后小数点后产生多位数问题
加减乘除运算,计算精度损失导致数据运算后,小数点后产生多位数。原创 2022-08-31 18:15:14 · 482 阅读 · 0 评论 -
获取base64图片大小
获取base64图片大小。原创 2022-07-18 17:54:05 · 2959 阅读 · 0 评论 -
合成GIF图片 - 表情包
合成GIF图片 - 表情包数据配置 - 生成GIF每一帧数据信息(当前帧原始gif素材图片 / 写入头像图片信息:宽、高、x轴位置、y轴位置、旋转角度、旋转中心点)demo 1、上传图片-裁剪(按头像比例裁剪图片 - 规则图形)-处理合成生成表情包demo 2、上传图片-抠图(可移动/旋转/缩放 - 按头像区域内抠图处理 - 不规则图形)-处理合成生成表情包准备 - 数据配置 - 生成GIF每一帧数据信息:例:多张gif图对应数据,实际操作时可选择一张对应生成表情gif图...原创 2022-07-12 17:44:24 · 465 阅读 · 0 评论 -
分解GIF图片、合成GIF图片
分解GIF图片libgif-js:JavaScript GIF 解析器和播放器https://github.com/aoiu/libgif-jsorhttps://github.com/buzzfeed/libgif-js原创 2022-07-11 16:29:50 · 915 阅读 · 0 评论 -
gifshot.js合成GIF
gifshot.js:可以从媒体流、视频或图像创建动画 GIF 的 JavaScript 库。https://github.com/yahoo/gifshot经测试:text配置项:生成的GIF每一帧所覆盖的文本;images配置项(数组):首个设置的图片会一直显示;如设置text,则优先级最高,当前(帧)图片覆盖文本替换text配置项全局文本;demo:多张图片合成GIF图片;VIDEO生成的GIF;demo资源下载...原创 2022-07-11 11:28:46 · 981 阅读 · 0 评论 -
根据微信返回的头像url选择所需尺寸图片
微信用户头像url,最后的数值代表正方形头像大小(有:0、46、64、96、132数值可选,0代表640*640正方形头像)用户没有头像时该项为空,若用户更换头像,原有头像URL将失效。var data = { nickname:'昵称', headimgurl:'http://wx.qlogo.cn/mmopen/zhK3MN44IcibtzxZibicddSyp4qVX3rTtfMZsXQwa5mArMmI4A44uJgQyevo9VhePyUbv6MwhsWTzrqttXsUdzJL0Lc原创 2022-01-13 17:45:18 · 1442 阅读 · 0 评论 -
requestAnimationFrame、setTimeout、setInterval对比测试
requestAnimationFrame、setTimeout、setInterval对比测试:PC端测试:相比之下setTimeout有延迟手机上测试:相比之下setTimeout、setInterval都有延迟原创 2022-01-07 17:59:41 · 545 阅读 · 0 评论 -
使用正则表达式验证及处理相关需求
var app = new Vue({ el: '#app', data: { }, methods: { // 数字从字符分离,使用标签包裹 setNumberSpanParcel(msg){ return msg.replace(/(\d+)/g,'<span class="DIN">$1</span>') }, // 例: // {{setNumberSpanParcel('111文字222文字')}} // 金额用逗号隔开(.原创 2021-11-24 17:47:04 · 294 阅读 · 0 评论 -
防止用户调整微信浏览器字体大小导致的显示异常
防止用户调整微信浏览器字体大小导致的显示异常(加JS代码)// 下面这段代码,防止用户调整微信浏览器字体大小导致的显示异常(function() { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { if (document.addEventListener) {原创 2021-09-29 11:09:17 · 312 阅读 · 0 评论 -
城市筛选数据(根据2020年度全国统计用区划代码和城乡划分代码更新维护的标准)
根据2020年度全国统计用区划代码和城乡划分代码更新维护的标准,整理的城市联动筛选数据:/* 根据2020年度全国统计用区划代码和城乡划分代码更新维护的标准 */var cityList = [ { "id": '110000000000', "value": '北京', "childs": [ { "id": '110100000000', "value": '北京', "childs": [ {"id":"110101000000","val原创 2021-07-28 17:37:12 · 1320 阅读 · 0 评论 -
使用腾讯位置服务获取位置及设置地图点标记文本标记demo
需要先创建应用和Key,去创建:https://lbs.qq.com/dev/console/application/mine腾讯位置服务使用:地图组件获取位置(开发指南:https://lbs.qq.com/webApi/component/componentGuide/componentGeolocation)引入Javascript API GL初始化地图及设置点标记文本标记(开发指南:https://lbs.qq.com/webApi/javascriptGL/glGuide/glOverv原创 2021-07-15 18:01:41 · 4540 阅读 · 0 评论 -
sessionStorage存储JSON数据
sessionStorage存储JSON数据// 设置sessionStorage.setItem('testStorageData',JSON.stringify({ key1 : '454454', key2 : '8989898989',}))// 调用// var testStorageData = JSON.parse(sessionStorage.getItem('testStorageData'));// testStorageData.key1// testStorag原创 2021-01-22 12:12:34 · 670 阅读 · 0 评论 -
微信web中IOS系统手机摇一摇功能实现及问题解决
随着ios的系统升级,安全协议越来越严格,例如ios系统手机的运动和方向感控被限制了,必须得用户手动授权方可进行,前端为了要实现摇一摇功能,必须要具备以下思路。对于 IOS 13.3以后的版本处理,包括13.3 的判断处理。,即打开h5页面的链接开头必须是https://…2、摇一摇功能开启必须经过用户授权,必须。必须是https协议。原创 2021-01-15 12:19:21 · 2345 阅读 · 0 评论 -
微信webview中关闭浏览器-兼容安卓及苹果
/***微信webview中关闭浏览器-兼容安卓及苹果*/function CloseBrowser() { //判断谷歌火狐安卓和linux关闭当前页面及浏览器 var userAgent = navigator.userAgent; if (userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1) { WeixinJSBridge.call('closeWindow'); } else {..转载 2021-01-15 00:06:32 · 552 阅读 · 0 评论 -
JS获取url参数值
// 获取url参数值function parseUrl() { var url = location.href; var i = url.indexOf('?'); if (i == -1) return; var querystr = url.substr(i + 1); var arr1 = querystr.split('&'); var arr2 = new Object(); for (i in arr1) { var urllist = arr1[i].split.原创 2021-01-05 17:19:34 · 228 阅读 · 0 评论 -
原生JS判断向上或向下滑动
原生JS判断向上或向下滑动,可根据结果设置进入上一页或下一页操作// 判断向上或向下滑动// ifPrevent 是否阻止事件默认行为function getTouchType(element,ifPrevent,callback){ var startY , endY , diff; element.addEventListener("touchstart", touchStart, false); element.addEventListener("touchmove", touchM.原创 2021-01-05 10:51:17 · 1258 阅读 · 0 评论 -
jquery 设置元素拖动效果
jquery 设置页面元素可拖动效果使用:setEleDrag('.go_manager_vote',120,60,function(){ console.log('执行点击操作');});// 页面元素可拖动// ele : $('.class') 或 $('#id')// _w : 元素宽// _h : 元素高// callback : 点击执行的回调function setEleDrag(ele,_w,_h,callb...原创 2020-06-11 17:02:13 · 694 阅读 · 0 评论 -
CANVAS中使用跨域图片toDataURL转base64图片时报错处理
CANVAS中使用跨域图片转base64图片时报错处理:function getBase64(imgUrl) { window.URL = window.URL || window.webkitURL; var xhr = new XMLHttpRequest(); xhr.open("get", imgUrl, true); // 至关重要 xhr.responseType = ...转载 2020-08-30 17:02:07 · 645 阅读 · 0 评论 -
使用FormData对象AJAX提交文件
FormData对象是html5的一个对象,目前的一些主流的浏览器都已经兼容。它是一个html5的javascript对象,非常的强大。FormData可以凭空创建一个对象,然后往这个对象里面添加数据,然后直接提交,不需要写一行html代码,如下:var form = new FormData();form.append("username","name");form.append("...原创 2019-11-15 16:36:36 · 255 阅读 · 0 评论 -
ajax结合php处理图片
1、处理保存 base64编码 的图片,并返回保存的图片URL(可用来处理保存CANVAS转成的图片的)2、处理图片,并返回 base64编码 的图片(一般解决JS跨域的问题)demo代码(测试请用服务器环境:localhost):<!DOCTYPE><html><head><meta http-equiv="Content-Type" ...原创 2018-07-31 17:29:18 · 1140 阅读 · 0 评论 -
JS设置禁用调试工具
JS设置禁用调试工具<script>//debug调试时跳转页面var element = new Image();Object.defineProperty(element,'id',{get:function(){window.location.href="https://www.csdn.net"}});console.log(element);</scrip...原创 2018-07-25 14:43:42 · 4075 阅读 · 0 评论 -
安卓手机微信浏览器中长按提示“在浏览器打开”解决方法
安卓手机在微信网页内长按时,如同鼠标右击事件,会触发微信浏览器的默认事件,弹出“在浏览器打开”的提示语只需在长按事件触发时,取消鼠标右键事件的默认动作即可document.oncontextmenu = function(e){ e.preventDefault();}...原创 2018-05-16 10:57:23 · 6404 阅读 · 0 评论 -
检测浏览器对HTML5属性的支持度
由于各浏览器对HTML5属性的支持度不同,这就造成了一些兼容问题。但是可以使用方法来检测该浏览器是否支持这些属性,例:如果要检测pattern属性是否被浏览器识别,可以使用Javascript代码来检测。alert( 'pattern' in document.createElement('input') ) // boolean; if (!'pattern' in原创 2016-06-01 15:23:09 · 1324 阅读 · 0 评论 -
多个ajax请求的公共方法
有了ajax请求的公共方法,就省去了每次有ajax请求时都要写一遍ajax语法的完整方法了,只需要传递参数即可ajax.js://test//var token = 'd697c140c9e5d34af49238aee6f245dd';var baseURL = "./"; // 必填: api地址//ajax公共方法function getAjax( url , type ...原创 2018-08-22 17:33:25 · 2399 阅读 · 0 评论 -
canvas单、多行文本通过配置参数循环写入
canvas单、多行文本通过配置参数循环写入demo:<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><原创 2018-10-19 10:56:38 · 1171 阅读 · 0 评论 -
JS数组存储(两个数组相等,一个改变,另一个跟着改变)
JS数组存储(两个数组相等,一个改变,另一个跟着改变)数组是一种引用数据类型,数组引用变量只是一个引用,数组元素和数组变量在内存里是分开存放的实际的数组元素被存储在堆(heap)内存中;数组引用变量是一个引用类型的变量,被存储在栈(stack)内存中。基本类型:基本的数据类型有:undefined,boolean,number,string,null。 基本类型存放在栈区,访问是按值访问的...转载 2018-11-22 14:58:48 · 4495 阅读 · 0 评论 -
设置显示input上传的图片
1、createObjectURLcreateObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。2、FileReader方法FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(...原创 2018-12-06 17:43:08 · 760 阅读 · 0 评论 -
复制插件(兼容移动端)
兼容移动端的点击复制功能demo:<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name原创 2019-02-11 17:07:06 · 1308 阅读 · 1 评论 -
苹果手机在input失焦时键盘缩回缩后,页面不归位解决方法
苹果手机在input失焦时键盘缩回缩后,页面不归位解决方法$("input").on("blur",function(){ window.scroll(0,0); //让页面归位});原创 2019-02-28 12:05:36 · 3835 阅读 · 0 评论 -
移动端ios直接设置currentTime无效解决方法
前段时间做过一个项目,每个页面设置了同一个背景音乐,但客户要求音乐从一个页面进入另一个页面后,要接着上一页面播放时间播放,所以进入新页面后设置currentTime为上个页面播放时间但ios系统直接设置无效,在判断音乐可播放时(canplay)再设置currentTime才可以,但在安卓设备上也这样判断设置则也无效,所以要根据不同系统设置,以下是针对ios、安卓系统设置的代码注:$myVi...原创 2018-03-06 17:38:30 · 8386 阅读 · 2 评论 -
使用jquery.qrcode生成二维码
1、HTML部分设置代码:<div id="code"></div>2、包含jquery.qrcode.js(https://github.com/jeromeetienne/jquery-qrcode/blob/master/jquery.qrcode.min.js)<script type="text/javascript" src="jquery.qrcode....原创 2018-03-06 17:05:39 · 480 阅读 · 0 评论 -
微信音频接口调用demo
前几天做一个录音送祝福的项目,事先做了一个demo,记录一下,方便日后需要时套上直接使用<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/&原创 2018-02-10 17:49:06 · 9342 阅读 · 10 评论 -
weUI应用,用JS封装了几个常用的信息提示的弹层
weUI应用,自己用JS封装了几个常用的信息提示的弹层测试页面的代码在后面有贴出几个弹层如下图HTML页面代码:weUI-test测试$(function(){ // //提示弹层,取消关闭,确定做相应操作// dialog('标题1111111','内容1111111',function(){// aler原创 2016-09-19 10:17:16 · 33940 阅读 · 0 评论 -
H5大转盘,结束后反馈结果
自己写了一个大转盘效果,方便以后用到时直接修改使用使用的图片资源:roate.pngroate_btn.png原理其实是一开始就已经设置好最终中奖结果,根据这个结果实现旋转的,旋转结束后可做相应操作,代码如下:大转盘测试.outBox{ width:300px; height:300px; position:fixed; left:50%原创 2016-08-29 11:39:53 · 1784 阅读 · 0 评论