自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 element中DateTimePicker 日期时间选择器组件日期范围如何限制为1天

目前项目中有一个需求,要求选择时间的时候日期限制为1天。如下图所示 这是怎么实现的呢? 1、引入element中的DateTimePicker组件 type是你想显示的类型 change方法会在日期改变时调用 picker-options才是我们处理时间的重点 <el-form-item :label="getLanguageUrl.InventoryTaskTime||'库存同步时间'" class="active"> <el-date-picker clas

2021-08-09 16:19:45 2749

原创 React的常用组件概念及生命周期

创建一个React元素/节点,它是一个普通的JS对象,用来描述真实元素(描述对象) import React from 'react'; let h1Ele = React.createElement( "h1", { style:{ color:'red' } } , "hello word") 添加节点在页面上,每个子节点需要一个唯一的key import ReactDOM from 'react-dom'; ReactDOM.render(h1Ele,document.

2020-12-27 10:57:48 168

转载 RESTful API 最佳实践

一、协议 API与用户的通信协议,总是使用 HTTPs协议。 二、域名 应该尽量将 API 部署在专用域名之下。 https://api.example.com 如果确定 API 很简单,不会有进一步扩展,可以考虑放在主域名下。 https://example.org/api/ 三、版本(Versioning) 应该将 API 的版本号放入 URL。 https://api.example.com/v1/ 四、路径(Endpoint) 路径又称"终点"(endpoint),表示

2020-12-06 14:49:15 203

原创 跨域JSONP的原理

浏览器有一种访问安全策略:同源策略 同源(IP相同,协议,端口都相同),有一个不同就形成跨域 jsonp 的原理总结 伪造 script 请求,并且请求类型都是GET 跨域,另一个服务器要访问我当前服务器; AJax不支持跨域; 只有img script link 可以进行跨域操作,可以使用绝对路径,并且请求类型都是GET 1、所以我们在body身上添加script标签 实例在jquery模式下添加 添加路径 let src=`http://localhost:3000/...

2020-11-28 10:49:40 133

原创 HTTP 协议及基本概念

HTTP 协议 什么是 HTTP 协议 HTTP 协议是 Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网( World Wide Web )服务器传输超文本到本地浏览器的传送协议。 HTTP 是一个基于 TCP/IP 通信协议来传递数据( HTML 文件, 图片文件, 查询结果等 )。 HTTP 是一个属于应用层的面向对象的协议,由于其简捷、快速的方式,适用于分布式超媒体信息系统。它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展。目

2020-11-22 13:29:36 221

原创 SVG基本概念及简单应用

SVG 在前面,我们已经向大家介绍了如何使用 HTML 5 中的 Canvas 元素来进行图形的绘制。 实际上,在 Canvas 诞生之前,有很长一段时间都是使用 SVG 来绘制图形的。所以在本小节中,我们将为大家简单介绍一下如何使用 SVG 来绘制图形。 SVG 简介 SVG 意为可缩放矢量图形。它是使用 XML 格式来定义的图像。通过 SVG 画出来的图形为矢量图,所以 SVG 图像在放大或者改变尺寸的情况下图形的质量不会有所损失。 SVG的历史和优势 在 2003 年 1 月 14 日,S

2020-11-15 10:52:49 786

原创 面向对象概念及简单应用

创建构造函数 和普通函数的书写方式一样(命名以大驼峰方式) let num=123; console.log(num,num.length,typeof num);//123,undefined,"number let f70=num.toString(); console.log(f70,typeof f70); 字符串可以直接使用String的方法和属性 console.log("123".length); 基本数据类型:数值不可以直接使用toString方法 原因:数组分整型和浮点型(

2020-11-08 13:46:32 484

原创 执行上下文基础及简单练习

//EC execution context //功能:代码执行之前的准备工作,确定当前环境下变量的取值。 //分类: // 1、 全局上下文: 打开一个窗口就会创建一个全局上下文( 关闭即销毁) // 2、 局部上下文: 调用函数时就会创建一个局部上下文(函数执行完, 销毁) // 3、 eval上下文(了解):会解析字符中的JS代码 // let i = 0; // eval("let name ='sxg'; console.log(i,name)"); // eval(); // fun.

2020-11-01 17:29:35 210

原创 放大镜功能实现

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 rel="stylesheet" href=

2020-10-25 11:36:55 352

原创 普遍鼠标事件

//click单击鼠标 输出 artEle.addEventListener("click", function() { console.log("click"); }); //dblclick双击鼠标 输出 artEle.addEventListener("dblclick", function() { console.log("dblclick"); }); // 鼠标移入事件 artEle.addEventListener("mouseenter", function() {.

2020-10-17 09:28:18 100

原创 事件练习正反选,二级城市联动,下拉菜单练习

正反选 【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 rel="stylesheet

2020-10-11 13:43:56 247

原创 事件随笔

事件三要素 1、事件源:绑定事件的节点 2、事件处理函数:当事件发生时,执行的代码(函数体) 3、事件类型:(单击,hover ,move等等) 书写格式: 元素节点.addEventListener(事件类型,事件处理函数,事件流) // DOM2删除事件 // 书写格式:事件源.removeaddEventListener(事件类型,事件处理函数的名字 ) // item.removeaddEventListener("click",事件处理函数 ) // item.removeadd.

2020-10-05 17:57:30 166

原创 DOM基础获取节点,简单应用,方法总结

快速获取节点的方式 *根据'标签名'进行元素的获取 *由于HTML中可以存在多个相同的标签名的元素 *因此接受的变量是可以存储多个数据的类数组 *通过下标获取具体的内容 let ulEle = document.getElementsByTagName("ul")[0]; console.log(ulEle); //通过name的属性值获取元素 let inputEle = document.getElementsByName("f70")[0]; console.lo...

2020-09-26 16:40:59 147

原创 ATM机简单对象版

创建账号 //创建账户(多账户) let users = [ { name: "F70", pwd: "123a", balance: 1000 }, { pwd: "123b", balance: 2000, name: "F71" }, { name: "F72", pwd: "123c", balance: 3000 }, ]; //判断账户是否存在 function serach(name, temp) { let i = 0; for (let i

2020-09-19 22:34:10 111

原创 JS循环语句,集合,数组

循环 使用场景 同一个代码块,需要执行多次时,考虑用循环。 书写格式 while(条件){代码块} 功能:条件为真则执行大括号里的代码块,直到条件为假结束。 注:条件是可以变化的(防止死循环) do{代码块}while{条件} 注:至少执行一次代码块,条件为真执行第二次, 直到条件为假,结束循环。 例如: for(表达式1;表达式2;表达式3){ 代码块4 } 工作流程: 第一次循环:1-2-4-3; 第二次循环:2-4-3; 第三次循环:...

2020-09-13 21:32:47 1319

原创 js.基础知识简述

创建变量 ES5 书写格式:关键字(关键词)标识符(变量名)分号 例子: var F222 ; varF222; 创建一个变量名为F222的变量 ES6 书写格式:关键字(关键词)标识符(变量名)分号 例子: letF71; letF71; 声明常量 书写格式:...

2020-09-06 11:03:58 159

原创 Flex弹性盒模型常用代码

Flex弹性盒模型 给谁添加display:flex 谁就是容器(功能使所有子元素在一行显示) 它的子元素就位项目 弹性盒子是CSS3的一种新布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间 设置主轴方向 默认值 从左到右依次摆放 flex-direction: row; ...

2020-08-30 11:54:46 585

原创 盒模型与三大定位体系

盒模型 盒模型组成部分 Content 内容 内容盒:content-box Padding 内边距 边框与内容之间的距离 content+padding填充盒:padding-box Border 边框 content+padding+border 边框盒:border-box Margin 外边距 盒子的分类 不同的元素产生的盒子类型可能不同 一个元素,产生什么样的盒子,取决于它的CSS的display值 属性:disp...

2020-08-16 22:28:50 330

原创 今天我们简单的聊聊CSS3(1)

今天我们来简单说说前端的3架马车之一的CSS。 CSS全称Cascading Style Sheets<层叠样式表> 如果说HTML是来给房子打地基的话,CSS就是初步装修。 也可以说是HTML决定了我们网页页面的结构,那CSS就是来定义HTML的样式,使页面更好看。 ...

2020-08-09 09:16:18 148

原创 今天咱们简单聊聊HTML

目前我们使用的是HTML5版本 HTML全称:Hypertext Markup Language 中文翻译为:超文本标记语言 (注这里标记,记标,标签都可以。) 作用是什么呢?用于定义网页结构,通俗来讲,把搭建网页比作盖房子,而HTML就是来帮助我们搭建房子的地基,内部结构的。 HTML代码分为HTML的注释与HTML的元素 HTML注释效果为浏览器在解析我们HTML代码时忽略,不会在用户的展示网页中展示。 作用是方便我们后台开发者,与维护者查看。 注释书写格式:< !-- 注...

2020-08-02 18:53:57 201

空空如也

空空如也

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

TA关注的人

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