前端
dae bal
随记
展开
-
rollup-plugin-visualizer 打包体积分析插件(vue+vite)
打包之后就能看到分析图了。原创 2024-06-26 18:22:56 · 286 阅读 · 0 评论 -
递归组件过滤
/ 判断节点是否匹配关键字 const isMatched = node . title . includes(keyword) // 递归过滤子节点 if(node . children && node . children . length > 0) {原创 2023-06-28 15:25:21 · 473 阅读 · 0 评论 -
node安装
1、将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【D:\nodejs】下创建两个文件夹【node_global】及【node_cache】在【系统变量】下的【Path】新建添加node全局文件夹【D:\nodejs\node_global】,之后点击确定。在【系统变量】下新建【NODE_PATH】【D:\Nodejs\node_global\node_modules】将【用户变量】下的【Path】修改为【D:\nodejs\node_global】,之后点击确定。原创 2023-06-04 12:24:13 · 159 阅读 · 0 评论 -
vue3使用json-server 模拟数据
进入src 目录(放db.json文件的目录),打开终端输入以下命令。可以把上面命令放在package.json里面,下次启动直接输入。原创 2023-05-25 16:10:51 · 390 阅读 · 1 评论 -
jquery实现表格横向纵向滚动(横向滚动时左侧固定前几列)
【代码】jquery实现表格横向纵向滚动(横向滚动时左侧固定前几列)原创 2023-05-19 16:37:30 · 472 阅读 · 0 评论 -
vue使用eval eslint提示eval can be harmful
【代码】vue使用eval eslint提示eval can be harmful。原创 2023-04-04 10:27:35 · 569 阅读 · 0 评论 -
js骚操作
【代码】js骚操作。原创 2023-03-20 14:46:09 · 95 阅读 · 0 评论 -
docker安装
docker安装原创 2023-01-30 15:25:41 · 68 阅读 · 0 评论 -
判断数组中是否包含某个值
判断数组中是否存在某个值,如果存在,则返回数组元素的下标,否则返回-1。:返回数组中满足条件的第一个元素的值,如果没有,返回undefined。:判断数组中是否存在某个值,如果存在返回true,否则返回false。:返回数组中满足条件的第一个元素的下标,如果没有找到,返回-1。原创 2022-12-08 14:19:38 · 2837 阅读 · 0 评论 -
vue+js转vue+ts
vue+js转vue+ts原创 2022-09-27 18:15:42 · 2612 阅读 · 0 评论 -
tab切换
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} ul{list-style: none;} li *{border: 1px solid #f5f5f5;} i{font-size: 12px;}原创 2022-04-11 16:27:51 · 219 阅读 · 0 评论 -
实现手机号输入框 (3-4-4格式)
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>实现手机号输入框 (3-4-4格式)</原创 2021-12-27 17:26:06 · 1808 阅读 · 0 评论 -
页面锚点跳转
<script> $('#Btn1').click(function() { $('html,body').animate({ scrollTop: $("#Box1").offset().top - 100 }, 400);}); $('#Btn2').click(function() { $('html,body').animate({ scrollTop: $("#Box2").offset().top - 100原创 2021-12-01 17:29:07 · 488 阅读 · 0 评论 -
jq实现给某个字段加样式
示例一:<script type="text/javascript"> $('body').html(function(i,oldHTML){ return oldHTML.replace(/®/g,'<sup>®</sup>'); })</script>示例二:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <tit原创 2021-11-19 09:33:21 · 636 阅读 · 0 评论 -
jq实现表格冻结窗格的样式
图示:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>冻结窗格</title> </原创 2021-11-15 11:02:19 · 507 阅读 · 0 评论 -
阿里云邮箱设置smtp服务
原创 2021-09-27 17:38:41 · 4564 阅读 · 1 评论 -
webpack 安装和使用
(1)全局安装后,应该都是最新版的,搜索之后说是新版本的指令有所不同npm install webpack -gnpm install webpack-cil -g我的版本图:(2)然后输入上面这句进行打包(把mian.js打包到dist里面)webpack ./src/main.js -o ./dist(3)webpack.config.js(下面是我配置文件)const path = require('path')module.exports = { entry: path.原创 2021-09-23 13:49:17 · 161 阅读 · 0 评论 -
jq获取页面元素的高度与实际不符合
问题:原本盒子的高度是110,然后console出来是22,就很奇怪;解决:后来把js放在了$(function(){});里面就正常了原创 2021-08-31 16:02:17 · 1331 阅读 · 0 评论 -
10种优化页面加载速度的方法
网址:https://www.diybloghome.com/frontlogy/1036.html原创 2021-08-14 09:43:10 · 657 阅读 · 0 评论 -
微信公众号自定义分享的描述和图片
准备:一:在公众号设置里面设置——JS接口安全域名,所填域名必须通过ICP备案的验证,把里面提供的一个MP_verify_xxxxxx.txt的文本上传到根目录。二:在公众号基本配置里面获取开发者的AppID和AppSecret。三:在安全中心里面设置IP白名单。最后在需要分享的页面调用:<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>&原创 2021-08-13 14:13:05 · 657 阅读 · 0 评论 -
自适应表格(标签更规范)
图示:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="/templates/Tpl/js/pintuer/pintuer.css">原创 2021-08-02 15:23:28 · 106 阅读 · 0 评论 -
登录注册页面
图示:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登录系统</title> <script src="/LinkPHP/Tpl/Home/Default/Public/pintuer原创 2021-08-02 15:16:15 · 1098 阅读 · 0 评论 -
ios手机系统中 input type=“date“日期控件显示不出来解决方法
测试给input type="date"要给它加上个val行不行,结果还是没有效果;最后给它加上宽高以后就显示出来了;<input type="date" class="searchvalue" style="width:125px;height:25px;background-color:white" value=""/>原创 2021-07-28 12:02:46 · 1703 阅读 · 0 评论 -
IPhone手机页面中点击输入框,弹出键盘网页会放大的解决方法
在head标签中加入以下meta声明:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />viewport的几个属性:width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的最小比例maximum-s原创 2021-07-28 11:56:09 · 1125 阅读 · 0 评论 -
25道古怪的js题(无聊的时候可以测一测)
25道古怪的js题:https://jsisweird.com/原创 2021-07-14 15:58:27 · 104 阅读 · 0 评论 -
微信公众号没办法直接获取用户的手机号
微信公众号如何获取手机号,H5调用小程序,小程序调用H5:https://blog.csdn.net/u010757785/article/details/100534023微信开放社区讨论关于获取手机号:https://developers.weixin.qq.com/community/develop/doc/f31a259b66db48ddd82fbee36b4bb157总结就是:公众号直接获取不行 ,小程序才好获取手机号码。想用微信公众号直接获取手机号,要大公司才可以拿到授权,小公司没这个原创 2021-07-02 15:41:21 · 15546 阅读 · 0 评论 -
HTML技巧
参考网址:https://markodenic.com/html-tips/原创 2021-06-22 16:25:53 · 97 阅读 · 0 评论 -
transition transform属性造成文字抖动及模糊的解决方法
百度说这样做:在该动画的transform里加上translateZ(0)值, 能解决文字抖动的问题,但是没解决文字模糊的问题。在发生文字模糊的地方加上transform: translate3d(0,0,0),解决文字模糊以及的问题。最后,我还是用定位实现了原本的效果:替换成了:.new14 .ui_mid3{position: absolute;top: 0;height: 100%;transition: all .5s ease;}.new14 .ui_mid3:hover {to原创 2021-06-22 16:09:24 · 1905 阅读 · 0 评论 -
404页面错误倒数提示
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>404</title> </head> <body> <div style="text-align: center原创 2021-06-21 09:56:30 · 46 阅读 · 0 评论 -
用iframe嵌入另外一个页面
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #anli{position: absolute;top:0;}原创 2021-05-18 17:12:15 · 1057 阅读 · 0 评论 -
给auto的图片用伪元素设置一个遮罩层
主要:给img标签用div包裹住,div转成行内块元素,最后使用伪元素定位加一个遮罩层;代码:<style type="text/css"> .basictext4 img{width: auto;display: block;margin: 0 auto;} .basictext4 .wrap{text-align: center;} .basictext4 .wrap .pic_img{display: inline-block;} .basictext4 .wrap .pic_原创 2021-04-21 15:06:23 · 291 阅读 · 1 评论 -
swiper轮播的双向绑定实例
一对一类型:<style> .index-product13 .swiper-container{position: relative;} .index-product13 .swiper-button-next,.index-product13 .swiper-button-prev{background-image: none;position: absolute;top: 50%;transform: translateY(-50%);-webkit-transfo...原创 2021-04-01 16:20:28 · 859 阅读 · 2 评论 -
小程序遇到的问题解决方法
问题一:<image>标签和<view>标签之间有缝隙;解决方法:给image标签加上display:block;原创 2021-01-14 09:35:09 · 452 阅读 · 0 评论 -
小程序地图
wxml:<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" style="width: 100%; height: 300px;margin-top:30px"></map> js://index.js //获取应用实例 var app = getApp() Page({ data: { latitude:..原创 2021-01-14 09:28:55 · 103 阅读 · 0 评论 -
css——文字竖行排列的样式
竖向排列:writing-mode: vertical-rl;竖向里面设置数字横向排列:text-combine-upright: all;<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></t.原创 2020-12-11 10:37:25 · 957 阅读 · 0 评论 -
CSS3中transition和transform的区别
属性 含义 animation(动画) 用于设置动画属性,他是一个简写的属性,包含6个属性 transition(过渡) 用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同 transform(变形) 用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没有什么关系,就相当于color一样用来设置元素的“外表” translate(移动) translate只是transform的一个属性值,即移动。 ...原创 2020-12-08 09:30:07 · 1210 阅读 · 0 评论 -
图片弹出放大
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片弹窗</title> <style> /* 触发弹窗图片的样式 */ #myImg ..原创 2020-12-04 16:59:59 · 286 阅读 · 0 评论 -
遮罩层随鼠标方向移动的效果
写法一:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>遮罩层随鼠标方向移动</title> <script src="./jquery-3.2.1.min.js"></.原创 2020-12-04 14:24:00 · 382 阅读 · 0 评论 -
var getDir=function(){}和function getDir(){}的区别
function getDir(){} 为函数声明function getDir(){}属于封装函数,这个可以写在调用之后var getDir = function(){} 为函数表达式就必须写在调用getDir之前原创 2020-12-04 14:17:37 · 348 阅读 · 0 评论 -
web——效果插件
网址:https://fancyapps.com/fancybox/3/快速开始://引用<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.m原创 2020-12-02 13:55:51 · 117 阅读 · 0 评论