web前端
AQMAX
@前端筑基。写代码的意义就是给人们提供更好的交互体验的同时也不断提高自己!
展开
-
pinia数据持久化插件
前段时间用vue3、vite4、pinia、ts做一个后台系统,在状态管理方面需要实现持久化,防止刷新丢数据,一开始在网上找,找了几个插件,发现要么不支持加密,需要另外安装加密插件,要么就是不能更改缓存方式,例如只能用localStorage,就这些问题我就萌生了自己写一个插件的想法。原创 2023-05-25 11:22:44 · 1077 阅读 · 0 评论 -
css绘制3D炫动ikun
今天做一个3D版的ikun。先准备图片一张。原创 2023-02-07 09:08:14 · 5726 阅读 · 7 评论 -
js实现base64图片旋转方向
js实现base64图片旋转方向原创 2022-10-17 16:02:57 · 2926 阅读 · 5 评论 -
js正则非零开头的正整数和保留两位小数,小数可以零开头
^(([1-9][0-9]*)(\.\d{1,2})?|0\.\d{1,2})$这个是匹配 非零开头的正整数和保留两位小数,小数可以零开头原创 2021-12-14 11:25:24 · 3013 阅读 · 0 评论 -
层级选择器
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>jQuery层级选择器</title> <link rel="styleshee...转载 2019-11-22 19:30:34 · 206 阅读 · 0 评论 -
移动端原生H5开发心得和干货
更新日志修改HTML项 5 新增配置项 7配置项1. Viewport<!-- 让页面宽度等于设备宽度,缩放比例为1,禁止用户缩放网页 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><!-- 针对一些不识别vie...转载 2019-09-07 14:16:49 · 869 阅读 · 0 评论 -
flex布局
一、Flex布局是什么?Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex;}行内元素也可以使用Flex布局。.box{ display: inline-flex;}Webkit内核的浏览器,必须加上-webkit前缀。.bo...转载 2019-08-31 22:15:42 · 236 阅读 · 0 评论 -
CSS3在鼠标经过时的几种效果合集
效果一:360°旋转 修改rotate(旋转度数) * { transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in...转载 2018-04-28 19:10:01 · 1474 阅读 · 0 评论 -
Vue 3.x + Vant 3.x + Vue-Router 4.x 快速上手
前提安装node.js。 Node 版本要求:Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n,nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。创建项目创建项目有三...原创 2021-10-26 18:01:39 · 563 阅读 · 0 评论 -
js 防抖节流
防抖节流方法function debounce(func, wait = 500) { let timeout; return function(event) { clearTimeout(timeout); timeout = setTimeout(() => { func.call(this, event) }, wait) }}调用const util = require('../../utils/util.js');sea原创 2021-09-29 10:30:50 · 75 阅读 · 0 评论 -
ajax跨域问题之谷歌浏览器本地调试配置跨域
首先在桌面谷歌浏览器快捷图标右击-属性-目标-快捷方式在目标路径后面加上--disable-web-security--user-data-dir=C:\MyChromeDevUserDataMyChromeDevUserData是我在C盘新建的文件夹,什么都不用做。然后点击应用,再确定,重新打开浏览器,如果提示有“--disable-web-security”相关的就说明,配置成功了。...原创 2021-09-23 10:34:26 · 294 阅读 · 0 评论 -
面试题,将arr数组旋转90度算法
//数组 var arr = [ [1, 2, 3], [4, 5, 6], [7, 8, 9, 0] ] //下一个算法,将arr数组旋转90度,输入结果如下: arr=[ [7,4,1], [8,5,2], [9,6,3], [0] ]面试的时候是手写的,没灵感,最后写错了,没时间改。后来总结了一下:正确如下: let len = arr.length; let itemLen = ...原创 2021-09-09 11:17:26 · 105 阅读 · 0 评论 -
js josn数组排序,升序,降序
//实销金额排序 ActualSales(e){ let aid = e.currentTarget.dataset.id; let that =this; if(aid==1){ data.dataList.sort(that.compareDown("amount"));//amount是数据字段 }else{ data.dataList.sort(that.compareUp("..原创 2021-08-28 02:03:28 · 264 阅读 · 0 评论 -
通过js获取audio时间 自定义播放样式
<div class="audioJd clearfix"> <div class="lineBox"> <div class="line"> <span class="clearfix" id="progressBar"><i></i></span> </div> <p><span id="currentTime">00:00</span>/<sp.原创 2021-08-10 19:56:16 · 1222 阅读 · 0 评论 -
js测试生成的数独是否正确
function equals45(n){ return n == 45;}function validSolution(board){ var sumh = [0,0,0,0,0,0,0,0,0]; var sumv = [0,0,0,0,0,0,0,0,0]; var osums = [[0,0,0],[0,0,0],[0,0,0]]; for (var i=0;i<9;i++){ for (var j=0;j<9;j++){ sumh...转载 2021-07-31 17:24:49 · 107 阅读 · 0 评论 -
鼠标滚动到某屏加载那一屏的数据,实现懒加载
1、用于商城的楼层内容异步加载,滚动条滚动时才加载数据2、如果当前屏幕上显示了好几个楼层,那么同时执行这几个楼层的异步加载3、如果滚动条在页面中间,此时刷新页面,刷新成功后,执行当前显示在屏幕上的几个楼层的异步加载,未显示的不加载4、如果滚动条在页面下面,此时刷新页面,刷新成功后,执行当前显示在屏幕上的几个楼层的异步加载,滚动条向上滚动时才加载上面的楼层直接上代码:/**************************start* 懒加载方法(当元素进入在界面中显示触发回调函数)*...转载 2021-02-19 10:14:13 · 577 阅读 · 0 评论 -
常用的正则表达式
//(1)匹配 16 进制颜色值 var color = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g; //(2)匹配日期,如 yyyy-mm-dd 格式 var date = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/; //(3)匹配 qq 号 var qq = /^[1-9][0-9]{4,10}$/g; //(4)手机号码正则 var phone = /^1[34578]\d{9}$/g.原创 2021-01-21 16:38:27 · 154 阅读 · 0 评论 -
js给搜索关键字加样式(包含的字都匹配)
页面布局,样式这些就不说了,直接看js部分, function txtSearch() { var txt = $("#seachVal").val(); var regex=new RegExp("["+txt+"]","g"); $(".Searh_content ul li span.title").each(function(index,el) { var elTxt=$(el).text(); var val=elTxt.match(.原创 2020-11-02 11:29:30 · 884 阅读 · 0 评论 -
移动端滑块验证
<!DOCTYPE html><html lang="cn"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="apple-mobil..原创 2020-09-02 19:54:53 · 1355 阅读 · 0 评论 -
删掉文本空格
function filterHtmlTag(msg, is_global) { var msg = msg.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag msg = msg.replace(/[|]*\n/, '') //去除行尾空格 msg = msg.replace(/&npsp;/ig, ''); //去掉npsp msg = msg.replace(/(^\s*)|(\s*$)/g, "") //去掉空.原创 2020-09-02 19:51:50 · 179 阅读 · 0 评论 -
input设置maxlength为最大长度无效解决方案
第一种方法:input属性为number,做if判断,然后slice选取<input type="number" oninput="if(value.length>6)value=value.slice(0,6)" />第二种方法:input属性为text,设置maxlength为最大长度,使用onkeyup和onafterpaste 限制只能输入数字...原创 2020-06-17 15:10:21 · 6248 阅读 · 0 评论 -
js截取英语完整单词,超出部分显示"...”
//英文标题按单词截取(参数说明 text:要截取的英文 len:要截取的长度) function sliceEnglish(text,len) { //如果要截取文本的长度小于或者等于要截取的长度,则不进行截取,直接返回文本 if(text.length < len) { return text; } ...转载 2020-02-19 14:14:38 · 698 阅读 · 0 评论 -
swiper上下滑动缓慢过渡
先修改css.swiper-container{width: 100%;height: 100%;}.swiper-container-scrollbar .swiper-slide{ height: auto;}.swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-func...原创 2019-12-30 11:52:39 · 2710 阅读 · 0 评论 -
fancyBox是一款优秀的弹出框Jquery插件。
特点1、允许我们用鼠标和键盘上的四个方向键切换图片2、可以根据当前窗口大小自动调整弹出框的大小,当我们改变浏览器窗口大小时,将会看到弹出框自动缩放了3、支持缩略图和按钮帮助导航4、弹出框支持显示多种类型的内容(图片,html,视频……)请下载demo中的文件(建议下载网盘中的,已经经过整理),查看index.html中的源代码,提取你想要的效果的js和html代码。还可以参加参数列...原创 2019-12-24 10:02:37 · 360 阅读 · 0 评论 -
表单对象选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title><!DOCTYPE html> <html> <head> <meta http-...转载 2019-11-22 19:35:46 · 137 阅读 · 0 评论 -
表单元素选择器
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>jQuery表单元素选择器</title> <link rel="styleshe...转载 2019-11-22 19:35:18 · 384 阅读 · 0 评论 -
子元素筛选选择器
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="ch...转载 2019-11-22 19:34:42 · 145 阅读 · 0 评论 -
属性筛选选择器
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>jQuery子元素筛选选择器</title> <link rel="styles...转载 2019-11-22 19:34:10 · 186 阅读 · 0 评论 -
可见性筛选选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery可见性筛选选择器</title> <link rel="stylesheet" href="2-9.css" type="text/css"&g...转载 2019-11-22 19:33:30 · 164 阅读 · 0 评论 -
内容筛选选择器
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>jQuery内容筛选选择器</title> <link rel="stylesh...转载 2019-11-22 19:32:29 · 127 阅读 · 0 评论 -
基本筛选选择器
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>jQuery基本筛选选择器</title> <link rel="stylesh...转载 2019-11-22 19:31:45 · 201 阅读 · 0 评论 -
前端开发之图片只是应盒子大小
一、让图片的宽度或者高度等于容器的宽度或高度,多余的裁掉,然后让图片居中: <style type="text/css">div{width: 200px;height: 200px;overflow: hidden;border: 2px solid red;position: relative;}img{width: 100%;pos...转载 2019-10-21 11:46:02 · 731 阅读 · 0 评论 -
前端开发应知网站
作为一名前端开发者(所有程序员)最起码遇到bug就算不会解决也应该会搜解决问题的答案。一般笔者会先在百度搜(关键词一定要输入正确)如果没搜到会再去bing里面看看还没有的话就去github的Issues里面再看看如果还不行就只能自己去看官方文档然后自己研究了。建议学习一下这个搜索技巧。搜索技巧:https://blog.csdn.net/weixin_43606158/articl...转载 2019-09-21 12:01:05 · 337 阅读 · 0 评论