经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
前端设计:HTMLXHTMLHTML5CSSJavaScriptCSS3HTML DOMjQueryJSONAJAXLESSBootstrapFoundationAngularJSTypeScriptAngularJS2ReactjQuery UIjQuery EasyUINode.jsHighchartsVue.jsCoffeeScriptEmber.jsExt.jsMeteorSASSOmiMarkdown前端开发规范浏览器webpackEcharts
 前端设计
小程序实现悬浮按钮的全过程记录_CSS教程_CSS

小程序实现悬浮按钮的全过程记录_CSS教程_CSS

前言 在日常小程序开发中,我们可能会有这样的需求,将按钮悬浮,不随着页面的滑动而改变位置,例如文章详情页的分享按钮,我想做成悬浮的样子,或者首页设置一个悬浮按钮来实现一些可扩展的功能,既美观又方便实用 实现悬浮按钮我将从两方面进行讲解,一个是实现图片按钮,另一个是将按钮进行悬浮。 图片按钮...[2021/10/11]

JS中的六种继承方式以及优缺点总结

JS中的六种继承方式以及优缺点总结

目录前言原型链继承 构造函数继承 组合继承(原型链继承和构造函数继承组合) 寄生式继承 组合寄生式继承 extends继承 总结 前言 继承是JS世界中必不可少的一个环节,号称JS的三座大山之一,使用这种方式我们可以更好地复用以前的开发代码,缩短开发的周期、提升开发效率 在ES6之前,JS中...[2021/10/11]

JS 中 new 的作用详细

目录1、举例2、制造一百个士兵3、质疑4、改进5、优雅?6、JS 之父的关怀7、这一次我们用 new 来写8、注意 constructor 属性 简介: 大部分讲 new 的文章会从面向对象的思路讲起,但是我始终认为,在解释一个事物的时候,不应该引入另一个更复杂的事物。 想象我们在制作一...[2021/10/11]

JS 里为什么会有 this

目录1、需求2、方案3、第一次改进4、加糖5、费解6、存在问题7、对象与函数 1、需求 假设我们有一个对象 var person = { name: ''Frank'', age: 18, phone: ''13812345678'', say...[2021/10/11]

Javascript Echarts空气质量地图效果详解

我们要先把空气质量数据和地图数据结合起来: 地图数据有name这个属性 我们的不同城市空气质量也有name这个属性,这两个属性是一样的,都叫name,所以我们可以把他们关联起来: var airData = [ { name: ''北京'', val...[2021/10/11]

vue实现websocket客服聊天功能

本文章主要介绍如何实现一个基本的聊天,后续会添加表情包,传照片等功能 其实刚开始接触的时候,我最大的疑惑是聊天功能的前期是否需要搭建什么框架、下载一些什么东西之类的,结果就是,其实websocket可以直接使用,然后前后端搭配,也是免费的,暂时没发现需要收费功能的东西。 实现效果图: ...[2021/10/8]

vue实现动态路由详细

目录一、前端控制1、在router.js文件(把静态路由和动态路由分别写在router.js) 2、store/permi ion.js(在vuex维护一个state,通过配角色来控制菜单显不显示) 3、src/permi ion.js4、侧边栏的可以从vuex里面取数据来进行渲染二、后端控制路由1...[2021/10/8]

React Native项目中使用Lottie动画的方法

Lottie是Airbnb开源的一个面向iOS、Android、React Native的动画库,能加载Adobe After Effects导出的动画,并且能让原生App像使用静态素材一样使用这些动画,完美实现炫酷的动画效果。 使用流程上,Lottie动画需要先使用Adobe After Ef...[2021/10/8]

Python机器学习之使用Pyecharts制作可视化大屏

目录前言Pyecharts可视化Map世界地图柱状图、饼图Pyecharts组合图表总结 前言 ECharts是由百度开源的基于JS的商业级数据图表库,有很多现成的图表类型和实例,而Pyecharts则是为了方便我们使用Python实现ECharts的绘图。使用Pyecharts制作可视化大屏,...[2021/10/8]

Vue中Vue.use()的原理及基本使用

目录前言1. 举例理解 2. 分析源码 3. 小结 总结 前言 相信很多人在用 Vue 使用别人的组件时,会用到 Vue.use() 。例如:Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时,就不需要用 Vue.use(axios),就能直接使用。那这是...[2021/10/8]

Vue前端如何实现生成PDF并下载功能详解

Vue前端如何实现生成PDF并下载功能详解

目录1. 安装及引入 2. 封装导出 pdf 文件方法 配置详解封装导出 pdf 文件方法(util htmlToPdf.js)相关组件中应用效果待优化部分总结 思路: 通过 html2canvas 将 HTML 页面转换成图片,然后再通过 jspdf 将图片的 base64 生成为 pdf 文件。...[2021/10/8]

Vue中设置登录验证拦截功能的思路详解

目录一、解决思路二、让浏览器存储服务器返回的token三、在请求中设置访问权限四、封装登录验证 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现...[2021/10/8]

深入理解Vue的插件机制与install详细

深入理解Vue的插件机制与install详细

前言: 我们在使用Vue的时候,经常会使用并写一些自定义的插件,然后利用Vue.use引入。所以提到写插件,install这个方法是必不可少的。Vue.js 的插件应该暴露一个 `install` 方法。这个方法的第一个参数是 `Vue` 构造器,第二个参数是一个可选的选项对象。这是Vue官方...[2021/9/28]

vue3封装计时器组件的方法

背景 在一些商城类网页中打开商品详情都会有一个计数器来选择购买的数量,这样的计时器不仅会在商品详情页面显示还会在购物车里面有,那就可以把计时器封装成组件,以便于更好的复用以及后期维护 落地代码 <template> <div cla ="xtx-numbox...[2021/9/28]

vue3封装侧导航文字骨架效果组件

vue3 项目封装侧导航文字骨架效果组件-全局封装,供大家参考,具体内容如下 目的 当显示页面的时候,有些数据是需要从后台加载,网络不好的时候可能需要等待,那就可以做一个骨架层闪动动画,增加用户体验 大致步骤 - 需要一个组件,做占位使用。这个占位组件有个专业术语:骨架屏组件。 &n...[2021/9/28]

Vue项目中封装组件的简单步骤记录

目录前言 如何封装一个Toast组件 使用案例 具体实现 总结 前言 随着业务的发展 功能性开发 已经无法满足我们对于前端的需求,这一篇主要带大家体验一下如何开发一套属于自己的组件库 使用场景:公司内部组件库的开发,个人组件库的开发,与项目解耦,多项目中使用同一组件,只需维护一套组件库 ...[2021/9/28]

Vue2.x 的双向绑定原理及实现

Vue2.x 的双向绑定原理及实现

目录1、实现过程2、显示一个 Observer3、实现 Watcher4、实现 Compile5、添加解析事件6、完整版 myVue Vue 是利用的 Object.defineProperty() 方法进行的数据劫持,利用 set、get 来检测数据的读写。 https: jsrun.net/...[2021/9/27]

vue模版编译详情

目录1、parse 解析器1.1 截取的规则1.2  截取过程部分1.3  解析器总结2、optimize 优化器2.1 静态节点2.2 静态根节点2.3 优化器总结3、generate 代码生成器3.1 JS的with语法 思考: html是标签语言,只有JS才能实现判...[2021/9/27]

vue.js使用Element-ui中实现导航菜单

本文实例为大家分享了vue.js使用Element-ui中实现导航菜单的具体代码,供大家参考,具体内容如下 写这个的原因是因为当时写这个功能时候element只有效果,但是功能没有实现,当时一头雾水 先放图吧 大体实现思路我先讲一下不然下面代码片段会看懵, 圈出来的左右两部分,...[2021/9/27]

Vue使用element-ui实现菜单导航

本文实例为大家分享了Vue使用element-ui实现菜单导航的具体代码,供大家参考,具体内容如下 效果图 目录截图 安装vue-router 和 element-ui vue-route是官方路由导航,element-ui是饿了么封装的基于vue的组件库 ...[2021/9/27]

vue使用ECharts实现折线图和饼图

vue使用ECharts实现折线图和饼图

在开发后台管理项目时,需要统计后台用户数据,以折线图和饼图的形式显示,这边采用apache-echarts来实现需求。 1.安装echarts和引入 npm install echarts --save import * as echarts from ''echarts''...[2021/9/27]

Canvas绘制像素风图片的示例代码_html5

前言 童年玩红白机。尤其国内的小霸王那段时光还记得么。 那个马里奥大叔还记得么。 因为特别喜欢像素风的游戏从小到大一直都是,像素风本身就是由极度简单的元素构成极度复杂的画面,因此它可以具备无限的创作空间,形成令人过目不忘的独特画风。所以我想借用一张清晰的图片生成出具有像素点阵的图片来...[2021/9/27]

CSS布局之浮动(float)和定位(position)属性的区别_CSS布局实例_CSS

CSS 布局 - position 属性 position 属性规定应用于元素的定位方法的类型(static、relative、fixed、absolute 或 sticky)。 position 属性 position 属性规定应用于元素的定位方法的类型。 有五个不同的位置值: ...[2021/9/27]

CSS动画如何中途停止并维持姿态_CSS教程_CSS

前言 我曾经遇到过一个难题. 我需要让一个摆动的房子从塔吊上落下,但点击落下途中,房子需要维持落下瞬间摆动的角度. 当时把我难坏了,刚开始我希望能获取到房子当前摆动的角度,并且在下落的瞬间赋值给房子的transform:rotate(),但这是实在是太麻烦了,不会是最优解. 但其实只要一个属...[2021/9/27]

使用canvas对video视频某一刻截图功能_html5

前言 本次使用的是canvas.drawImage()实现截图功能, 关于api支持的dom元素、基本参数,可点击查询下面连接 CanvasRenderingContext2D.drawImage() 处理过程 我本次的需求是多人视频中对某一视频某一刻的截图,展示视频直接用的原生video...[2021/9/22]

Canvas如何做个雪花屏版404的实现_html5

Canvas如何做个雪花屏版404的实现_html5

介绍 过往,电视用天线接收信号,没信号出雪花屏,刺啦刺啦作响,然后赶紧扶正想办法让他找到信号。当时电脑还经常连上小霸王打游戏,魂斗罗,超级玛丽,坦克大战。。。时间如白驹过隙,科技进步的飞快,现在都用网络电视了再也不会出现那种情况了,但那真是段令人怀念的时光。 我们今天的主题就是做一个雪花屏版...[2021/9/22]

webpack搭建脚手架打包TypeScript代码

创建文件夹 目录结构: dabaots 初始化 npm init -y生成package.json文件 目录结构: dabaots dabaots / package.json 然后在开发环境中安装以下几个工具 npm i -D we...[2021/9/22]

node.js+express留言板功能实现示例

目录留言板所需类库开源项目项目结构 留言板 基于nodejs+expre +art-template的留言板功能。包含列表界面、添加界面和发送留言功能。 所需类库 直接copy以下package.json 然后直接 npm install 或者yarn install 即可。 pac...[2021/9/22]

html5笛卡尔心形曲线的实现_html5

1650年,斯德哥尔摩的街头,52岁的笛卡尔邂逅了18岁的瑞典公主克里斯汀。 那时,落魄、一文不名的笛卡尔过着乞讨的生活,全部的财产只有身上穿的破破烂烂的衣服和随身所带的几本数学书籍。生性清高的笛卡尔从来不开口请求路人施舍,他只是默默地低头在纸上写写画画,潜心于他的数学世界。 一个宁静的午...[2021/9/14]

使用CSS实现一个搜索引擎的原理解析_CSS教程_CSS

大家好,我卡颂。 在CSS中,我们通过selector(选择器)选择样式片段: .title { color: red; } 简而言之,选择器title对应样式color: red; 换个角度,我们也可以说:关键词.title对应数据color: red; ...[2021/9/14]

node自定义安装更改npm全局模块默认安装路径的步骤

笔者将node安装到了D盘,同时也需要改变npm全局包默认安装的路径,因为不想占C盘空间 第一步当然是去node官网下载对应的版本,同时安装到D盘,先要在D盘新建一个nodejs文件夹 安装不会自己建文件夹 下载地址 选择自己的安装包,然后安装的时候选择D:\nodeJs 就...[2021/9/14]

Vue.js之$emit用法案例详解

Vue.js之$emit用法案例详解

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) 触发当前实例上的事件 vm.$on( event, fn ); 监听event事件后运行 fn;  例如:子组件:...[2021/9/14]

Vue3导航栏组件封装实现方法

在Vue3中封装一个导航栏组件,并且实现,随着滚动条滚动实现一个吸顶效果,供大家参考 导航栏组件的效果图: 滚动条滚动以后的吸顶效果示意图: 具体代码展示: <template> <header cla ="app-header">...[2021/9/14]

用Vue封装导航栏组件

用Vue封装导航栏组件

前言:把一个功能模块使用组件化的思想充分封装,如导航栏,这无论对我们的开发思想还是效率都有许多好处,在开发中,我们要尽量多得运用组件化的开发思想,不要把所有代码都写在同一个.vue文件中,这样能大大提高代码的可读性。 封装导航栏 主要思路:把红色的部分当成一个个组件,而他们只是图片和...[2021/9/14]

解决Shiro 处理ajax请求拦截登录超时的问题

目录Shiro 处理ajax请求拦截登录超时配置全局ajax配置Shiro se ion超时页面跳转的处理问题描述ajax请求超时处理后端Filter代码前端通用ajax处理非ajax请求超时跳转 Shiro 处理ajax请求拦截登录超时 配置全局ajax配置 $.ajaxSetup...[2021/9/6]

JS实现随机生成验证码

本文实例为大家分享了JS实现随机生成验证码的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&...[2021/9/6]

vue3单文件组件中style特性的深入讲解

目录style scoped style module 状态驱动的动态c 总结 style scoped 需要注意的有: 样式不会影响到其他组件,只会在当前组件生效。 子组件的根元素会同时 受父组件的作用域样式,和子组件的作用域样式影响. 这样做的目的是让父组件可以...[2021/9/6]

关于HTML编码导致的乱码问题_HTML/Xhtml

今天一个学弟问了一个问题,它写的HTML代码打开显示的是乱码。 然后就给我发来了代码。 就一个HTML文件和一个文件夹,打开一看,很简单的代码。 <!DOCTYPE html> <html lang=""> <head...[2021/9/6]

vue实现内容可滚动的弹窗效果

本文实例为大家分享了vue实现内容可滚动的弹窗效果具体代码,供大家参考,具体内容如下 这是第一种实现方式 效果图: 弹窗代码: Popup.vue <template lang="html"> <div v-if="show" cla ...[2021/9/6]

NodeJS实现图片文本分割

本文实例为大家分享了NodeJS实现图片文本分割的具体代码,供大家参考,具体内容如下 var fs = require(''fs''); var jpeg = require(''jpeg-js'') function getSumRGB(data, i) { ...[2021/9/6]

vue echarts实现柱状图动态展示

vue echarts实现柱状图动态展示

本文实例为大家分享了vue echarts实现柱状图动态展示的具体代码,供大家参考,具体内容如下 轮播图形式展现 <template> <div cla ="dan"> <div id="scalesize" :style="{w...[2021/9/6]

js Promise并发控制数量的方法

目录问题 背景 思路 & 实现 问题 要求写一个方法控制 Promise 并发数量,如下: promiseConcurrencyLimit(limit, array, iteratorFn) limit 是同一时间执行的 promise 数量,array 是...[2021/8/26]

你可能不知道的typescript实用小技巧

你可能不知道的typescript实用小技巧

目录前言函数重载 映射类型 Partial, Readonly, Nullable, Required Pick, RecordExclude, Omit ReturnType 类型断言 枚举 元组 范型 infer 总结 前言 用了很久的 typescript,用了但感觉又没完全用。因为很多...[2021/8/26]

Echarts Bar横向柱状图实例代码

Echarts Bar横向柱状图实例代码

目录横向柱状图 动态更新数据和样式 解决 echarts 宽高自适应问题 纵向柱状图 纵向柱状图实现 坐标指示器背景渐变色 柱体设置不同颜色 柱状图上方显示数值 tooltip 提示框自定义 总体实现总结 接上一篇# Echart Bar柱状图样式详解续写,可以先看看上一篇,不看的话,影响也不是特别...[2021/8/26]

如何使用 resize 实现图片切换预览功能_CSS教程_CSS

关键点 CSS resize 属性允许你控制一个元素的可调整大小性 配合 resize 实现子元素的动态宽度 HTML:   <div cla =''picA''> <div cla =''picB''> ...[2021/8/26]

CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)_CSS教程_CSS

CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)_CSS教程_CSS

本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能。类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法。 将两张图片叠加在一起 改变上层图片的宽度,或者使用 mask, 改变 mask ...[2021/8/26]

CSS3 Tab动画实例之背景切换动态效果_css3_CSS

CSS 3 动画实例-Tab 背景切换的动态效果,具体代码如下所示: <style type="text/c "> .slide-tabs { display:flex; position:relative; border:1px solid #3d3...[2021/8/26]

HTML5 语义化标签(移动端必备)_html5

距HTML5标准规范制定完成并公开发布已经有好些年了,面试时也少不了要问对HTML5语义化得理解。但是在实际运用时,真正使用HTML5标签来开发的似乎不是很多(ps:查看了几个巨头公司网站推论),可能一部分原因是仍有部分用户使用在使用低版本浏览器。 但是就我个人而言,因选取一些标签时会比较纠结...[2021/8/26]

CSS+HTML 实现顶部导航栏功能_CSS教程_CSS

CSS+HTML 实现顶部导航栏功能_CSS教程_CSS

导航栏的实现、固定顶部导航栏、二级菜单实现 效果图: 2018/11/16更新: 最近在使用这个导航栏的时候,发现页面在放大和缩小的情况下,导航栏的布局和显示都有些小问题,所以重新改了一下c 部分的代码,重新贴上来 新的代码实现(优化布局): <html>...[2021/8/26]

深入理解CSS 中 transform matrix矩阵变换问题_CSS教程_CSS

目录一、概述二、矩阵1、矩阵的定义2、矩阵的基本运算3、向量4、矩阵与向量三、矩阵变换1、矩阵缩放2、矩阵的旋转四、c 中的矩阵变换1、scale2、rotate3、skew4、translate5、matrix3d6、2D变换的矩阵形式 一、概述 c 中transform属性中的transla...[2021/8/26]

57
2
记录数:11948 页数:1/23912345678910下一页尾页
加载更多
 友情链接: NPS