本文实例为大家分享了js实现点击切换卡片功能的具体代码,供大家参考,具体内容如下 在实际应用中,点击或者移入某一元素上,弹出下拉菜单或者页面,是网页设计的常见操作。...
网站建设
前端必会的图片懒加载(三种方式)
目录 一.何为懒加载: 二.实现懒加载: 2.1 第一种方式: 2.2 第二种方式: 2.3 第三种方式(优): 三.总结: 一.何为懒加载: 在我们访问一个图片展示比较多的网页时,加载速度慢很...
JavaScript实现年历效果
本文实例为大家分享了JavaScript实现年历效果的具体代码,供大家参考,具体内容如下 !DOCTYPE htmlhtml head meta charset="utf-8" title制作年历/title style body{text-align:center;} .box{margin:0 auto;width:880...
手摸手教你实现Vue3 Reactivity
目录 前言 开始 小小思考 代码实现 模仿 实现track 实现trigger 实现observe 实现computed 前言 Vue3的响应式基于Proxy,对比Vue2中使用的Object.definedProperty的方式,使用Proxy在新增的对象以及数组...
React-Native之截图组件react-native-view-shot的介绍与使
目录 一、现象 二、解决 三、总结: 一、现象 1、需求:把某展示页面进行截取保存到相册、并可进行以海报的形式分享出去; 2、支持iOS和安卓 二、解决 1、安装: npm i --save react-na...
echars 3D地图为区域自定义颜色的解决方法
目录 问题 延伸 解决问题 总结 问题 根据项目需求,我们要将下面省级地图中的个别市进行高亮(不同颜色)展示 延伸 首先跟大家介绍这个地图的展示方式: 采用的是Vue框架中运用...
JavaScript--在Vue中使用插槽:slot
目录 在Vue中使用插槽:slot 作用域插槽:使用template标签包裹 总结 在Vue中使用插槽:slot 1、在子组件的template里可以直接使用slot标签slot/slot,它可以显示父组件向子组件插入的内容。...
一篇文章搞懂JavaScript中的代理和代理的使用
目录 什么是代理 Proxy的基本知识 handler对象方法 Proxy可以实现的 参考资料: 总结 什么是代理 MDN上的定义:Proxy(也就是代理) 对象用于定义基本操作的自定义行为(如属性查找,赋值...
Echart Bar双柱状图样式最全详解
【转自:http://www.1234xp.com/xggf.html 欢迎转载】 目录 前言 安装及配置 1. 安装 Echarts 2. 全局引入 Echarts 3. 按需引入 Echarts 样式优化 x 轴基础样式 最大和最小刻度标签 series 数据列悬浮高亮...
vue使用rules实现表单字段验证
vue中表单字段验证的写法和方式有多种,本博客介绍三种较为常用的验证方式。 1. 写在 data 中验证 表单内容 !-- 表单 --el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px" e...
JavaScript实现限时秒杀功能
本文实例为大家分享了JavaScript实现限时秒杀功能的具体代码,供大家参考,具体内容如下 !DOCTYPE htmlhtml head meta charset="utf-8" title/title /head body div class="box" div id="d"/div !-- 剩余的天数 --...
JavaScript定时器实现限时秒杀功能
本文实例为大家分享了JavaScript实现限时秒杀功能的具体代码,供大家参考,具体内容如下 文件index.html 代码: !DOCTYPE htmlhtml head meta charset="GBK" / titleshow/title link rel="stylesheet" href="css/in...
Echarts Bar横向柱状图实例代码
目录 横向柱状图 动态更新数据和样式 解决 echarts 宽高自适应问题 纵向柱状图 纵向柱状图实现 坐标指示器背景渐变色 柱体设置不同颜色 柱状图上方显示数值 tooltip 提示框自定义 总体...
vue实现zip文件下载
本文实例为大家分享了vue实现zip文件下载的具体代码,供大家参考,具体内容如下 el-button按钮 el-button size="mini" type="success" @click="downloadHandle(fileName, fileLocation)"下载/el-button js处理说明...
Vue 详解mixins混入用法大全
目录 前言 一、什么是Mixins? 二、什么时候使用Mixins? 三、如何创建Mixins? 四、如何使用Mixins? 五、Mixins的特点 六、Mixins合并冲突 七、与vuex的区别 八、与公共组件的区别 前言 当我...
你可能不知道的typescript实用小技巧
目录 前言 函数重载 映射类型 Partial, Readonly, Nullable, Required Pick, Record Exclude, Omit ReturnType 类型断言 枚举 元组 范型 infer 总结 前言 用了很久的 typescript,用了但感觉又没完全用。因为很多...
微信小程序实现根据日期和时间排序功能
最近接手了一个小程序的项目,有这样一个需求要对列表进行日期和时间的排序,于是小试牛刀,操作了一番,终于搞出来,在这里给大家总结分享一下经验,希望对大家有一定的帮助...
JS中数据类型的正确判断方法实例
目录 前言 typeof是否能正确判断类型? instanceof是否能正确判断类型? Object.prototype.toString.call() constructor Array.isArray() 正则判断 总结 前言 Javascript是一门动态类型的语言,一个变量从声明...
JavaScript setTimeout与setTimeinterval使用案例详解
这两个方法都可以用来在固定的时间段后去执行一段javascirpt代码,不过两者各有各的应用场景。 实际上,setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字...
js Promise并发控制数量的方法
目录 问题 背景 思路 实现 问题 要求写一个方法控制 Promise 并发数量,如下: promiseConcurrencyLimit(limit, array, iteratorFn) limit 是同一时间执行的 promise 数量,array 是参数数组,iteratorFn 每个...
Vue实现天气预报功能
本文为大家分享了Vue实现天气预报功能的具体代码,供大家参考,具体内容如下 1、功能描述 在搜索框中输入城市,下方出现今天及未来四天的天气情况。搜索框下面固定了几个城市,...
Vue+Openlayer中使用select选择要素的实现代码
效果图: 实现代码: template div id="map" ref="map" style="width: 100vw; height: 100vh"/div/template scriptimport "ol/ol.css";import { Map, View } from "ol";import { OSM, Vector as VectorSource } from "ol/source";import { Vector as...
Vue实现天气预报小应用
这是本人在自学vue框架时候所模仿的一个网站,可以查询一些城市的天气情况,大家可以看看: html代码 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" / meta name="viewport" content="width=device-widt...
vue加载天气组件使用方法详解
本文实例为大家分享了vue加载天气组件的使用方法,供大家参考,具体内容如下 首先我们进入中国天气网生成一段代码 根据需要设置天气样式 复制并修改生成的这段代码到vue中 将sc...
利用JS判断数据类型的四种方法
目录 前言 1、typeof 2、instanceof 3、constructor 细节问题: 4、toString 总结 前言 Javascript 中的数据类型判断其实是一个JavaScript非常基础问题,但不论是日常实际编程过程中和还是面试时,这...
详解vue3.2新增的defineCustomElement底层原理
目录 Web Components customElements 概述 HTMLTemplateElement内容模板元素 概述 常用属性 ShadowRoot 概述 Web Components Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在...
Element 头像上传的实战
本篇文章用到 element官网 和 七牛云官网 element-ui 官网: https://element.eleme.io/#/zh-CN 七牛云官网 :https://www.qiniu.com/ 1.七牛云注册 登录 之后 然后实名认证 2.进入对象存储后 进入空间管理...
一文带你走进js数据类型与数据结构的世界
目录 1. 什么叫动态类型 2. 数据类型 2.1 原始类型(6 种原始类型,使用 typeof 运算符检查) 2.2 null 与 Object 2.3 typeof 操作符重点说明 3. 原始值 3.1 原始值基本概念 3.2 各类型说明 1. 什么叫...
Vue入门实战之天气预报
本文实例为大家分享了Vue实现天气预报的具体代码,供大家参考,具体内容如下 效果图 实现代码 !DOCTYPE htmlhtml lang="en" head meta charset="UTF-8" / meta name="viewport" content="width=device-width, initi...
vue实现表单验证功能
本篇主要讲述如何基于NUXT的validate方法实现表单的验证。 将验证方法封装后,使用的时候只需像:rules="filter_rules({required:true,type:'mobile'})"这么一行代码便可在页面中实现验证了。 首先看...
学习笔记编写vue的第一个程序
目录 1、编写一个html,第一个vue程序 注意视图模板和数据 判断循环 事件 787原则 el属性 data属性 template属性 methods属性 render属性 computed属性 watch属性 这里使用官方文档的cdn script src="h...
JavaScript中BOM和DOM详解
目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文...
Vue使用canvas实现图片压缩上传
本文实例为大家分享了Vue使用canvas实现图片压缩上传的具体代码,供大家参考,具体内容如下 场景: 如用户头像等 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义...
深入浅析同源与跨域,jsonp(函数封装),CORS原理
目录 同源政策 Ajax请求限制: Ajax 只能向自己的服务器发送请求 同源: 同源政策的目的: 不受同源策略限制: 跨域问题 跨域的原因: 解决跨域问题: 使用 JSONP 解决 解决方法: JS...
JavaScript CollectGarbage函数案例详解
首先看一个内存释放的实例: SCRIPT LANGUAGE="JavaScript"!--strTest = "1";for ( var i = 0; i 25; i ++ ){ strTest += strTest;}alert(strTest);delete strTest;CollectGarbage();//--/SCRIPT CollectGarbage,是IE的一个特有属性,用于...
微信小程序开发实现首页弹框活动引导功能
目录 1.需求 2.数据库设计 3.Java后台配置实现 4.微信小程序前端实现 总结 1.需求 后台可以配置活动时间,在活动期间,自动在小程序首页,以弹框形式显示活动图片。用户可以关闭活动...
js利用reduce方法让你的代码更加优雅
前言 在实际项目中,最常见可能是在计算、循环逻辑方面的处理,可以使用数组中reduce方法也可以解【文章出处http://www.nextecloud.cn/kt.html欢迎转载】决很多的问题,使得你的代码风格更...
js项目中双向数据绑定的简单实现方法
目录 前言 发布订阅者模式 结果 调用 总结 前言 双向数据绑定 指的是当对象的属性发生变化时能够同时改变对应的UI,反之亦然。换句话说,如果我们有一个user对象,这个对象有一个...
BootStrap栅格之间留空隙的解决方法
目录 【看个例子】: 【原效果如下】: 【原因如下】: 【解决方法】: 总结 BootStrap栅格系统可以把我们的container容器划分为若干等分,如果想要每个部分之间留出一定的空隙,我们...
详解JavaScript中Arguments对象用途
目录 前言 Arguments 的基本概念 Arguments 的作用 获取实参和形参的个数 修改实参值 改变实参的个数 检测参数合法性 函数的参数个数不确定时,用于访问调用函数的实参值 遍历或访问实...
基于Vue实现Excel解析与导出功能详解
目录 前言 基本介绍 代码实现 基本结构 上传解析 Excel的导出 基本结构 导出Excel 总结 前言 最近在整理日常开发中长涉及到的业务需求,正好想到了excel的解析与上传方面的事情,在开...
如何基于js管理大文件上传及断点续传详析
目录 前言 前端结构 后端结构(node + express) 基于FormData实现文件上传 基于BASE64实现文件上传 BASE64具体方法 前端生成文件名传给后端 上传进度管控 大文件上传 服务端代码(大文件上传+断...
node事件循环中事件执行的顺序
目录 事件循环 浏览器环境事件循环 node环境事件循环 六个阶段 (1) setTimeout 和 setImmediate (2) process.nextTick 练习例子 总结: 事件循环 在浏览器环境下我们的js有一套自己的事件循环,同样...
带你了解JavaScript的运行原理
目录 浏览器内核 JavaScript 引擎 V8 引擎 了解JavaScript 是如何运行的,以及的它的运行机制,首先,我们要了解浏览器的内核: 浏览器内核 了解过的都知道:不同的浏览器是由不同的内核...
Vue项目中使用addRoutes出现问题的解决方法
目录 前言 一、404页面 1. 出现的原因 2. 解决方案 二、刷新白屏 1. 出现原因 2. 解决方案 三、路由重复 1. 出现原因 2. 解决方案 总结 前言 addRoutes官方介绍: 函数签名: router.addRoutes(r...
JavaScript axios安装与封装案例详解
1.下载axios插件 cnpm install axios -S 2.在main.js引入axios import axios from 'axios'Vue.prototype.$http = axios 3.创建axios实例 let service = axios.create({ baseURL: baseUrl, // url = base api url + request url withCredentials: t...
JavaScript函数之call、apply以及bind方法案例详解
总结 1、相同点 都能够改变目标函数执行时内部 this 的指向 方法的第一个参数用于指定函数执行时内部的 this 值 支持向目标函数传递任意个参数 若不向方法的第一个参数传值或者传递...
JavaScript 中this指向问题案例详解
总结 全局环境 window 普通函数 window 或 undefined 构造函数 构造出来的实例 箭头函数 定义时外层作用域中的 this 对象的方法 该对象 call()、apply()、bind() 第一个参数 全局环境 无论是否在严...
JavaScript es6中var、let以及const三者区别案例详解
首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为:ECMAScript是JavaScri...
Vue之vue.$set()方法源码案例详解
在使用vue开发项目的过程中,经常会遇到这样的问题:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是...