自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(34)
  • 收藏
  • 关注

原创 前端代码规范 - JavaScript 部分规范

在前端开发中,JavaScript 是实现交互性和动态功能的关键语言。为了确保代码的可读性、可维护性和性能,遵循一定的编码规范至关重要。以下是一份前端JS代码规范与最佳实践指南,以下仅是一部分规范供参考,在实际开发中每个项目和团队都有其独特性。应当根据具体的项目需求和团队习惯来调整,以确保最佳使用规范。。

2024-04-23 17:58:03 1143 1

原创 动画进阶:神奇的 3D 磨砂玻璃透视效果

神奇的 3D 磨砂玻璃透视效果

2023-08-08 15:38:53 156

原创 js实现鼠标跟随 3D 旋转动效

js实现鼠标跟随 3D 旋转动效

2023-08-08 12:36:36 466

原创 html满屏动态雪花效果,css+js,亲测有效

html满屏动态雪花效果,css+js,亲测有效

2023-08-08 12:27:29 1105

原创 纯前端css实现酷炫loading动画

纯前端css实现酷炫loading动画

2023-07-06 16:23:33 1363

原创 树形组件el-tree添加虚线,指示线

为树形组件el-tree添加虚线,指⽰线

2022-06-08 13:53:45 2412 5

原创 CSS实现聊天气泡效果

html<div class="pop"> <div class="arrow"></div></div>css/*气泡*/.pop { position:relative; width:100px; height:35px; line-height: 33px; /*background:#fff;*/ color:#fff; border-radius:5px; /* 圆角 */ background-col

2021-11-24 12:26:34 2092

原创 css音阶波浪动画图,线性渐变色

html<div class="loader-inner line-scale-pulse-out-rapid success"> <div></div> <div></div> <div></div> </div>css/*动态分析图标*/.line-scale-pulse-out-rapid.success > div

2021-11-24 12:21:02 822

原创 css 省略号动画

<div class="text">加载中,请稍后<span class="dot">...</span></div><style>.dot { font-family: simsun; /*固定字体避免设置的宽度无效*/ animation: dot 3s infinite step-start; display: inline-block; width: 1.5em; vertical-align:

2021-11-24 12:15:37 1110

原创 js生成指定位数随机数

js生成指定位数随机数

2021-11-24 12:13:22 1848

原创 JS 生成指定数字范围内的数组

1.生成指定数字范围内的数组<script>var arr = [];Array.prototype.range = function ( start,end ){ var _self = this; var length = end - start +1; var step = start - 1; return Array.apply(null,{length:length}).map(function (v,i){step++;return step;

2021-11-24 10:58:17 3769

原创 el-form 检验结束不能小于开始数字

<el-form :model="form" :rules="rules" ref="form"> <el-form-item label="开始" prop="start"> <el-input v-model="form.start" placeholder="请输入开始" /> </el-form-item> <el-form-item label="结束" prop="end"> <el-input v-m

2021-11-24 10:54:38 785

原创 ‘321,123‘,‘123,321‘数值字符串的比较,判断是否相等

function compare(str1, str2){ return str1.split(',').sort().toString() === str2.split(',').sort().toString()}// to-do testvar a = '321,123'var b = '123,321'const result = compare(a,b)console.log(result)

2021-10-18 11:26:21 318

原创 二维数组交叉组合[[1,2,3],[4,5],[6,7]],转化为[[1,4,6],[1,5,6],[2,4,6]…]

二维数组交叉组合[[1,2,3],[4,5],[6,7]],转化为[[1,4,6],[1,5,6],[2,4,6]…]function combination(arr = [], result = []){ if(arr.length <= 0){ return result } if(result.length <= 0){ result = arr.shift() return combination(arr,result) }e

2021-10-18 11:20:37 397

原创 浏览器滚动条高度增宽,并解决el-table设置了固定列导致的滚动条无法拖动问题

1.浏览器滚动条高度增宽div::-webkit-scrollbar{ height:10px; margin-top: 10px; }2.解决el-table设置了固定列导致的滚动条无法拖动问题.el-table__fixed-right::before, .el-table__fixed::before{//解决固定后有一条缝隙 height:0; } .el-table__fixed {//左固定列 height: auto !important;

2021-08-04 14:03:49 1016

原创 ElementUI日期选择器时间选择范围限制

一、组件代码:<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0"></el-date-picker>二、设置选择今天以及今天之后的日期data (){ return { pickerOptions0: { disabledDate(t

2021-06-29 12:28:59 1740 3

原创 element级联选择器多选,父子关联和不关联之间切换,及删除空数组

element级联选择器多选,父子关联和不关联之间切换,及删除空数组一、级联选择器组件<el-cascader v-if="column.type === columnType.cascaderMultiple" v-model="formModel[column.prop]" :options="column.data" @change="valueChangeMultiple($event,column)"

2021-06-29 12:14:58 1303

原创 vue中兄弟组件间传值,$bus的使用

一、main.jsVue.prototype.$bus = new Vue()二、路由1页面,也可是父路由<template> <router-view></router-view></template>export default { name: "father", mounted() { let _this = this //很关键是要把父路由的vue实例赋给_this this.$bus.

2021-04-25 17:53:43 433

原创 element-UI dropdown下拉菜单 传多个参数

<el-dropdown class="dropdown_btn" @command="handleCommand"> <span class="el-dropdown-link">更多</span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item :command="beforeHandleCommand('a',scope.row)">设备订单</el-dr

2021-04-23 11:02:02 1223 1

原创 浏览器字体小于12px

解决:html:<div class="demo"> <span>等于12px时</span> <span>小于12px时</span></div>注意:元素有背景的话,给这个属性会使背景也随着变化,所以,我们可以给标签里再套个<span》css: .demo { :first-child { font-size:12px; } :last-child { co

2021-04-22 15:35:57 70

原创 Linux上安装MySQL

一、获取mysql YUM源查看是否已经安装了mysql[root@localhost ~]# rpm -qa|grep mysql #无输出说明没有安装打开网址:https://dev.mysql.com/downloads/repo/yum/选择对应linux版本,查看自己的版本:[root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.8.2003 (Core)点击左下角No thanks, just start

2021-04-21 18:15:02 65

原创 使用swiper 轮播插件ajax 请求加载图片时,无法滑动问题

这里写自定义目录标题使用swiper 轮播插件ajax 请求加载图片时,无法滑动问题解决使用swiper 轮播插件ajax 请求加载图片时,无法滑动问题因为banner图是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度,通过调整js加载顺序,问题还是没有解决。最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的,添加observer:true后问题解决!解决var mySwiper = new Swiper ('.swiper-container', {

2020-11-10 16:05:32 196

原创 Vue.js阿拉伯数字转化成人民币的中文

Vue.js阿拉伯数字转化成人民币的中文1.在template中<template> <div class="turnpoint"> <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="194"> <FormItem label="转点金额" prop="passwd"> <InputNumber @on-ch

2020-11-04 11:50:02 532

原创 海康经纬度 转换 GPS坐标

Vue.js阿拉伯数字转化成人民币的中文1.在template中 }

2020-11-04 11:20:42 2912 2

原创 JS 获取文件后缀,判断文件类型(比如是否为图片格式)

JS 获取文件后缀,判断文件类型是否为图片格式

2020-11-04 11:15:53 4464

原创 速学js转化数据为null时页面展示为空

js转化数据为null时展示为空const data = { aa: null, bb: 'bb', cc: 'null', dd: { dd1: 'dd1', dd2: null, dd3: 'null' }, ee: [{ ee: 'null', ff: ['nul...

2020-03-29 15:30:17 671

原创 显示当前系统日期时间

window.onload = function(){ //获取一下div元素 var div= document.getElementsByTagName("div")[0]; //创建日期对象 var now = new Date(); //年份 var year = now.getFull...

2020-02-22 12:53:52 1444

原创 创建,获取cookie的函数封装

function setcookie(key, value, day) { //创建时间对象 var now = new Date(); now.setDate(now.getDate() + day) document.cookie = key + '=' + value + ';expires=' + now; }...

2020-02-22 12:51:37 237

原创 面向对象创建选项卡

    选项卡一    选项卡二    选项卡三    内容一    内容二    内容三    ...

2020-02-22 12:48:29 112

原创 js冒泡排序

**var arr = [5,8,4,9]; for(var i =0;i<arr.length-1;i++){ for(var j = 0;j<arr.length-i-1;j++){ if(arr[j]>arr[j+1]){ var temp = arr[j]; ...

2020-02-22 12:46:24 71

node js入门必看

nodejs1.服务器端运行的 js的一个运行环境apache tomcat IIS nginx开放源 BSD github特点:事件驱动 event非阻塞和异步I/O模型 input输入 output 输出Node大部分基本模块都用JavaScript编写,底层模块 c++ c++稳定性 性能非常好官方网址:https://nodejs.org/zh-cn/win...

2020-02-22 12:43:28 96

原创 速学npm

一:什么是Npm?1.npm 是 Node.js 官方提供的包管理工具,他已经成了 Node.js 包的标准发布平台,用于 Node.js 包的发布、传播、依赖控制。npm 提供了命令行工具,使你可以方便地下载、安装、升级、删除包,也可以让你作为开发者发布并维护包。 npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有 30...

2020-02-22 12:42:57 229

原创 检测引用数据类型的具体类型

封装函数检测object具体类型function toType (obj) {return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()}

2020-02-22 12:41:23 231

原创 JS递归,几个小例子教你秒懂递归

Js递归,几个小例子教你秒懂递归**1.递归**:函数中用调用函数自己,此时就是递归,递归一定要有结束条件function f1() {console.log(“从前有座山,山里有个庙,庙里有个老和尚给小和尚讲故事:”);f1();};f1();//浏览器崩溃,因为没有结束条件——死循环改进如下:var i=0;function f1() {i++;if (i<5)...

2020-02-18 18:49:20 998

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除