![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
包含HTML、css、javascript、jquery、vue等
风如白话
WEB前端开发
展开
-
Notification桌面消息通知
桌面消息通知原创 2022-10-10 09:21:49 · 705 阅读 · 0 评论 -
js计算对象数组中某属性最大值和最小值
js计算对象数组中某属性最大值和最小值原创 2022-07-03 11:41:51 · 1802 阅读 · 0 评论 -
canvas绘制立方体盒子
基于canvas绘制立方体length: 长width: 宽height: 高id: canvas元素idcolor: 盒子颜色// 基于canvas生成立方体export function generateCubeByCanvas(length = 0, width = 0, height = 0, id = '', color) { const canvas = document.getElementById(id) const ctx = canvas.getConte原创 2022-02-07 17:58:46 · 1095 阅读 · 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 · 334 阅读 · 0 评论 -
js实现长按显示全部内容
js实现文字超出省略号显示时长按显示全部元素内容超出省略号显示时长按该元素,生成toast弹窗(id:toolkitContainer),以显示全部内容#toolkitContainer { max-width: 150px; position: absolute; z-index: 999; background-color: #f6f6f6; border-radius: 5px; color: #000; padding: 5px 15px; border: sol原创 2020-11-27 10:00:13 · 543 阅读 · 0 评论 -
谷歌浏览器安装vue-devtools扩展插件
谷歌浏览器安装vue-devtools扩展插件介绍:新版vue-devtools下载下来由于缺少shells文件夹,导致安装始终无法成功。本文提供Git仓库地址,可下载vue-devtools5.1版本,内部包含shells文件夹,打开shells文件,选择chrome文件夹,拖动到谷歌浏览器扩展插件添加页面即可。下载:打开git仓库下载步骤:效果:...原创 2020-10-14 09:59:27 · 720 阅读 · 0 评论 -
微信公众号项目录音上传功能
微信公众号项目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 · 1939 阅读 · 0 评论 -
h5年会抽奖
h5年会抽奖之手机号及微信头像抽奖截图代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="/pages/lottery/css/aui/aui.css?v=1.0"/> <link rel="stylesheet" type="text/css" href="/pag原创 2020-06-29 11:54:45 · 1997 阅读 · 0 评论 -
PC页面客服微信QQ弹窗(鼠标移入显示移出隐藏)
PC页面客服微信QQ弹窗(鼠标移入显示移出隐藏)html代码:<div class="msg" onmouseleave="common.showModal(0)"> <div class="msg-btns"> <div class="msg-btn kefu-btn" onmouseenter="common.showModal(1)"><img src="/static/home/img/kefu.png" alt="" /&g原创 2020-06-16 11:54:42 · 840 阅读 · 1 评论 -
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 · 842 阅读 · 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 · 1611 阅读 · 0 评论 -
canvas绘制圆环进度条(progress.js)
canvas绘制圆环进度条已解决canvas绘制图形在移动端默认变模糊的问题js代码/* =============================== * progress圆环进度条 * versions 1.0.0 * cl15095344637@163.com * @example: progressRing({ el: document.getElementById("canvas"), //绘制对象 width: 130, height: 130,原创 2020-06-15 10:30:07 · 833 阅读 · 1 评论 -
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 · 1020 阅读 · 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 · 678 阅读 · 0 评论 -
解决前后端混编项目中使用vue绑定数据产生的冲突
转载地址:https://blog.csdn.net/weixin_43838488/article/details/106692182前后端混编项目中使用vue.js,防止vue中“{{}}”与其他模板框架(如: layui)绑定数据差生冲突将vue默认的“{{item.name}}” 改为 “@{item.name}”new Vue({ el: "#app", delimiters: ['@{', '}'], //修改文本插值的定界符 data: { item: { name: '原创 2020-06-11 17:06:14 · 506 阅读 · 0 评论 -
修改vue模板标签
修改文本插值的定界符前后端混编项目中使用vue.js,防止vue中“{{}}”与其他模板框架(如: layui)绑定数据差生冲突<view>@{item.name}</view>方法一:// 修改 Vue 模板标签if ( "undefined" != typeof Vue ) { // 修改文本插值的定界符。 // ES6 模板字符串 Vue.config.delimiters = ['@{', '}']; //修改文本插值的定界符,防止与模板绑定数据产生原创 2020-06-11 16:52:46 · 1114 阅读 · 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 · 1802 阅读 · 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 · 1032 阅读 · 0 评论 -
腾讯TCPlayerLite播放m3u8格式视频
TCPlayerLite腾讯云 Web 超级播放器 TCPlayerLite 是为了解决在手机浏览器和 PC 浏览器上播放音视频流的问题,它使您的视频内容可以不依赖用户安装 App,就能在朋友圈和微博等社交平台进行传播。直播和点播 直播视频源是实时的,一旦主播停播,直播地址就失去意义,而且由于是实时直播,所以播放器在播直播视频的时候是没有进度条的。 &nbs原创 2020-06-08 10:43:51 · 3519 阅读 · 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 · 5182 阅读 · 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 · 1613 阅读 · 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 · 3302 阅读 · 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 · 2504 阅读 · 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 · 1929 阅读 · 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 · 1312 阅读 · 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 · 644 阅读 · 0 评论 -
textarea文本编辑框placeholder自动换行显示
第一反应是直接在placeholder属性值里输入\n换行,如:<textarea rows="5" cols="50" placeholder="1、textarea\n2、success"></textarea>浏览器直接输出了它,类似地输入<br/>也行不通解决方法是换成 <textarea rows="5" cols="50" placeholder="1、textarea 2、success"></t原创 2020-05-19 17:16:38 · 1397 阅读 · 1 评论 -
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 · 1710 阅读 · 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 · 460 阅读 · 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 · 2323 阅读 · 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 · 2330 阅读 · 0 评论 -
aui.parabola.js 加入购物车抛物线特效
h5页面抛物线(加入购物车)预览 完整aui前端UI框架地址:github仓库: https://github.com/aui-js/aui html代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum原创 2020-05-15 10:48:06 · 444 阅读 · 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 · 2111 阅读 · 0 评论