经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
前端设计:HTMLXHTMLHTML5CSSJavaScriptCSS3HTML DOMjQueryJSONAJAXLESSBootstrapFoundationAngularJSTypeScriptAngularJS2ReactjQuery UIjQuery EasyUINode.jsHighchartsVue.jsCoffeeScriptEmber.jsExt.jsMeteorSASSOmiMarkdown前端开发规范浏览器webpackEcharts
 前端设计

React中Portals与错误边界处理实现

目录Portals 错误边界处理 如果没有使用错误边界会怎样? 注意点 Portals 可以说是 插槽,但 不同于 Vue 中的 slot,它指的是将一个 React 元素渲染到指定的容器 (真实 DOM) 中 比如说,Modal 组件一般默认直接作为 body 的真实结构的子元素...[2021/7/21]

CSS实现隐藏搜索框功能(动画正反向序列)_CSS教程_CSS

顶部菜单栏中放置搜索框是一个常见的场景,但如果搜索功能使用的不那么频繁,同时菜单栏中内容本来就比较拥挤,再放一个完整的搜索框在那就显得不那么美观。因此也有一个挺常见的做法是,只放一个搜索图标,需要时再显示整个搜索框,如下图所示: 实现思路 起始状态时搜索框没有显示,鼠标移入后从右侧滑入...[2021/7/19]

vue项目多环境配置(.env)的实现

目录什么是多环境配置,为什么要多环境配置?.env 文件配置到哪里.env文件如何配置,配置多少个?.env文件的配置如何配置运行环境如何获取全局配置项的值如何运行环境 没接触多环境配置前,感觉好高大上,真正操作后感觉也就那么回事,在此把自己遇到的问题和解决方案叙述一下,有不对的地方欢迎各位...[2021/7/19]

Vue中实现3D标签云的详细代码

预览: 代码: 页面部分: <template> <div cla ="tagcloud-all" ref="tagcloudall"> <a v-for="item in tagList" :href="i...[2021/7/19]

vue实现可改变购物数量的购物车

本文实例为大家分享了vue实现改变购物数量的购物车,供大家参考,具体内容如下 效果图: 知识点: 1.computed 计算属性 2.filters 过滤器 实现代码: <!DOCTYPE html> <html lang="en"> ...[2021/7/19]

vue-route路由管理的安装与配置方法

介绍 Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有: 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图...[2021/7/19]

Vue之全局水印的实现示例

目录1.创建水印Js文件 2.引入操作 2.1 在App.vue中引用或其他页面 2.2 在router配置文件中引用 【需求】系统内页面显示水印,登录页面没有水印(退出登录时,登录页面不会显示水印) 1.创建水印Js文件 /* * @Author: 刘小二 * @D...[2021/7/19]

html5 录制mp3音频支持采样率和比特率设置

13年的时候做过html5录音,一个问题是保存的wav格式文件很大,当初用了一个迂回的方式,上传到服务器后调用 lame 编码器转换,但由于文件大,上传较慢。不得不说,前端技术发展真是日新月异,有人实现了js版本的lame编码器,可以直接在浏览器端录制MP3音频。 lamejs介绍 最初有个...[2021/7/19]

详解CSS中的特指度和层叠问题_CSS教程_CSS

详解CSS中的特指度和层叠问题_CSS教程_CSS

前言 Q:如果多个规则匹配同一个元素,而且部分声明之间有冲突,那么我们如何知道哪个规则胜出呢? A:用户代理会计算每个规则中选择符的特指度,然后将其依附到规则中的每个声明上。如果两个或多个属性声明有冲突,特指度最高的声明胜出。而为了计算特指度,用户代理必须把规则“打散&rdquo...[2021/7/19]

CSS3中Animation实现简单的手指点击动画的示例_CSS教程_CSS

本文主要介绍了CSS3中Animation实现简单的手指点击动画的示例,分享给大家,具体如下: 效果图 <!DOCTYPE html> <html> <head> <meta charset=&quo...[2021/7/19]

纯CSS3实现div按照顺序出入效果_css3_CSS

本文主要介绍了纯CSS3实现div按照顺序出入效果,具有一定的参考价值,感兴趣的可以了解一下 效果: 源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF...[2021/7/19]

html5实现点击弹出图片功能

html5实现点击弹出图片功能

下面给大家分享html5点击弹出图片,分为前台代码和js代码,具体内容如下所示: 前台代码: <a href="javascript:;" onclick="repeat()"> <div id="moda...[2021/7/19]

详解CSS3.0(Cascading Style Sheet) 层叠级联样式表_css3_CSS

CSS3.0(Cascading Style Sheet) 层叠级联样式表 快速入门: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu...[2021/7/19]

利用js实现Vue2.0中数据的双向绑定功能

Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj  要定义属性的对象。 prop 要定义或修改的属性的名称 descriptor 要...[2021/7/19]

面试最常问的13种Vue修饰符

目录1.lazy 2.trim 3.number 4.stop 5.capture 6.self 7.once 8.prevent 9.native 10.left,right,middle 11.pa ive 12.camel 12.sync 13.keyCode 1.lazy lazy...[2021/7/12]

html5表单的required属性使用

描述 今天无意之中发现form有自带非空判断功能,查了资料发现,required 属性是 HTML5 中的新属性 定义和用法 required 属性是一个布尔属性 required 属性规定必需在提交之前填写输入字段。 如果使用该属性,则字段是必填(或必选)的。 注释:require...[2021/7/12]

html+css实现环绕倒影加载特效_HTML/Xhtml

本文主要介绍了html+c 实现环绕倒影加载特效,具体如下: 先看效果(完整代码在底部): 实现(可一步一步边看效果边编写): ※先初始化(直接复制): *{ margin: 0; padding: 0; ...[2021/7/12]

Vue登录页面的动态粒子背景插件实现

目录动态粒子效果如下: 安装插件 动态粒子效果如下: 安装插件 npm install vue-particles --save-dev 在main.js文件中全局引入 import VueParticles from ''vue-particles...[2021/7/12]

详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)_CSS教程_CSS

一. overflow:hidden  溢出隐藏 给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。 /*c 样式*/ <style type="text/c ">...[2021/7/5]

html输入两个数实现加减乘除功能_HTML/Xhtml

一、parseFloat() 函数   在网页中制作一个简单的计算器,在文本框输入两个数,能够实现两个数的加减乘除。 parseFloat() 函数可解析一个字符串,并返回一个浮点数。 该函数指定字符串中的首个字符是否是数字。如果是,则对字符 串进行解析,直到到达数字的末端为止...[2021/7/5]

jQuery实现广告显示和隐藏动画

我们经常会看到几秒后出现了广告,显示了几秒后广告就消失了,下面就用JQuery框架来实现这个功能。 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...[2021/7/5]

idea编译器vue缩进报错问题场景分析

项目场景: 在运行Vue项目时,出现了缩进报错的问题,我是使用idea 的编译器,上网查了一下多数都是直接更改缩进的的数量,不过我觉得麻烦,就只是想要关掉验证。 问题描述: idea编译器出现Vue缩进报错 ✘  http: eslint.org/doc r...[2021/7/5]

html5调用摄像头实例代码

最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章,但各有瑕疵。于是自己查阅书籍写了一个demo,主要分三步,废话不多说上代码。 HTML代码部分: <!--video用于显示媒体设备的视频流,自动播放--> <video id=&...[2021/6/28]

关于CSS浮动与取消浮动的问题_CSS教程_CSS

关于CSS浮动与取消浮动的问题_CSS教程_CSS

浮动的定义 设置元素脱离正常的文档流,使元素向左或向右靠近。父元素的边缘,或者其他设置了浮动的元素的边缘 浮动解决的问题 1.解决文字包围图片的问题 2.解决间隔问题 3.可以向左,或者向右排版 将文字排版到图片左端 不采用浮动时: 采用浮动时: 采用的属性 ...[2021/6/28]

Vue+express+Socket实现聊天功能

Vue+express+Socket实现聊天功能

本文实例为大家分享了Vue+expre +Socket实现聊天功能的具体代码,供大家参考,具体内容如下 实现聊天功能 具体功能 只是为了实现功能,不对界面进行美化 1、输入消息点击发送所有用户可以在下方收到消息 2、输入userid后点击连接,可以连接对应的聊天,另外一个界面输入...[2021/6/28]

Vue+ssh框架实现在线聊天

本文实例为大家分享了Vue+ h框架实现在线聊天的具体代码,供大家参考,具体内容如下 效果图 核心部分 websocket编程 向后台发送消息 <template> <el-container> <el-header &...[2021/6/28]

vue3实现CSS无限无缝滚动效果

本文实例为大家分享了vue3实现CSS无限无缝滚动效果的具体代码,供大家参考,具体内容如下 template 双层div嵌套,进行隐藏滚动显示 <div cla ="list-container"> <div cla ="marquee" id="car...[2021/6/28]

浅谈React Component生命周期函数

React组件有哪些生命周期函数?类组件才有的生命周期函数,包括ES6语法的cla 以及create-react-cla 模块: 分为几个阶段:挂载,更新,卸载,错误处理; 1,挂载:constructor(常用)、static getDerivedStateFromProps、rende...[2021/6/28]

vue3.0+vite2实现动态异步组件懒加载

创建一个vite项目 性能决定成败;vite确实快; cmd 命令行(默认你已经安装了node & npm),执行npm init @vitej app vue-study – --template vue; cd至vue-study,npm install(安装依赖); npm...[2021/6/28]

React列表栏及购物车组件使用详解

本文实例为大家分享了React列表栏及购物车组件的具体代码,供大家参考,具体内容如下 一、组件介绍 商家详细界面(StoreDetail组件): import React from ''react''; import axios from ''axios''; impo...[2021/6/28]

Vue实现tab导航栏并支持左右滑动功能

本文主要介绍:利用Vue实现tab导航栏,并且通过flex布局实现左右滑动,计算按钮的位置,当点击第一屏展示的最后一个且还有元素未展示时,自动滑动显示出未显示的元素。 tab导航栏布局: <section cla ="theme-list"> <div cl...[2021/6/28]

React + Threejs + Swiper 实现全景图效果的完整代码

  咱先看看全景图实现效果:展示地址   截图:   体验了一下是不是感觉周围环境转了一圈,感觉世界是圆的?😁   没错!恭喜你答对了!地球就是圆的!👀 ...[2021/6/28]

Node实现搜索框进行模糊查询

本文实例为大家分享了Node实现搜索框进行模糊查询的具体代码,供大家参考,具体内容如下 一、需求 点击导航栏中的搜索图,出现搜索框,从而进行文章的模糊查询 二、建表 1.blog表 添加外键: 2.nav表 3.type表 4.user表 ...[2021/6/28]

捣鼓系列:前端大文件上传

捣鼓系列:前端大文件上传

某一天,在逛某金的时候突然看到这篇文章,前端大文件上传,之前也研究过类似的原理,但是一直没能亲手做一次,始终感觉有点虚,最近花了点时间,精(熬)心(夜)准(肝)备(爆)了个例子,来和大家分享。 本文代码:github 问题 Knowing the time available to p...[2021/6/28]

[测试]Sprint Boot

昨天,我们介绍了如何在Spring Boot中实现文件的上传。有读者问:那么如果有多个文件要同时上传呢?这就马上奉上,当碰到多个文件要同时上传的处理方法。 动手试试 本文的动手环节将基于Spring Boot中实现文件的上传一文的例子之上,所以读者可以拿上一篇的例子作为基础来进行改造,以体会这...[2021/6/28]

Vue指令工作原理实现方法

Vue指令工作原理实现方法

Vue简介 现在的大前端时代,是一个动荡纷争的时代,江湖中已经分成了很多门派,主要以Vue,React还有Angular为首,形成前端框架三足鼎立的局势。Vue在前端框架中的地位就像曾经的jQuery,由于其简单易懂、开发效率高,已经成为了前端工程师必不可少的技能之一。 Vue是一种渐进...[2021/6/28]

循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果

在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的CSS样式处理动态效果,增加公司门户网站页面的动画效果。 1、使用wow.js动画组件 WOW....[2021/6/28]

「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之文件上传(十)

基于Vue和Quasar的前端SPA项目实战之文件上传(十) 回顾 通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之数据导入(九)的介绍,实现了业务数据批量导入功能,本文主要介绍文件上传相关内容。 简介 crudapi支持附件字段,表字段里面保存的是文件url字符串。附件可以通...[2021/6/28]

循序渐进BootstrapVue,开发公司门户网站(3)--- 结合邮件发送,收集用户反馈信息

在我们公司门户网站里面,如果有需要,我们可以提供一个页面给用户反馈信息,以便获得宝贵的用户信息反馈或者一些产品咨询的记录,一般这个结合邮件发送到负责人的邮箱即可。本篇随笔结合后端发送邮件的操作,把相关信息发送到门户网站的负责人邮箱里面。 1、客户反馈界面 我们这个主题主要介绍Bootstrap...[2021/6/28]

ES2015+ 常用新特性一口气看个够

ES2015+ 常用新特性一口气看个够

ES2015 也叫 ES6,区别只是一个是以发布的年份来命名,一个是以版本号来命名 从那以后组织每年都会发布一个新版本,根据这个规则,ES2016 === ES7... ES2020 === ES11 但通常我习惯将 ES2015 及其后续版本统称为 ES2015+ 变量声明 ES2015...[2021/6/28]

JavaScript 沙盒模式

微前端已经成为前端领域比较火爆的话题,在技术方面,微前端有一个始终绕不过去的话题就是前端沙箱 什么是沙箱 Sandboxie(又叫沙箱、沙盘)即是一个虚拟系统程序,允许你在沙盘环境中运行浏览器或其他程序,因此运行所产生的变化可以随后删除。它创造了一个类似沙盒的独立作业环境,在其内部运行的程序...[2021/6/28]

DOM 获取元素节点 的 n多方法

DOM 获取元素节点 的 n多方法 /** 根据''标签名''进行元素的获取 由于HTML中可以存在多个相同的标签名的元素 因此接受的变量是可以存储多个数据的类数组 通过下标获取具体的内容。 */ let ulEle = document.getElementsByTagName...[2021/6/28]

实现SLIC算法生成像素画

前言 像素风最早出现在8bit的电子游戏中,受制于电脑内存大小以及显示色彩单一, 只能使用少量像素来呈现内容,却成就了不少经典的像素游戏。随着内存容量与屏幕分辨率的提升,内存与显示媒介的限制不再是问题,而像素风也慢慢演变成一种独特的创作风格。 像素画的一般的绘制流程包括了勾线、填色等,而逐个像...[2021/6/28]

前端开发中常用的数组方法(一)

前端开发中常用的数组方法(一)

前端开发中常用的数组方法(一) JavaScript提供了大量不同处理数组的方法,这里花几分钟介绍常用的几个数组方法。 1、Array.map() map()方法返回一个新数组,数组中的元素未原始数组元素调用函数处理后的值。 map() 方法按照原始数组元素的顺序依次处理元素。 示例一: ...[2021/6/28]

循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

在BootstrapVue组件库里面,提供了很多对Bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴Logo或者友情连接什么的,则可以使用一个滑动图片展示的vue-awesome-swiper组件。本篇随笔综合介...[2021/6/28]

Typescript学习总结

typescript(以下简称TS)出来也有好长时间了,下面记录一下学习心得。 首先学这门语言前,请确保有以下基础知识: 扎实的javascript基础知识 es6的基础知识 面向对象编程的概念(没有也可以,就当是重新学一遍了) 接下来看一下TS的一些概念: 一、基本类型 TS的基础类...[2021/6/28]

分享Sql性能优化的一些建议

随着业务体量和逻辑复杂度的增加,workcenter 对接口的性能耗时有了新的要求,而提升接口性能最有效的方法当然 对数据库操作逻辑和SQL语句进行优化了。本篇分享一些数据库性能优化的经验和建议 数据库结构优化 mysql 逻辑架构图: 第一层:客户端通过连接服务,将要执行的 sql...[2021/6/28]

如何使用Ajax实现简单的文件上传

如何使用Ajax实现简单的文件上传 一、起因 相信大家在做web项目中难免会遇到文件上传的业务需求,上传文件一般是通过表单来上传,但当我们不想使用表单时就可以通过Ajax的方式来上传文件,这里就给大家分享使用Ajax上传文件的方法。 二、web页面 这里我简单地写了一个Demo页面,由一个in...[2021/6/28]

前端之设计稿二三事

导语: 前端作为web项目开发流程中的一个环节,在实际开发过程中,必定要和ui/交互设计师进行沟通协调,以便保证设计稿能够完全代码化,并且是设计师希望的效果。所以,在这里我总结了一些前端开发需要注意的设计稿的一些东西。 目录 设计稿为750px的原理 常用中文字体英文名称 设计稿和代码...[2021/6/28]

跨域访问方法介绍(5)--使用 window.postMessage 传递数据

postMe age 是 HTML5 XMLHttpRequest Level 2 中的 API,可以用于窗口间消息的传递:页面和其打开的新窗口的数据传递、页面与嵌套的frame消息传递、页面与嵌套的iframe消息传递。本文主要介绍通过使用 postMe age 方法来实现不同域下页...[2021/6/28]

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