- 博客(61)
- 收藏
- 关注
RSS订阅原创 css选择器:first-child和:first-of-type区别
还是上面的代码，用p:first-child()去匹配是匹配不到p元素的，但是若用:first-of-type去匹配则可以匹配到p元素，因为:first-of-type要求只要是第一个出现的子元素即可。上面的代码，若用p:first-child()去匹配则匹配不到p元素，因为此时p标签不是其父元素的第一个子元素。
2023-02-27 14:45:21
872
1
原创 获取时间补0 巧思
使用padStart方法ES2017引入的字符串补全功能，看知乎偶然间看到的。'1'.padStart(2,0) //01'01'.padStart(2,0) //01与之对应的还有一个padEnd方法，在字符串尾部补全使用模板字符串和slice传负数结合var hour=01;var hour1=1;console.log(`00${hour}`.slice(-2)); //01console.log(`00${hour1}`.slice(-2)); //01这样就不用手动
2022-01-13 14:30:12
176
原创 javascript异步操作常用场景代码
本文只对常用场景需要的异步操作方法做解释，需要查看promise详细知识的请自行跳转// function f1() {// setTimeout(function () {// console.log(‘3s后执行此行！’);// }, 3000)// }// function f2() {// setTimeout(function () {// console.log('5s后执行此行！');// }, 5000)//
2022-01-11 16:01:18
273
原创 ES6 解构赋值更详细功能
知识点解构赋值可解构数组和对象数组元素按次序排列，取值取决于位置；对象的属性没有顺序，取值需与属性同名，才可取到值。给数组和对象解构赋值时可以给予默认值。//数组let [x, y = 'b'] = ['a']; // x='a', y='b'let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'//对象var {x, y = 5} = {x: 1};x // 1y // 5给对象解构赋值时可定义新的变量名。let
2022-01-06 14:32:46
448
原创 addEventListener的执行函数使用具名函数并传参，可使用removeEventListener移除
添加事件监听 // 给需要添加监听事件的对象添加参数 //id, index, issubmited是已存在的值 document.getElementById(id)._params = { id, index, issubmited }; //_this.pasteFun函数为执行函数 document.getElementById(id).addEventListener("paste", _this.pasteFun);执行函数pasteFun(event) { var
2021-12-23 11:38:48
990
原创 javascript代码执行顺序 record
如果代码是这样的顺序写的（即把打印写在了接口里面）_this.$api.systemAPI.chinacity().then((res) => { res.data.map((v) => { _this.allData.push({ name: v.city, value: v.num }); console.log(_this.allData); }); console.log(_th
2021-12-21 11:44:24
765
原创 iframe跨域 使用postMessage API 进行父子页面通信
父页面<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&
2021-12-02 16:19:28
176
原创 一行代码生成随机字符串（随机字母和数字）
实现方式const str=Math.random().toString(36).substr(2,10);解释说明（文字来源：技术胖写程序）Math.random() 生成 [0, 1) 的数，也就是 0.123312、0.982931之类的，然后调用 number 的 toString方法将其转换成36进制的，按照MDN的说法，36进制的转换应该是包含了字母 a~z 和 数字0~9的，因为这样生成的是 0.89kjna21sa 类似这样的，所以要截取一下小数部分，即从索引 2 开始截取10个字符
2021-11-26 16:25:45
386
原创 图片base64转文件 并以formdata传给后台
base64转文件 并以formdata传给后台相关概念BlobUint8Array代码相关概念BlobBlob，Binary Large Object缩写，二进制大对象，表示一个不可变、原始数据的类文件对象。单位为字节（byte），一个字节8位长，为0~255Uint8Array8位无符号整型数组代码let binary = atob(base64.split(',')[1]);let array = [];for (let i = 0; i < binary.length; i
2021-11-22 17:51:08
945
原创 如何将变量作为javascript对象的key
如何将变量作为javascript对象的keyvar keyArr = ['key1', 'key2', 'key3', 'key4', 'key5'];var valueArr = [45, 67, "name", "kjhhh", 100];var tarArr = [];var k;for (let i = 0; i < keyArr.length; i++) { k = keyArr[i]; // tarArr.push({ // k: value
2021-08-17 16:26:14
371
原创 关于electron-vue项目 运行npm run dev 跑不起来的解决
1下载node_moduleselectron-vue 项目下载后运行 npm install2 cd到/node_modules/electron目录下若node_modules下没有electron文件，则删除重新下载运行node install3启动项目即可npm run dev运行过程中可能会遇到扩展插件vue-devtools安装不成功的问题，我找了好多解决办法都没解决，索性就重新安装了electron-vue，就没再有这个问题了。个人猜测可能是由于运行项目时不熟悉项目，运行
2021-06-18 13:44:09
1866
转载 归并排序 代码详解 JavaScript
归并排序（分治法）思路代码思路归并排序即是将一个无序数组通过分治法排列成有序数组的过程，主要通过将原始数组分为若干个单数组（即只有一个数的数组），再分别排序并合并的过程。代码 var a = [6, 202, 100, 301, 38, 8, 1]; function mergeSort(arr) { const length = arr.length; if (length === 1) { //递归算法的停止条件，即为判断数组长度是否为1
2021-06-04 17:46:11
112
原创 html实现打印功能
实现代码 写入js文件中 // 打印 function preview(oper) { if (oper < 10) { bdhtml = window.document.body.innerHTML; //获取当前页的html代码 sprnstr = "<!--startprint" + oper + "-->"; //设置打印开始区域 eprnstr = "<!--endprint" + oper + "-->"; //设置打印结束
2021-05-07 14:40:29
5002
3
原创 html2canvas实现截图功能
1 下载html2canvas.js或者直接引入下载地址 或 直接引入<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>截屏后跳转新页面显示图片 $(".screen").on('click', function (event) { event.preventDefault(); html2canvas(document.body, { allow
2021-05-07 14:09:31
807
原创 将本地html文件运行到本地服务器localhost上
下载http-servernpm i -g http-server在html文件目录下运行http-server然后就能看到可以在本地服务器打开 而不是file下
2021-04-23 10:41:22
4546
原创 记录 实现文本溢出显示省略号
css实现overflow: hidden;/*文本不换行*/white-space: nowrap;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/text-overflow: ellipsis;
2021-04-08 17:33:01
361
1
原创 vue项目加载会出现花括号{{}}的解决方法
使用v-cloak指令这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。<div v-cloak> {{ message }}</div>[v-cloak] { display: none;}使用v-text指令更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustac
2021-04-08 17:27:35
2540
原创 已经安装好vue-devtools插件 右击检查看不到还是vue选项
情况1：打开的不是本地运行起来的系统必须是开发模式下（即本地运行）才能看到，如果你打开的是已经放到服务器上面的链接，就是看不到的情况2：使用外部引入vue.min.js的方式使用的vue引入的是vue.min.js文件，这种压缩版的是默认不支持调试的，改为引入vue.js即可...
2021-04-08 15:02:00
1747
原创 Object对象类型 不能直接赋值
Object对象类型 直接赋值的话 会把地址也复制过去所以要用json进行深拷贝object对象类型2 = JSON.parse(JSON.stringify(object对象类型1))
2021-04-07 13:12:22
1247
原创 javascript 实现新闻自动滚动
html代码<body> <div class="level1"> <div class="parent" id="parent"> <div class="scroll-one" id="scroll-one"> <ul> <li>第1行</li> <li&
2021-03-24 13:28:29
801
原创 关于vue指令v-for和v-if为什么不能同时使用的回答
vue指令v-for和v-if不建议同时使用在vue2.x中，v-for优先级是高于v-if的，如果在同一个元素中使用了v-for和v-if，那么在渲染时，v-for的每一项都要重复运行v-if，这会降低渲染的效率解决方式可以将v-if的功能替换为 在一个计算属性上面遍历后使用如：computed: { activeUsers: function () { return this.users.filter(function (user) { return user.isA
2021-03-12 13:43:41
696
2
原创 判断一个整数是否为素数
判断一个整数是否为素数思路：让该数整除所有小于等于本身的所有整数，并定义一个数值记录有几个结果为0，若该数为素数，则结果一定为2，否则不算素数var isPrime = function (num, count = 0) { //一个一个整除小于它本身的数 for (let i = 0; i <= num; i++) { if (num % i == 0) { count++; }
2021-01-21 16:29:25
453
原创 检查一个数组 是否具有重复的元素
检查一个数组 是否具有重复的元素var chongfuArr=["1","1","2324","45465","234"]; var a=true; //默认没有重复 for(var i=0;i<chongfuArr.length;i++){ for(var j=i+1;j<chongfuArr.length;j++){ if(chongfuArr[i]==chongfuArr[j]){ console.
2021-01-18 13:31:34
117
1
原创 常用正则表达式
手机号验证const reg = /^1[23456789]\d{9}$/;邮箱验证const reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;用户名验证4-16位数字、字母、下划线的组合const reg = /^[a-zA-Z0-9_]{4,16}$/;密码验证长度在8~18之间，只能包含字母、数字和特殊字符const reg = /^(?=.*\d)(?=.*[a-zA-Z]
2020-12-30 15:07:14
224
原创 使用echarts 画地球 带lines3D 并有动画效果
代码 //绘制地球 var canvas = document.createElement("canvas"); var texture = this.Echarts.init(canvas, null, { width: 4096, height: 2048, }); texture.setOption({ backgroundColor: "rgba(3,28,72,0.3)", geo:
2020-12-03 13:11:11
2910
1
原创 vue Router传值 params和query区别
这里写自定义目录标题vue-router传值params接收query接收params和query传值的区别vue-router传值paramsthis.$router.push({name:'edit',params:{id:row.id}});接收this.$route.params.idquerythis.$router.push({path:'/match/edit',query:{id:row.id}});接收this.$route.query.idparams和que
2020-11-17 12:02:45
183
原创 生成随机数字
生成随机数字var random = [2, 3, 4, 5, 6, 7, 8, 9]; for (let i = 0; i < 1; i++) { // i指生成随机数字的位数 var index = Math.floor(Math.random() * 7); this.b += random[index]; }
2020-11-06 11:52:23
404
原创 更改element-ui 已上传文件列表回显样式
效果对el-upload样式进行修改.el-breadcrumb__inner,.el-breadcrumb__inner a { font-weight: 400 !important;}.el-upload { input[type="file"] { display: none !important; }}.filestyle { .el-upload { position: absolute; } .el-upload-list {
2020-10-23 14:24:53
5597
1
原创 带筛选功能的el-table
多选展示单选展示Html部分代码<el-table :data="tableData" @filter-change="filterChange" :header-cell-style="{background:'#ededed'}" stripe height="600" style="width: 100%" > <el-
2020-09-16 17:34:48
2289
原创 世界地图
this.chart.setOption({ tooltip: { //圆点tooltip formatter: "{b}", emphasis: { show: false, }, }, geo: { show: true, map: "world", roam: true, ...
2020-09-07 11:04:37
156
原创 javascript中call，apply，bind的简单理解
三者都是用来改变函数的this对象的指向的第一个参数都是this要指向的对象都可以利用后续参数传参关于传参call(this,a,b,c);apply(this,[a,b,c]);bind(this,a,b,c)();三者的第一个参数都是this要指向的对象call和bind传参时是在第一个参数后面一个一个的传apply传参是传入一个数组，里面是相应的参数因为bind返回的是一个函数，所以需要加上()对函数进行调用，而call和apply都是对函数的直接调用另外，bind还可以.
2020-07-22 14:11:46
119
原创 罗马数字转换器
罗马数字转换器function convertToRoman(num) { var decimal=[1000,900,500,400,100,90,50,40,10,9,5,4,1]; var romanNumeral=["M","CM","D","CD","C","XC","L","XL","X","IX","V","IV","I"]; //与上面一一对应 var result=""; // 循环 for(let i=0;i<decimal.length
2020-07-14 14:17:14
2360
原创 while和if的区别
while和if的区别二者都有条件判断while是用来做循环的，也就是说只要条件满足，就会执行一次循环体，执行完以后会再判断一次条件，如果满足条件，还会再执行一次，终而复始，除非你在循环中对条件进行了改变才会从循环中跳出来。而if只做一次判断，条件不满足就不执行，满足就执行一次，执行完就往下执行，不会再回过头来继续执行。...
2020-07-14 14:15:21
1609
原创 背景图片自适应 总是充满整个屏幕
设置background-size: cover;background-position: 50% 0px;background-repeat: no-repeat;
2020-07-06 10:00:56
571
原创 验证输入是否为正确的组织机构代码
主要使用正则表达式 if (value === "") { callback(new Error("请输入组织机构代码")); } else if (value.length != 9) { callback(new Error("组织机构代码位数不正确")); } else { // var patrn = /^[0-9A-Z]+$/; var reg = /^[0-9A-Z]+$/; if (re
2020-06-08 09:53:51
1330
原创 判断一个数是否为质数（素数）
思路将数字分为两类，小于等于3 和 大于3若小于等于3 则这个数只要大于1 就是质数 否则不是（因为2和3是质数 1不是）若大于3 则只要这个数可以被任意大于1 小于本身的整数整除 就不是质数按照思路写代码function isPrime(m){ if(m<=3){ return m>1; } for(let i=2;i<m;i++){ if(m%i===0){ return false; } }
2020-05-29 14:30:01
247
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人