- 博客(34)
- 收藏
- 关注
RSS订阅原创 前端代码规范 - JavaScript 部分规范
在前端开发中，JavaScript 是实现交互性和动态功能的关键语言。为了确保代码的可读性、可维护性和性能，遵循一定的编码规范至关重要。以下是一份前端JS代码规范与最佳实践指南，以下仅是一部分规范供参考，在实际开发中每个项目和团队都有其独特性。应当根据具体的项目需求和团队习惯来调整，以确保最佳使用规范。。
2024-04-23 17:58:03
1143
1
原创 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
2093
原创 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
824
原创 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 生成指定数字范围内的数组
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
3771
原创 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
789
原创 ‘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
321
原创 二维数组交叉组合[[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
400
原创 浏览器滚动条高度增宽，并解决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
1018
原创 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
1741
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
1315
原创 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
1226
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
72
原创 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
66
原创 使用swiper 轮播插件ajax 请求加载图片时，无法滑动问题
这里写自定义目录标题使用swiper 轮播插件ajax 请求加载图片时，无法滑动问题解决使用swiper 轮播插件ajax 请求加载图片时，无法滑动问题因为banner图是动态创建的，在插件开始初始化时，文档流中没用图片，故没有创建相应宽度，通过调整js加载顺序，问题还是没有解决。最后找到swiper插件 api 有属性是可以根据内容变动，自动初始化插件的，添加observer：true后问题解决！解决var mySwiper = new Swiper ('.swiper-container', {
2020-11-10 16:05:32
198
原创 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
533
原创 速学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
675
原创 显示当前系统日期时间
window.onload = function(){ //获取一下div元素 var div= document.getElementsByTagName("div")[0]; //创建日期对象 var now = new Date(); //年份 var year = now.getFull...
2020-02-22 12:53:52
1447
原创 创建，获取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
238
原创 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
72
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
97
原创 速学npm
一：什么是Npm?1.npm 是 Node.js 官方提供的包管理工具，他已经成了 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制。npm 提供了命令行工具，使你可以方便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包。 npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30...
2020-02-22 12:42:57
230
原创 检测引用数据类型的具体类型
封装函数检测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关注的人