javascript
javascript
风如白话
WEB前端开发
展开
-
经纬度/墨卡托坐标互转
经纬度/墨卡托坐标转换原创 2023-10-23 11:46:55 · 819 阅读 · 0 评论 -
js获取网络设备类型
js获取网络设备类型原创 2022-02-15 17:27:55 · 1558 阅读 · 0 评论 -
js实现本地定时存储
本地定时存储原创 2022-02-15 17:20:59 · 1037 阅读 · 0 评论 -
js复制文本到剪贴板
js复制文本到剪贴板原创 2022-02-15 17:09:26 · 534 阅读 · 0 评论 -
js手写实现Promise
练习Promise实现原理原创 2022-02-09 14:18:04 · 630 阅读 · 0 评论 -
html2Canvas+JsPDF生成pdf文件并下载
采用html2Canvas+JsPDF实现web页面/dom元素转pdf文件并下载1、安装html2Canvas:npm install html2canvas2、安装JsPDF:npm install jspdf/** * 生成PDF格式文件并下载 * @param {*} el 页面元素名 * @param {*} title 文件名称 * @returns */export function generatePdf(el, { title = '' }) { retur原创 2022-01-06 10:07:57 · 1435 阅读 · 1 评论 -
js数字位数不够前面补零
/** * 数字不够x位,前面补0 * @param {*} num 数字 * @param {*} len 补零长度 * @returns 0001 */export function formatZero(num, len) { if (String(num).length > len) { return num; } return (Array(len).join(0) + num).slice(-len)}...原创 2022-01-06 10:01:03 · 4115 阅读 · 0 评论 -
js浮点数加减乘除
js浮点数加减乘除算法原创 2022-01-06 09:58:06 · 776 阅读 · 0 评论 -
Vue项目图片压缩
引用:import { compressImage } from './compress'...// 校验大小数量var file = document.querySelector('input').files[0]if(this.fileList.length >= 3){ Message.success({ content: `最多可上传3张` }) return}if(file.size >= 1024 * 1024 * 2){ Message..原创 2021-09-16 10:19:15 · 2676 阅读 · 0 评论 -
js获取当前页面url网址信息
js获取当前页面url网址信息 var url; url = window.location.href; /* 获取完整URL */ alert(url); /* http://127.0.0.1:8020/Test/index.html#test?name=test */ url = window.location.pathname; /* 获取文件路径(文件地址) */ alert(url); /* /Test/index.html */ url = window.location.原创 2021-05-26 09:33:44 · 496 阅读 · 0 评论 -
js获取滚动条宽度
js获取滚动条宽度getScrollbarWidth() { let scrollDiv = document.createElement('div'); scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;' document.body.appendChild(scrollDiv) let scrollbarWidt原创 2021-05-15 11:30:35 · 2890 阅读 · 0 评论 -
js 判断页面是否存在滚动条
js 判断页面是否存在滚动条hasScrollbar() { return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)}原创 2021-05-15 11:28:48 · 3606 阅读 · 1 评论 -
canvas环形进度条
利用canvas绘制环形进度条组件对canvas绘制模糊问题进行了处理。根据dpr,扩大canvas画布的像素,使1个canvas像素和1个物理像素相由于画布扩大,canvas的坐标系也跟着扩大,如果按照原先的坐标系绘图内容会缩小所以需要将绘制比例放大使用progressRing({ el: document.getElementById("canvas"), //绘制对象 width: 130, height: 130, lineWidth: 6, lineCap: 'rou原创 2021-04-29 16:56:32 · 454 阅读 · 0 评论 -
js 将字符串转为每N个为一组的数组
let str = '字符串截取为每3个一组数组测试' createArr(str, 0, 3, 3) /* @params str{ String} 要截取的字符串 @params start { Number } 首次截取的开始索引,每次截取后递增 @params end { Number } 首次截取的结束索引,每次截取后递增 @params unit { Number } 每一组个数 */ // 将字符串转换成unit个字符为一组的数组 const c.原创 2021-04-28 11:46:23 · 1611 阅读 · 1 评论 -
js 将一维对象数组转二维数组
js 将一维对象数组分割重组为每X组为一组的二维数组var Arry = [ {id: '1', name: 'A'}, {id: '2', name: 'B'}, {id: '3', name: 'C'}, {id: '4', name: 'D'}]var arr= [];for(var i = 0; i < Arry.length; i += 3) { arr.push(Arry.slice(i, i + 3));}console.log(arr)...原创 2021-03-25 11:04:41 · 1793 阅读 · 0 评论 -
js雪花飘落特效
js雪花飘落特效调用:new Snows({ warp: '.aui-content', el: '<i class="iconfont iconxuehua snow"></i>', num: 100, windowWidth: document.querySelector('.aui-content').offsetWidth, windowHeight: document.querySelector('.aui-content').offsetHeight})原创 2021-01-06 16:42:29 · 362 阅读 · 0 评论 -
js计算对象数组中某个属性合计
js 计算对象数组中某个属性合计countTotal调用示例:let arr = [ {id: 0, price: 199.88}, {id: 1, price: 299.88}, {id: 2, price: 399.88}];console.log(countTotal(arr, price)); //899.64//计算对象数组中某个属性合计function countTotal(arr, keyName) { let $total = 0; $total = arr.redu原创 2020-12-25 09:59:46 · 8934 阅读 · 0 评论 -
js 金额转中文大写格式
js 数字金额转中文大写格式moneyToChinese调用示例: moneyToChinese('199.99'); //console:壹佰玖拾玖元玖角玖分 function moneyToChinese(money) { let cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'); //汉字的数字 let cnIntRadice = new Array('', '拾', '佰', '仟');原创 2020-12-25 09:44:52 · 728 阅读 · 1 评论 -
微信公众号项目录音上传功能
微信公众号项目wx.startRecord录音本文包含以下功能:1、开始录音2、结束录音3、上传录音4、开始播放录音5、结束播放录音开始录音:var alltime = 60; //总时长var r_flag = true; //录音开关 var r_time = 0; //录音当前时长var localId , START, END ;function startRecord() { localId = ''; wx.startRecord({ success:原创 2020-07-17 17:17:16 · 1973 阅读 · 0 评论 -
js身份证号格式校验
/***校验身份证号@param {String} personnumber 身份证号码@example: checkIdcard(pass); //return true | false;*/function checkIdcard(personnumber) { personnumber = personnumber.toUpperCase(); //身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X。 if (!(原创 2020-06-15 13:59:50 · 849 阅读 · 0 评论 -
js 银行卡号校验(luhn算法)
js 银行卡号校验示例:luhnCheck(62155937000139567)function luhnCheck(bankno) { var lastNum = bankno.substr(bankno.length - 1, 1); //取出最后一位(与luhn进行比较) var first15Num = bankno.substr(0, bankno.length - 1); //前15或18位 var newArr = new Array(); for (var原创 2020-06-15 13:57:13 · 1647 阅读 · 0 评论 -
js 原生ajax封装(promise)
/*** ajax数据请求接口 @param {string} type 请求方式 {"get(默认)" | "GET" | "post" | "POST"} @param {string} url 请求接口地址 @param {Object} data 请求时后台所需参数 @param {bool} async 是否异步(true)或同步(false)请求{true(默认) | false} @example: $ajax({ type: "post",原创 2020-06-12 18:06:15 · 1025 阅读 · 0 评论 -
js根据输入的文本自动改变textarea框的高度
js根据输入的文本自动改变textarea框的高度/*** 根据输入的文本自动改变textarea框的高度 @param {string} el 元素对象 如: document.querySelector(".list") @param {number} maxHeight 最大高度 @param {number} minHeight 最小高度 @example: autoTextarea(document.querySelector("#textarea"), 300,原创 2020-06-12 18:01:18 · 685 阅读 · 0 评论 -
js 截取URL中字符串(可获取中文内容)
截取URL中字符串(可获取中文内容)调用: getUrlstr('id');getUrlstr(str){ var reg = new RegExp("(^|&)" + str + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return decodeURI(r[2]); return null;}...原创 2020-06-12 17:57:45 · 857 阅读 · 0 评论 -
百度地图绘制车辆实时位置
H5页面引用百度地图绘制车辆实时位置引入<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Go8TPnKDL44WFZbOATH4AsbA7qTwNosi"></script>html代码<div id="allmap" style="width: 100%;height: 100vh"></div>js代码//打开百度地图functio原创 2020-06-09 14:11:13 · 1840 阅读 · 0 评论 -
百度地图绘制车辆历史轨迹
H5页面引用百度地图绘制车辆历史轨迹引入<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Go8TPnKDL44WFZbOATH4AsbA7qTwNosi"></script>html代码<div id="allmap" style="width: 100%;height: 100vh"></div>js代码//打开百度地图functio原创 2020-06-09 14:04:27 · 1048 阅读 · 0 评论 -
腾讯TCPlayerLite播放m3u8格式视频
TCPlayerLite腾讯云 Web 超级播放器 TCPlayerLite 是为了解决在手机浏览器和 PC 浏览器上播放音视频流的问题,它使您的视频内容可以不依赖用户安装 App,就能在朋友圈和微博等社交平台进行传播。直播和点播 直播视频源是实时的,一旦主播停播,直播地址就失去意义,而且由于是实时直播,所以播放器在播直播视频的时候是没有进度条的。 &nbs原创 2020-06-08 10:43:51 · 3579 阅读 · 0 评论 -
js 生成条形码(JsBarcode.all.min.js)
JsBarcode.all.min.js生成条形码HTML代码:<div class="content"> <svg class="barcode" jsbarcode-format="upc" jsbarcode-value="" jsbarcode-textmargin="0" jsbarcode-fontoptions="bold"> </svg></div>js代码:$(".barcode").JsBar原创 2020-06-08 10:14:29 · 5243 阅读 · 2 评论 -
js 禁止鼠标右键及F12功能(禁止打开控制台)
js禁止鼠标右键及F12打开控制台1、PC端网页禁止图片保存;2、禁止鼠标右键事件;3、禁止F12键打开控制台;window.document.oncontextmenu = function(){ return false; } document.onkeydown = document.onkeyup = document.onkeypress = function(event) { var e = event || window.event || arguments.ca原创 2020-06-04 22:57:08 · 1642 阅读 · 0 评论 -
js 识别二维码
本文引用analyticCode.js、llqrcode.js实现识别二维码功能html代码:<div class="box" id="analytic"> <img id="showImg" src="../../img/image/code.png" /> <p class="url-box" id="urlBox"></p></div>javascript代码:getUrl(document.getElementByI原创 2020-06-03 09:56:13 · 3346 阅读 · 0 评论 -
js生成二维码(jquery.qrcode.js)
采用jquery.qrcode.js可生成带logo图标的二维码宽、高、背景色、前景色可自定义设置html代码如下:<div class="qrcode"> <img class="qrcode-img" src="" alt=""></div>js代码如下://生成二维码var qrcode = $(".qrcode").qrcode({ render: "canvas", text: _this.text, width : "400"原创 2020-06-03 09:42:50 · 1499 阅读 · 0 评论 -
简单实现js获取验证码
倒计时获取验证码,设定时间内不可重复点击获取<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <原创 2020-05-26 11:31:40 · 2529 阅读 · 0 评论 -
video标签播放视频禁止脱离文档流
video 标签在微信公众号页面播放视频时,设置h5同层播放如下:webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放*/x-webkit-airplay="true" /*这个属性还不知道作用*/playsinline="true" /*IOS微信浏览器支持小窗内播放*/x5-video-player-type="h5-page" /*启用H5播放器,是wechat安卓版特性*/x5-video-orientation="原创 2020-05-20 16:25:53 · 1981 阅读 · 0 评论 -
移动端省市区三级联动
查看演示 html代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>picker多级联动</tit原创 2020-05-20 14:32:48 · 1344 阅读 · 0 评论 -
javascript 倒计时插件
调用:countdown('当前时间时间戳', '结束时间戳', function(ret){ //console.log(ret); _this.day = ret.day; _this.hour = ret.hour; _this.minute = ret.minute; _this.second = ret.second;});javascript代码:/***倒计时 @param {number} nowtime 当前时间时间戳 @param {number} end.原创 2020-05-19 17:53:03 · 658 阅读 · 0 评论 -
js 获取图片主题色
获取图片主色、次色、调色板RGBaster.colors(img, { paletteSize: 10, //调色板大小(可选项) exclude: ['rgb(0,0,0)', 'rgb(255,255,255)' ,'rgb(254,254,254)' ],//剔除的颜色 success: function(payload) { // payload.dominant是主色,RGB形式表示 // payload.secondary是次色,RGB形式表示 // payload.pal原创 2020-05-19 15:35:51 · 1737 阅读 · 0 评论 -
js 移动端手势事件
元素绑定手势事件:aui.on('元素', 'click', function(){ aui.alert({msg: 'click点击事件'});});元素解绑手势事件:aui.off('元素', 'click');查看演示 html:<div class="aui-content"> <p style="width: 100%; line-height: 25px; padding: 0 20px; box-sizing: border-box; text-al原创 2020-05-15 21:02:27 · 484 阅读 · 0 评论 -
h5 移动端左右联动分类页面
h5移动端左右联动分类页面查看演示 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" t原创 2020-05-14 10:59:03 · 2366 阅读 · 0 评论 -
h5页面动态引入js/css文件
h5页面动态引入js/css文件/***引入 js / css 文件 @example: aui.import('js/aui.picker.js') @example: aui.import(['js/aui.picker.js', 'css/aui.picker.css'])*/function import(url){ switch (url.constructor){ case Array: for(const [index, item] of url.entries原创 2020-05-15 11:43:12 · 2365 阅读 · 0 评论 -
移动端页面使用ztree.js实现多级联动下拉选择功能
移动端页面使用ztree.js实现多级联动下拉选择功能//初始化ztree“车辆树”插件function initCarZtree(isLazy){ var zTree; var setting = { async: { enable: isLazy, type:"post", dataType:'json', url: app.url + "lazyQueryCarsAndOrgs",//我们之前写的Controller的地址 autoParam原创 2020-05-15 11:17:59 · 2158 阅读 · 0 评论