RoddyLD-CSDN博客

原创实现ElementUI的Dialog弹窗可以拖拽移动

实现ElementUI的Dialog弹窗可以拖拽移动ElementUI的Dialog 对话框默认的位置是在屏幕居中靠上方并且不允许拖拽移动的（如下图所示）我么可以使用vue的自定义指令，绑定到需要拖拽移动的el-dialog组件上，在自定义指令中处理弹框拖拽。（最终实现结果如下图所示）实现步骤1.创建自定义指令/directive/el-dragDialog/index.jsimport drag from './drag'const install = function(Vue) {

2021-10-21 14:18:05 19911 22

原创 !+Cookies.get(‘sidebarStatus’) 详解

项目部分代码（app.js）import Cookies from 'js-cookie'const app = { state: { sidebar: { opened: !+Cookies.get('sidebarStatus'), withoutAnimation: false }, themeStatus: Cookies.get('themeStatus') === undefined ? 1 : Cookies.get('themeSta

2021-10-15 15:09:53 3251

原创 @font-face用法超详细讲解

@font-face用法超详细讲解1.font-face是什么font-face是css3中允许使用自定义字体的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。2.font-face的基本用法 @font-face { font-family: <YourDefineFontName>; src: <url> [<format>],[<source> [<format>]], *; [font

2021-10-14 14:24:51 37977

原创 process.env.VUE_APP_BASE_API 获取不到

process.env.VUE_APP_BASE_API 获取不到import axios from 'axios'// 创建axios实例const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api的base_url timeout: 50000, // 请求超时时间,})axios.defaults.headers = { contentType: 'application/json',

2021-10-11 16:45:33 7549

原创 Vue模仿todo超详细讲解（附源码）

Vue模仿todo超详细讲解（附源码）前言一、todo基本DOM结构二、todo功能需求分析1.新增任务2.点击变成完成状态前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。一、todo基本DOM结构代码如下：<!DOCTYPE html><html><head> <meta http-equiv="content-type

2021-06-12 17:13:50 750

原创 js事件委托（代理）

js事件委托（代理）一、什么叫事假委托二、事件委托的原理三、事件委托举例四、事件委托优缺点一、什么叫事假委托事件委托，就是某个事件本来该自己干的，但是自己不干，交给别人来干。就叫事件委托。打个比方：一个button对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击事件，让自己的父节点来监控自己的点击事件。二、事件委托的原理利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行三、事件委托举例<ul id="ul1"> <li>1</li

2021-05-30 23:22:49 252

原创 JS事件的三个阶段详解

JS事件的三个阶段详解一、JS事件的三个阶段二、冒泡阶段触发事件三、捕获阶段触发事件四、阻止冒泡行为五、阻止事件冒泡和默认行为一、JS事件的三个阶段事件处理机制的三个阶段：1.捕获 2.目标 3.冒泡element.addEventListener(event, function, useCapture)useCapture:事件处理机制（捕获阶段true，目标阶段，冒泡阶段false）默认为冒泡阶段捕获阶段：事件从外向内执行; 冒泡阶段：事件从内向外执行当点击目标元素的时候就是这三步，唯一

2021-05-30 22:14:30 2386

原创 JS中null和undefined的区别

JS中null和undefined的区别一、undefined的理解二、null的理解三、null与undefined的区别一、undefined的理解undefined的产生为初始化的时候，如果没有进行赋值，它是一个预定义的全局变量，在你没有进行对某个变量进行赋值的时候，他会被赋为undefined。二、null的理解null是人为进行赋值的。比如某个函数或者数组等等复杂类型，你如果想要进行一个舍弃，可以把它赋值为null。此时浏览器会进行一个回收。其中typeof(null)会是一个objec

2021-05-23 22:40:19 318

原创一道经典的js面试题Foo.getName()

一道经典的js面试题Foo.getName();getName();Foo().getName();getName();new Foo().getName();new Foo().__proto __.getName();new Foo.getName();new new Foo().getName()题目如下：<script> // 代码块1：一个构造函数，里面有个全部变量getName 指向一个匿名函数 function Foo(){ //getName并没有使用关

2021-05-23 21:11:20 521

原创 ES6 Promise剖析

ES6 Promise剖析一、Promise是什么二、Promise的特点三、Promise的优缺点四、Promise的创建五、then和catch六、async 和 await一、Promise是什么Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。二、Promise的特点1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：pending: 初始状态，不是成功或失

2021-05-16 23:08:24 217

原创 js中class类与原生构造函数相比的优缺点

js中class类与原生构造函数相比的优缺点一、原生构造函数1.1 构造函数的概率1.2原生的构造函数的缺点二、class类2.1.class类的概念2.2.class类的特点2.3使用class类实现继承一、原生构造函数1.1 构造函数的概率构造函数是一个普通的函数，与其他函数没有任何区别，它也可以进行调用，它只是概念上的一个定义，使用它用来实例化对象。1.2原生的构造函数的缺点构造函数和原型结构分离（不便于维护）构造函数原型里面的属性可以被遍历原型里面的方法也可以作为构造函数构造函数

2021-05-10 20:42:42 1672 1

原创关于函数中的this指向问题

关于函数中的this指向问题前言一、普通函数中this指向二、对象里面的this指向三、函数表达式中的this指向四、立即执行函数的this指向五、定时器计时器中this的指向六、箭头函数里面的this指向七、构造函数里面的this指向7.1当作普通函数进行调用7.2 作为构造函数使用的时候7.3当this关键字遇上return八、总结前言函数在执行时，会在函数体内部自动生成一个this指针。谁直接调用产生这个this指针的函数，this就指向谁。提示：以下是本篇文章正文内容，下面案例可供参考

2021-05-05 21:19:09 3696 2

原创数组和对象的解构赋值

数组的解构赋值一、什么是解构赋值？二、数组的解构赋值2.1正常解构2.2解构不成功2.3不完全解构2.4等号左右模式不匹配三、对象的解构赋值一、什么是解构赋值？ES6允许使用按照一定的模式，从数组或者对象中进行取值，对变量进行赋值，这个过程叫做解构赋值。二、数组的解构赋值通常我们给变量赋值都是声明一个变量，然后赋值。ES6提供了一种解构赋值，下面是具体的实例：2.1正常解构实例1：<script> //这是通常情况下给变量赋值 // var a = 1;

2021-05-05 18:36:58 867

原创 var let 和const声明变量的特点

var let 和const声明变量的特点一、var声明变量的特点二、let声明变量的特点三、const声明变量的特点四、三种变量声明的举例应用一、var声明变量的特点var声明变量为全局声明，当声明在函数内部时为局部变量var声明变量存在变量声明提升var可以重复定义一个变量，即后面的覆盖前面的二、let声明变量的特点使用let声明的变量只在let所在的代码块起作用 (变量绑定)在同一代码块内(块级作用域) 使用let声明的变量可以重新赋值但是不能重新声明let声明的变

2021-04-25 20:31:28 454

原创 Ajax入门篇

Ajax入门篇一、Ajax是什么？二、Ajax的优缺点1.Ajax的优点2.Ajax的缺点三、Ajax适用场景和不适应场景3.1Ajax适用场景3.2Ajax不适用场景四、Ajax五大步骤4.1使用ajax的基本步骤 :4.2Ajax五大步骤代码实现五、XMLHttpRequest对象5.1XMLHttpRequest的方法5.2XMLHttpRequest的属性一、Ajax是什么？Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML直白地说，

2021-04-24 21:52:07 102

原创 jQuery实现美女画廊

代码运行后结果如下：整体实现代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.6.1.min.js"></script> <style> body { font-

2021-04-11 23:17:56 309

原创 canvas实习飞机大战小游戏

canvas实习飞机大战小游戏具体实现代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>飞机大战</title> <style>

2021-04-05 22:15:46 246 2

原创原生JS实现视频播放控件

代码实现结果如下：全部代码如下：HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link re

2021-04-05 21:47:29 893

原创 JS实现图片轮播（方法二）

方法二具有图片滑动效果，具体实现代码如下所示：HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播</title> <link rel=

2021-04-04 22:00:05 160

原创 JS实现图片轮播（方法一）

效果如下：下面是具体的实现代码：HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播</title> <link rel="styl

2021-04-04 21:50:48 1603 2

原创 js实现省市区（县）三级联动

js实现省市区（县）三级联动实现效果如下：js文件过大，一万多行就不上传了，如有需要请评论，下面是js文件data的基本数据图实现代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

2021-03-20 11:49:01 2062 4

原创 js实现年月日联动功能

js实现年月日联动功能实现年月日联动最核心的就是要判断每个月份的天数，月份的天数可能是28或29或30或31天。然后通过appendChild()方法和getElementByID()方法实现年月日的联动功能。具体实现代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi

2021-03-20 11:06:42 1297

原创 js中克隆详解

js中克隆详解再讨论js克隆之前，我们先来回忆一下js的数据类型。基本数据类型：数值型、字符串型、布尔型、null、undefined。引用数据类型：函数、数组、对象（因为万物皆对象，所有也可以说引用数据类型只有object）1.克隆对象是基本数据类型我们可以直接赋值给需要的变量即可 <script> var a=10; var b=a; console.log(a); //10 console.log(b); //10 b=520; c

2021-03-14 23:16:51 3751 1

原创 js获取身份证信息

js获取身份证信息（输入前十七位计算第十八位）身份证号码是由18位数字组成的，他们分别表示：前1、2位数字表示：所在省份的代码；前3、4位数字表示：所在城市的代码；前5、6位数字表示：所在区县的代码；第7~14位数字表示：出生年、月、日;第15、16位数字表示：所在地的派出所的代码;第17位数字表示性别：奇数表示男性，偶数表示女性；第18位数字是校验码：校验码可以是数字0-9,10用X表示。<!DOCTYPE html><html lang="en">&lt

2021-03-14 20:40:42 1355

原创 JS原型和原型链

JS原型和原型链一、prototype和__proto__的概念1.显示原型(prototype )2.隐式原型(__proto __)3.例题二、原型链图1.构造函数2._proto_与prototype3.person → Person → Object4.完整原型链一、prototype和__proto__的概念1.显示原型(prototype )所有的函数都有一个属性，prototype 称之为函数原型默认情况下，prototype是一个普通的对象默认情况下,prototype中有一

2021-03-06 23:01:10 159 1

原创 JS中作用域和预编译以及作用域链的剖析

JS中作用域和预编译以及作用域链的剖析一、作用域1.全局作用域2.函数作用域（局部作用域）二、预编译1.全局预编译2.函数预编译3.代码举例三、作用域链一、作用域1. 全局作用域写脚本块中的代码全局作用于中声明的变量，会被提前到代码块的顶部进行定义，成为全局对象的属性2. 函数作用域函数内部定义的变量，会被提升到函数代码块中的顶部，并且不会成为全局对象的属性1.全局作用域代码如下（示例）：console.log(a);//undefined 声明一个空间并赋默认值 undefined

2021-03-06 17:29:59 160

原创 JavaScript循环练习题

JavaScript循环练习题①输出1-10与5相乘的结果<script> function ld(){ for (var i=1;i<=10;i++){ console.log(5*i); } } ld()</script> ②用程序计算1-100的和，并输出 <script> function lxy(){ var i=0;

2021-01-25 19:39:44 902

原创 JavaScript求最大公约数和最小公倍数

JavaScript求最大公约数和最小公倍数话不多说，直接上图，下图是求两个数的最大公约数其中的方法之一。求两个数的最小公倍数就更简单了，在知道最大公约数的前提下，两个的数的乘积除以最大公约数就是最小公倍数了完整的代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device

2021-01-21 20:05:40 2866

原创 JavaScript中运算符的应用

运算符的应用前言一、算术运算符二、字符串运算符三、比较运算符四、赋值运算符五、逻辑运算符六、条件运算符七、typeof运算符八、位运算九、运算符优先级前言什么是运算符？它是完成一系列操作的符号。运算符用于将一个或几个值进行计算而产生一个新的值，操作数可以是常量或变量。 JavaScript的运算符按照操作数的个数可以分为单目运算符、双目运算符、三目运算符；按功能可以分为算术运算符、比较运算符、赋值运算符、字符串运算符、逻辑运算符、条件运算符等。一、算术运算符算术运算符用于程序中的加、减

2021-01-18 20:24:03 272

原创 JavaScript新手小白入门篇（一）

文章目录JavaScript新手小白入门篇（一）一:JavaScript怎么去使用?二:JavaScript代码应该放在什么地方?三:JavaScript是什么样的语言?四:变量五:JavaScript中的数据类型六:数据类型的检测七:JavaScript中的输入输出八：表达式中的类型转换JavaScript新手小白入门篇（一）一:JavaScript怎么去使用?行内JavaScript,标签上去添加JavaScript属性内部JavaScript,代码放置在script标签中外部JavaScr

2021-01-11 20:57:43 249

原创纯CSS3制作3D旋转照片

纯CSS3制作3D旋转照片一、搭建项目的基本结构Visual Studio Code编写body代码快捷键：div.father>div.son$*8<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

2020-12-30 20:44:40 558 1

原创纯CSS3制作炫酷的3D相册

纯CSS3制作炫酷的3D相册整体效果如下所示：整体代码如下所示：html中的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D炫酷相册</title>

2020-12-28 20:36:33 989

原创纯CSS3制作旋转的魔方

纯CSS3制作旋转的魔方一、搭建魔方的框架代码如下图所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl

2020-12-26 14:55:28 192 5

原创 CSS基础篇（二）

CSS基础篇（二）一、CSS中的选择器复杂选择器计算权重七、使用步骤1.引入库一、CSS中的选择器css中的选择器大致分为两大类，一种是基础选择器（标签选择器、类选择器、ID选择器、通配符选择器），另一种是复杂选择器（群组选择器、后代选择器、子代选择器、属性选择器、伪类选择器）复杂选择器群组选择器使用“,”进行分隔后代选择器使用“空格”进行分隔子代选择器使用“>”进行分隔属性选择器使用[属性名="属性值"] 属性值可以省略不写伪类选择器

2020-12-19 17:28:58 115 1

原创 CSS基础篇（一）

CSS基础篇（一）一、什么是 CSS?二、样式表的分类?行内样式内部样式外部样式三种样式优先级颜色表示法背景样式字体样式CSS中的基础选择器标签选择器id选择器类选择器通配符选择器优先级选择器的命名规范一、什么是 CSS?CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到 HTML4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS文件中二、样式表的分类?

2020-12-19 11:46:39 154 2

原创三天学完HTML基础（三）

三天学完HTML基础（三）表单标签表单的作用表单的组成表单的属性表单的控件关联标签（label）文本域（textarea）下拉菜单（select）按钮标签（button）浮动框架(iframe)跑马灯标签(marquee)无语义标签表单标签表单的作用用于显示、收集用户信息，并且提交给服务器表单的组成1.表单元素 -------将信息提交给服务器2.表单控件 --------负责接收用户的数据表单提交：点了提交按钮就会跳转到新的页面form 代表的就是一个表单元素表单的属性a

2020-12-12 16:41:40 143

原创三天学完HTML基础（二）

三天学完HTML基础（二）字体标签列表标签以及表格标签的使用*font标签**列表标签**表格标签*字体标签列表标签以及表格标签的使用font标签标签定义及使用说明HTML5 不支持 font 标签。请用 CSS 代替。在 HTML4.01 中，font元素已废弃。font标签规定文本的字体、字体尺寸、字体颜色。属性：size ： 1-7 从小到大, 一旦超过了7会出现和7一样大的效果,一般浏览器默认值是 3。color ：字体的颜色face：字体的样式字体标签实例：&l

2020-12-12 15:26:30 125

原创三天学完HTML基础（一）

三天学完HTML基础（一）欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用

2020-12-08 13:24:21 122

空空如也

空空如也