JavaScript
文章平均质量分 73
五花漏
so vegetable
展开
-
初识Blob对象
<!DOCTYPE html><html lang="en"><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>生成原创 2021-12-24 15:34:17 · 410 阅读 · 0 评论 -
JavaScript实现图片下载
<!DOCTYPE html><html lang="en"><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>图片原创 2021-12-24 15:13:11 · 2712 阅读 · 1 评论 -
JavaScript实现图片上传到页面
<!DOCTYPE html><html lang="en"><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"> <script src=原创 2021-12-23 14:14:03 · 1768 阅读 · 0 评论 -
JavaScript实现图片延时加载/图片懒加载/图片滚动加载
<!DOCTYPE html><html lang="en"><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>图片原创 2021-12-22 17:16:22 · 311 阅读 · 0 评论 -
线上图片素材
原创 2021-12-22 14:30:00 · 211 阅读 · 0 评论 -
JS +JQuery实现时间轴卡尺
<!DOCTYPE html><html lang="en"><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>时间原创 2021-12-21 15:48:07 · 773 阅读 · 0 评论 -
JS+JQuery实现switch组件
<!DOCTYPE html><html lang="en"><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>sw原创 2021-12-21 14:48:57 · 917 阅读 · 0 评论 -
大屏动效之数字动态增加
使用插件: CountUp.js<!DOCTYPE html><html lang="en"><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">原创 2021-09-22 17:29:32 · 596 阅读 · 0 评论 -
大屏动效之文字滚动
1、文字竖直方向-向上滚动<!DOCTYPE html><html lang="en"><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"> &原创 2021-09-22 16:30:24 · 1192 阅读 · 0 评论 -
[更新中]一些常用的JS手写功能
1、对象深拷贝function deepClone(obj) { const _toString = Object.prototype.toString // null, undefined, non-object, function if (!obj || typeof obj !== 'object') { return obj } // DOM Node if (obj.nodeType && 'cloneNode' in obj) { r原创 2021-01-14 10:54:38 · 225 阅读 · 0 评论 -
Array.sort(function(a,b){return a-b})对数组进行排序
我就一直不明白,为啥 return a-b 是升序, return b-a 就是降序?看了好几个讲原理的太复杂了也没看明白,但是!我掌握了一种特殊的技巧去记忆!a-b别读a减b,读a至b,在字母表中,a至b是递增的,所以 return a-b 是升序。反之,return b-a 就是降序。...原创 2020-12-10 16:03:18 · 2158 阅读 · 6 评论 -
使用canvas绘制登录验证码
<template> <div class="code-canvas"> <canvas id="code-canvas" @click="createCode()" :width="canvasWidth" :height="canvasHeight" ></canvas> </div></template><style scoped>.code原创 2020-12-07 15:13:37 · 469 阅读 · 0 评论 -
JS一键分享功能
<div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1524625953372" style="position: absolute;left: 200px;"> <a href="#" class="bds_more" data-cmd="more"></a> <a href="#" cl原创 2020-11-17 10:02:07 · 951 阅读 · 0 评论 -
JavaScript的slice、substring、substr 快速区分
基本用法1、slicearrayObject.slice(start,end)start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。2、substringstringObject.su原创 2020-11-14 11:03:13 · 410 阅读 · 0 评论 -
[已解决]“TypeError: Cannot read property ‘xxx‘ of undefined“报错情况分析
1、如果是vue,先看看你的data写对了没,我有一次手误打成了 date ,检查了一下午才看出来o(╥﹏╥)o2、如果这个数据“xxx”是从后台异步获取的,那就最好在data中先给他个默认值比如,data() { return { obj1: '', obj2: null. obj3: {}, obj4: [] }}mounted(){ // 获取后台数据给obj们赋值等等各种异步操作}或者 当“xxx”是一个嵌套两层的原创 2020-11-09 20:01:21 · 185916 阅读 · 69 评论 -
getSelection()获取光标位置,获取输入框的焦点
获取输入框中光标的位置getPosition(element) { //获得光标 var caretOffset = 0; var doc = element.ownerDocument || element.document; var win = doc.defaultView || doc.parentWindow; var sel; if (typeof win.getSelection != "undefined") { //谷歌、火狐 sel = win.getSel原创 2020-09-17 14:36:22 · 6042 阅读 · 0 评论 -
按回车发送消息、Alt+Enter换行实现
if (event.altKey && event.keyCode == 13) { //Alt+Enter换行 let sendMeg = $("#msgbox").html() + "\n\n"; $("#msgbox").html(sendMeg) let el = document.getElementById('msgbox'); var range = document.createRange(); range.selectNodeContents(原创 2020-09-16 16:55:09 · 1292 阅读 · 0 评论 -
阻止浏览器的默认行为和阻止事件冒泡
阻止浏览器的默认行为if (event && event.preventDefault) {//如果提供了事件对象,则这是一个非IE浏览器 event.preventDefault();//阻止默认浏览器动作(W3C) } else { //IE中阻止浏览器行为 window.event.returnValue = false; return false;}阻止事件冒泡function stopPropagat(e) { if (e &&am原创 2020-09-16 16:44:42 · 298 阅读 · 0 评论 -
JS实现页面中拖动元素,并解决页面中含有iframe时卡顿问题。
需求描述页面中有一个聊天窗口(包括标题栏和内容区)。实现一个功能:点击并拖动该聊天窗口的标题栏,可以把该窗口移动到页面的任意位置。要求1、鼠标点击标题栏的位置距离浏览器窗口边缘的距离,上下不能小于50px,左右不能小于100px。2、将聊天窗口应用于复杂页面时(含有iframe等),拖动流畅不卡顿。功能实现<template> <div id="chat-mask"> <div :id="id1" class="chat-container">原创 2020-07-31 17:43:50 · 2047 阅读 · 0 评论 -
正则表达式匹配中英文姓名
匹配2-4个汉字的中文名/^[\u4E00-\u9FA5]{2,4}$/ let name1 = '张'; let name2 = '张三'; let name3 = '李四一'; let name4 = '东方不败'; let name5 = '东方不败一'; console.log(/^[\u4E00-\u9FA5]{2,4}$/.test(name1)) console.log(/^[\u4E00-\u9FA5]{2,4}$/.test(name2)) console.log(/^原创 2020-07-07 16:31:04 · 5614 阅读 · 1 评论 -
用递归解析一个嵌套多层的数组
有如下一个数组:let menuBean = [ ['images/1.png','页面1','router1','index1'], ['images/2.png','页面2',null,'index2', ['images/2.png','页面2-1','router2','index3'], ['images/2.png','页面2-2','router3','index4']], ['images/3.png','页面3',null,'inde原创 2020-07-06 09:07:54 · 1462 阅读 · 2 评论 -
[解决]Converting circular structure to JSON
今天写一个递归时遇到了一个问题,类似于要把下面的这个数据:let arr = [ { name:'a1', childs:[ {name:'b1',child:null}, {name:'c1',child:null}, ] }, { name:'a2', childs:[ {name:'b2',child:null},原创 2020-07-04 16:08:41 · 39656 阅读 · 0 评论 -
关于的var、let、const的几个题目,你能答对几个?
1、if(1){ var a = 1; console.log(a)}console.log(a) 1 12、if(1){ let a = 1; console.log(a)}console.log(a) 1 a is not defined3、for (var i = 0; i < 3; i++) { console.log(i)}console.log(i) 0 1 2 34、for (let i = 0原创 2020-06-16 13:48:10 · 1678 阅读 · 2 评论 -
在Vue中使用QRCode.js 生成二维码
安装qrcodejs2npm install qrcodejs2 --save引入import QRCode from 'qrcodejs2'DOM<div ref="qrCodeDiv"></div>方法bindQRCode() { let qrCode = new QRCode(this.$refs.qrCodeDiv, { width: 100,//二维码宽度,单位像素 height: 100,//二维码高度,单位像素原创 2020-06-08 15:20:39 · 477 阅读 · 0 评论 -
动态分割两个div,鼠标拖动改变左右两个div宽度的效果。
HMTL: <div class="father" id="app"> <div class="leftChild" id="leftChild">--leftChild--</div> <div id="line"></div> <div class="rightChild" id="rightChild">--rightChild--</div> </原创 2020-06-08 10:29:22 · 2151 阅读 · 1 评论 -
快速打开cmd命令窗口进入指定目录的几种方法
1、进入你所要操作的目录,按住shift,单击空白处,选择在此处打开命令窗口。2、进入你所要操作的目录,单击地址栏选中当前路径,键盘输入cmd,回车即可。3、还可以win键+R,回车,打开命令窗口。win键...原创 2020-05-07 15:55:51 · 3374 阅读 · 1 评论 -
JS时间格式转换
一、标准时间格式转换为时间戳<ol> <li class="time2" >{{new Date()}}</li> //下面四种方式将标准时间格式转换为时间戳 <li class="time2" >{{Date.parse(new Date())}}</li> <li class="time...原创 2020-03-13 10:40:35 · 1736 阅读 · 0 评论 -
彻底理解var和let的区别+变量提升+暂时性死区+setTimeout
JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。例1fun (){ console.log(a) var a = 123;},//输出结果:undefined以上函数实际上执行顺序如下:fun(){ var a; console.log(a) a = 123;},//输出结果:undefined例2fun(){ var a = 99...原创 2020-03-12 19:28:20 · 635 阅读 · 2 评论 -
JavaScript相关概念的理解
一JavaScript一种动态、弱类型、基于原型的客户端脚本语言。动态:在运行时*确定数据类型。变量使用之前不需要类型声明,通常变量的类型是被赋值的那个值的类型。弱类型:计算时可以不同类型之间对使用者透明地隐式转换,即使类型不正确,也能通过隐式转换来得到正确的类型。原型:新对象继承对象(作为模版),将自身的属性共享给新对象,模版对象称为原型。这样新对象实例化后不但可以享有自己创建时和...原创 2020-03-12 14:19:40 · 233 阅读 · 0 评论 -
JS中的位置属性合集
一二width() - 设置或返回元素的宽度(不包括内边距、边框或外边距)。height() - 设置或返回元素的高度(不包括内边距、边框或外边距)。innerWidth() - 返回元素的宽度(包括内边距)。innerHeight() - 返回元素的高度(包括内边距)。outerWidth() - 返回元素的宽度(包括内边距和边框)。outerHeight() ...原创 2020-03-12 10:11:03 · 628 阅读 · 0 评论