沐枫_MuGuiLin_CSDN博客-JavaScript / ES6,HTML5,CSS3领域博主

MuGuiLin

码龄12年

一个痴迷于计算机软硬件及网络的学习者。

毕业院校电子科技大学
目前就职 SMG
于 2009-11-07 加入CSDN

获得成就

获得214次点赞
内容获得78次评论
获得659次收藏

荣誉勋章

兴趣领域

#设计

#PhotoShop#UI/UX
#前端

#Vue.js#React.js#CSS#小程序#面试#ECMAScript 6#JavaScript#HTTPS#Flutter#XHTML#Node.js#WebPack#前端框架#TypeScript
#后端

#架构#MySQL#Redis#Python
#Android

#Flutter
#安全

#web安全
#iOS

#Flutter#React Native

TA的专栏

笔记
3篇
微信公众号、小程序
5篇
Flutter
1篇
React Native
1篇
HTTP
1篇
在线编辑器
2篇
JavaScript / ES6
27篇
CSS3
10篇
HTML5
16篇
jQuery
9篇
Angular.js
2篇
React.js
3篇
Vue.js
7篇
Node.js
3篇
Echarts
1篇
Webpack
2篇
PHP
1篇
MySQL
操作系统
2篇
PS / AI
1篇
MongoDB
1篇

基于Koa+socket.io 与 Angular+socket.io-client 前后端分离(socket端口共用、跨域处理、命名空间等)搭建聊天室

前言在之前的一个项目中，后来的新需求是要求有实现一个实时通迅的聊天室，由于之前的技术栈的选型，后端是用Koa2 + TypeScript3 + MongoDB4，前端是用Angular10 + ng-zorro-antd10组成的一个前后端分离项目，所用只能在此基础上进行开发。说到实时通迅，首先就想到的是用WebSocket来做，但由于原生的WebSocket服务端实现起来较为繁琐，所以刚开始就用第三方封装好的koa-socket来实现可是出现各种问题，后来又用koa-socket-2也是四处碰壁，也是

发布博客于 3 月前

纯前端 HTML+JS版, Vue.js版二维码：生成、扫描、识别、解析、扫一扫

前言最近在公司的一个WebH5项目中，有个生成二维码和识别二维码的需求（要脱离微信环境、微信JS-SDK，微信小程序、微信受权，[就是可以在普通的浏览器中运行]），要求可以在PC端、移动端。关于二维码生成：相信大家做过，直接用的 qrcode.js、vue-qr 等前端库就可以实现比较简单。关于二维码识别：之前都是在微信环境中开发的，一旦脱离微信环境就用不了，所以现在正好项目有这个需求，经过一翻折腾实现了在PC端，移动端的二维码识别解析功能。该Demo功能共分为：HTML版和 Vue版两个版

发布博客于 3 月前

JS模块化的各种规范之 CJS、AMD、CMD、UMD、ESM

模块化的作用及来由：主要是现实代码可复用，拥有独立的作用域，防止全局污染，提高开发效率、降低维护成本等等。有了模块后，我们就可以根据相应的需求加载对应的模块，想要什么功能，就加载什么模块，npm就是最大的模块仓库。尽管如此，在早些时候，JS模块化规范还是出现了多种规范。幸运的是，现在及将来，趋势将是ES6中原生支持的ESM规范一统江湖。JS模块化规范分类(大至如下5种)： CJS、AMD、CMD、UMD、ESM。一、CJS规范规范代表库：CommonJScommon.js主要用

发布博客于 4 月前

聚类分析的方法及应用

通常，我们在研究与处理事物时，经常需要将事物进行分类，例如地质勘探中根据物探、化探的指标将样本进行分类；古生物研究中根据挖掘出的骨骼形状和尺寸将它们分类；大坝监控中由于所得的观测数据量十分庞大，有时亦需将它们分类归并，获得其典型代表再进行深入分析等，对事物进行分类，进而归纳并发现其规律已成为人们认识世界、改造世界的一种重要方法。

发布资源于 4 月前

机器学习实战之分类算法.pdf

机器学习实战之分类算法，机器学习就是将无序的数据转化为有用的信息。一个实例有 n 个特征，由 n 列组成。机器学习最主要的任务就是分类，另一个就是回归，回归中比较典型的就是线性拟合。分类和回归都属于监督学习，因为这类算法必须知道要预测什么，即已知目标变量的分类信息。与监督学习对应的是无监督学习，此时数据没有类别信息，也不会给定目标值，将数据集合分成由类似的对象组成的多个类的过程叫做聚类。将描述数据统计值的过程称之为密度估计。分类首先要进行训练，训练样本集必须确定目标变量的值，以便发现特征与目标变量之间的关系。特征或者属性通常是训练样本集的列，他们是独立测量得到的结果，多个特征联系

发布资源于 4 月前

视频基础知识.pdf

1、视频的定义及分类 2、视频的制式 3、视频的数字化及格式 4、常用概念

发布资源于 4 月前

音频基础知识.pdf

1、声音及声音的数字化 2、数字音频文件格式 3、MIDI技术 4、常用概念

发布资源于 4 月前

逆地理编码Web API，根据经伟度坐标获取地址、周边POI

Demo说明：根据输入的经伟度坐标，查询获取对应所在地址位置；可通过该功能，将结构化地址（省/市/区/街道/门牌号）解析为对应的位置坐标，逆地理编码服务提供将坐标点（经纬度）转换为对应位置信息（如所在行政区划，周边地标点分布）功能，服务同时支持全球行政区划位置描述及周边地标POI数据等。逆地理编码：逆(反向)地理编码是将点位置（纬度、经度）反向编码为可读地址或地名的过程。这允许识别附近的街道地址，地点和/或区域细分，例如社区、县、州或国家。与地理编码和路由服务相结合，反向地理编码是基于移动.

发布博客于 4 月前

Web前端本地开发、联调，使用Chrome浏览器解决API跨域问题

前言：现在前端项目开发过程中，大部分的项目都是前后端分离的（就后端开发用如：PHP、Java、Go 等语言 + 数据库进行开发，只提供API接口数据，而前端开发用如：Vue.js React.js Angular.js 框架进行开发，前后端业务交互用Ajax请求API交互数据。在项目开发初期，一般都是前端开发人员都先在本地进行开发(就是还没打包构建时)，所以前后端进行联调的时候就会出现一个常见的问题，那就是Ajax请求跨域问题。其实前端和后端是不存在跨域的，而是前端在通过浏览器请求访问时，浏

发布博客于 4 月前

微信H5、网页、内置浏览器清理缓存，微信浏览器缓存

写在前面：网页浏览器为什么要有缓存浏览器缓存（baiBrowser Caching）？我们都知道，在浏览器中打开一个网址时会经过：URL 解析 -> DNS 查询 -> TCP 连接 -> 处理请求 -> 接受响应 -> 渲染页面等一系步骤后，并且在不出任何(如，网速太慢，突然断网，服务器出错，代码出错等)意外的情况下，页面内容才能正常的展现在我们眼前。而且在网页中所加载各种资源，都要建立HTTP连接，客户端(浏览器) 和服务器要经过三次握手，四次挥手，再经过DO

发布博客于 6 月前

在Windows平台上搭建Flutter环境、创建Flutter项目、flutter doctor报错、配置环境变量等解决方案

极速构建漂亮的原生应用Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。Flutter中文官方文档：https://flutterchina.club一、下载安装Flutter SDK1、下载地址：https://flutter.dev/docs/development/tools/sdk/releas..

发布博客于 6 月前

在Windows平台上搭建React Native环境，RN相关报错处理，yarn android启动不了等解决方案

React Native 中文文档：https://reactnative.cn/docs/getting-started.html一、安装JDK (Java SE Development Kit (JDK))下载地址：设置环境变量测试安装：javac 或javac -version二、安装 Android Studio下载地址：设置环境变量三、安装Node.js下载地址：测试安装：node -v四、react-native-cli 脚手...

发布博客于 6 月前

AxureRP-Setup_9.0.0.3696.exe

Axure RP 9是一款由美国公司最新推出的交互能力强大、提供解决方案的高端产品原型设计工具,专业的效果图设计制作软件,能够实现快速原型设计。

发布资源于 6 月前

常见浏览器兼容性问题汇总.doc

Web前端开发，PC端，移动H5端，常见浏览器兼容性问题汇总,浏览器兼容性问题汇总-web前端-html-css

发布资源于 6 月前

《HTML5从入门到精通》中文学习教程.pdf

Web标准及浏览器兼容性解决方案，经常有人会问做为一个优秀网页设计师要具备哪些方面的知识以及技能？

发布资源于 6 月前

SVN使用基本操作.ppt

SVN是类似于VSS 和 CVS 的版本管理软件,是CVS的作者另起炉灶开发的,继承了CVS的优点,避免了CVS的一些缺点. 客户端软件TortoiseSVN与资源管理器结合,使用非常方便

发布资源于 6 月前

专业技术职务新聘、转聘人员汇总表.xls

年度专业技术职务新聘、转聘人员汇总表(样表），专技职称资格，拟聘任专技职务，拟聘级别，Excel表

发布资源于 6 月前

抓包工具Fiddler使用分享.doc

Fiddler是一个http协议调试代理工具，它能够记录并检查所有你的电脑和互联网之间的http通讯，设置断点，查看所有的“进出”Fiddler的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。 Fiddler 要比其他的网络调试器要更加简单，因为它不仅仅暴露http通讯还提供了一个用户友好的格式。

发布资源于 6 月前

Web前端项目开发规范 .pdf

为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后可以更改此文档。

发布资源于 6 月前

PHP基础入门.ppt

主讲: 燕十八课时: 24课时老师博客: http://www.yanshiba.com 老师微博: http://weibo.com/Yshiba

发布资源于 6 月前

⼗招搞定 MySQL ⼤规模数据库的性能和伸缩性优化

在需要⽀持移动/平板电脑应⽤及普通桌⾯浏览器访问的时代，⽹站的普及率和有效性很⼤程度上取决于其可⽤性和性能。⼀个访问缓慢的⽹站会使得访问者或潜在的客户流失，并导

发布资源于 6 月前

Git 使用笔记

一、Git的基本概念1、什么是版本控制？版本控制是指对软件开发过程中各种程序代码、说明文档等文件的变更进行管理，它将追踪文件变化，记录文件的变更时间、变更内容、甚至变更执行人进行记录，同时对每一个阶段性变更（不仅仅只是一个文件的变化）添加版本编号，方便将来进行查阅特定阶段的变更信息，甚至是回滚。2、什么是版本库？版本库又名仓库，英文名repository，你可以简单理解成一个目录，这个目录里面的所有文件都可以被Git管理起来，每个文件的修改、删除，Git都能跟踪，以便任何时刻都可以追踪历史，或

发布博客于 7 月前

Webpack 快速入门

Webpack 快速入门 1、webpack简介2、安装webpack2.1、环境准备2.2、全局安装不推荐2.3、项⽬(局部)安装【推荐】2.4、检查安装情况2.5、webpack升级3、构建webpack项目3.1、创建项目文件夹、安装webpack依赖3.2、准备执行构建目录和文件3.3、执行构建（执行打包）3.4、构建成功3.5、默认配置4、webpack配置核心概念4.1 先来体验一下修改webpack.config.js配置后的效果Webpack 配置项1、webpack简介webpa

发布博客于 7 月前

nvm安装，nvm的使用，nvm常用命令，nvm安装node报错，nvm切换不了，系列集合

前言：在项目开发过程中，由于各种框架、插件以及 nodejs、npm 的飞速更新，在项目新开发或对老项目进行更新维护时，有些项目版本的配置和当前node环境不匹配，导致报错，甚至都无法启动。nvm的出现就是为了解决以上问题的，nvm是一个Node.js版本管理器，为了解决node各种版本存在不兼容问题，nvm其实是让你在同一台机器上根据需要，安装或切换项目所对应的node版本来适配项目。下载nvm：下载地址：https://github.com/coreybutler/..

发布博客于 9 月前

Web前端常用CSS样式属性

前言在Web开发中，做为前端开发人员来说，切图写样式、页面布局这些都最基础的，也是必须要会的，但在实际开发过程中，除了一些常用的CSS样式属以外，有些CSS样式属性不经常用，但是却很实用，而长时间不用就会忘记，所以在这里总结一下，以后用到时方便查阅。CSS3各浏览器的属性兼容前缀：前缀内核浏览器-o-PrestoOpera（欧朋浏览器）-ms-TridentInternet Explorer（IE浏览器）-moz-GeckoFirefox（火狐浏览器）

发布博客于 9 月前

react、create-react-app装饰器运行环境配置

装饰器是es6提出来的草案，装饰器又可叫修饰器（Decorator）是一个函数，用来修改类、属性、方法等的行为。decorator 是 ES7 的一个新语法，他可以对一些对象进行装饰包装然后返回一个被包装过的对象。如果要在react项目中使用装饰器，需要配置一下运行环境。1、暴漏 create-react-app 脚手架配置文件。yarn eject2、安装依赖yarn add @babel/plugin-proposal-decorators -D3、修改package.json文件.

发布博客于 9 月前

Vue-next 探究

前言由于最近公司项目甚多，现在终于有点时间了，所以去看了一下vue-next（下一代vue.js 3.0），相信不久的将来vue3.0很快就要发布出来了。这次是用TypeScript重构的，里面也新增了很多特性，如CompositionAPI，修改了数据响应式的实现方式等等，好的一点就是它是完全兼容2x的写法，而且在性能和速度上有显著的提升。相关链接vite：https://github.com/vitejs/vitevue-next：https://github.com/vuejs/vue

发布博客于 9 月前

科大迅飞语音听写（流式版）WebAPI，Web前端、H5调用语音识别，语音搜索，语音听写

前言由于公司有个Web项目需要用到语音搜索功能，找了一些第三方库都不太理想，要么语音识别速度很慢，要么不能精确识别等等，最后选择了迅飞语音（迅飞语音听写（流式版）WebAPI）。迅飞语音相对来说做得还是比较成熟了，不过是收费的，是按照调用API次数来收费，但是有试用次数，新用户注册每天有500次调用次数，用户实名认证后每天有15万次调用次数（不定期会有活动，推荐购买正式版）。讯飞语音相关的产品还是比较全面的，根据项目需要这次用的是迅飞语音听写（流式版）WebAPI，官网有不同平台的Demo和SDK，

发布博客于 10 月前

微信H5、移动端自定义弹窗事件穿透、底层页面滑动解决方案

前言之前有个项目是运行在移动端Web，和微信H5中，由于默认的弹窗UI不太好看，而且还不统一，所以页面需要自定义弹窗，添加icon、提示信息、操作按扭等样式。问题描述：如果在页面内容的高度超过了可视区就会出滚动条，这时触发示显弹窗就会出现页面的穿透事件，在弹窗上滑动时或弹窗中还可以滑动时滑动，这时底层原页面也会跟着滑动，并且如果刚好点击到底层原页面的某个功能按扭也会触发其事件。解决办法：1、使用fastclick.js插件库，下载地址：https://www.bootc...

发布博客于 1 年前

面试 HTTP ，99% 的面试官都爱问的问题

HTTP 和 HTTPS 的区别HTTP 是一种超文本传输协议(Hypertext Transfer Protocol)，HTTP 是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范HTTP 主要内容分为三部分，超文本（Hypertext）、传输（Transfer）、协议（Protocol）。超文本就是不单单只是本文，它还可以传输图...

发布博客于 1 年前

Vue form-create的基本使用和自定义表单组件的数据通迅

form-create具有动态渲染、数据收集、校验和提交功能的表单生成器。轻松搞定 form 表单,让你不再为表单而烦恼form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。hidden、input、inputNumber、checkbox...

发布博客于 1 年前

Angular11(Cli) 在打包 ng build 后的常见问题处理方案

前言：我自认为，到目前为止 Angular 框架始终保持着前端框架领域中的龙头老大位置，虽然在前端框架领域中有很出色的React.js和易上手的Vue.js框架。从使用以上3个框架的情况来看，我个人更喜欢Angular，尤其是在支持使用TyptScript以后，当然React和Vue都有，而且各个框架都有自己的特色，所以在选择时要根据项目大小、需求等方面来选择合适的前端框架，这里就不多说了...

发布博客于 1 年前

UEditor 百度编辑器工具栏新增自定义按钮及功能

由于项目中用到了强大的UEditor富文本在线编辑器，因项目相关功能需求，而在UEditor编辑器原有的功能插件中没有我们想要的功能，所以就要在UEditor中新增一个(多个方法也一样)按扭并添加相应的功能。经使用以后总结，大概有如下两种实现方法。说在前面的：UEditor下载地址：http://ueditor.baidu.com/website/download.htmlU...

发布博客于 1 年前

rem.js 移动端 H5 解决各种机型适配问题的js

rem是 css3一种新的长度单位。它是相对于html标签的字体大小的单位（注意这里泛指是相对于html中的根元素标签也就是html）。一般用于在移动端H5页面中解决各种机型适配问题的js，文件中详细说明。

发布资源于 1 年前

微信公众号带参数跳转到小程序

由于项目需求，要在微信公众号的菜单栏中点击某个菜单后，跳转到小程序的某个活动详情页中，但活动详情页之前是在活动列表中打开的（所以带上的活动ID到详情页），这样详情中，就可以跟据活动ID请求后端API获取相关详情数据啦。但现在是要从微信公众号的菜单栏中跳转到小程序，所以有就要公众号自定义菜单中设置好跳转路径和参数。如：pages/activityDetail/activityDetail?i...

发布博客于 1 年前

js打开新窗口 window.open() 隐藏菜单栏、工具栏，配置窗口大小、滚动条等

项目中一些页面，在有的时候需要在一个新窗口中打开，又不想在新窗口显示太多可操作信息，如隐藏菜单栏、工具栏、配置窗口大小、滚动条等。先看看效果：1、【这是没隐藏菜单栏等界面】2、【这是隐藏菜单栏、工具栏等界面】注：经测试大部分都功能都可配置，但隐藏地址栏无效location=no，因为一些浏览器会强制新窗口始终渲染位置栏！原码实列：<...

发布博客于 1 年前

ueditor编辑器字数统计不算空格以及过滤粘贴板格式

前言：由于项目需要，采用UEditor在线编辑器（百度编辑器 http://ueditor.baidu.com/website/onlinedemo.html）来对文稿进行编排，其中对字数统计有一个需求是，当在ueditor编辑器中敲空格不算字数。在ueditor.config.js中查找了一翻并没有字数统计时不算空格的配置项，后来在ueditor.all.js中找到了修改处，原来的字数统...

发布博客于 1 年前

HTML table表格固定表头 tbody加滚动条

纯CSStable表格thead固定tbody滚动效果由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！实现思路：将内容要滚动的区域控制在 tbody 标签中添加 overflow-y:auto; 样式，给 tr 标签添加table-layout:fixed;...

发布博客于 2 年前

Vue 详情页返回列表页，不刷新页面，并且保留列表页原来滚动条所在位置

前言：最近公司有个移动端H5的项目，是前后端分离的，所以前端就Vue + Vux来做，项目是用vue-cli3生成的，其中就有这样的一个需求，在新闻列表页中向下滑动后，随别打开一个新闻，进入该新闻的详情页面，当看完后，从详情页返回到新闻列表页。这时，列表页重新请求接口数据，重新渲染DOM，而且滚动条也回到了最顶上的第1个新闻了。这样不仅性能不好，还会影响用户的体验效果。问题分析：...

发布博客于 2 年前

JavaScript大师必须掌握的12个知识点

发布Blink于 2 年前

微信小程序如何打开网页

在微信小程序中打开网页需要满足两个条件： 1、在小程序管理后台设置跳转的域名为业务域名，注意这个域名必须是https协议的； 2、需要下载一个校验文件放置跳转域名的服务器根目录下，也就是讲这个跳转域名的服务器你必须有上传文件权限。注意事项： 1、跳转这个链接只能是在当前小程序中，用web-view组件来打开，而不是新开一个浏览器去访问url。 2、...

发布博客于 2 年前

Vue 页面跳转方式与参数传递编程导航

首先：要清楚的是：Vue中都是单页面应用居多，而所谓的页面跳转，也是通过路由重新渲染了一下视图，而不是真正的页面跳转。一、标签跳转：<router-link> 映射路由1、不带参数跳转<template> <!-- 在Vue中的<router-link>标签中，到页面最...

发布博客于 2 年前

JS深拷贝、浅拷贝和使用场景详解

基本概念：ECMAScript数据类型划分：*简单类型(基础类型,原始类型)：Number、String、Boolean、Null、Undefined、Symbol(SE6新增的)；*复杂类型(复合类型)：object(Object、Function、Array、Set、Map、Date、Math、RegExp)；t...

发布博客于 2 年前

ECharts地图，echarts自定义map地图，echarts添加标注，自定义坐标、图标、icon

ECharts如何自定义省、市、县区地图(各省市直辖区的map地图)，ECharts如何在地图上自定义图片、图标，根据经纬度显示自定义建筑图片、添加自定义覆盖物前言最近在做一个项目中，需求是：要显示中国某个省份下，某个市的地图，而地图还要有块级效果，自定义地图颜色，还要在地图上显示不同的建筑物图片，还要每隔几秒后（数据是从后端用ws实时推送过来的，要根据推送过来的数据，动态切换显示对...

发布博客于 2 年前

socket.io-client 实时通讯，用socket.io-client的坑

前言：由于项目需要，前端所渲染的数据，要从后端(PHP)实时主动推送到前端（前端也可以实时主动推送到后端，以前的做法是在前端用定时任务，隔多少时间后就请求一下后端API），所以就不像平时用Ajax、Fetch、Axios等来调用后端的API接口了，这次采用的是WebSocket方式（什么是WebSocket），现在的WebAPI中本身就支持WebSocket的，所有可以前端可以直接调，但是使用...

发布博客于 2 年前

vue-cli 3.0 配置sass/scss全局函数、变量配合 vw vh 做移动端自适应布局

前言以前做移动端项目布局都是rem来做的，但rem需要在页面中引入js，根据设备的宽度来修改根节点<html>标签的font-size样式属性（相对长度单位。相对于根元素(即html元素)font-size计算值的倍数）才能配使用！rem单位js代码：(function(doc, win) { var docEl = doc.documentElement, r...

发布博客于 2 年前

JS获取、设置CSS样式的方法（外部Style、外联CSS样式)

一般我们经常用js去设置或获取的都是元素的内联（行内）样式！例如：dom.style.width; //获取行内样式!dom.style.display = 'block'; //修改行内样式!那么如何设置或获取外部样式、嵌入样式呢？其是：在JS中有两种方法可以获取外部样式：通过 getComputedStyle() 方法获取通过...

发布博客于 2 年前

JS各种数据类型的识别与筛选、提取

'use strict'; // 数据类型数组 let arr = ['100px', 'abc' - 6, [], -98765, 34, -2, 0, '300', , function () { alert(1); }, null, document, [], true, '200px' - 30, '23.45元', 5, Number('abc'), f...

发布博客于 2 年前

JS判断QQ号是否合法、JS原生判断、正则判断

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...

发布博客于 2 年前

半身照：1寸到12寸照片的尺寸各是多少厘米cm

照片的尺寸国内外说法是不同的，国内的叫法是5寸、6寸、7寸……，数值取的是照片较长的那一边；国际的叫法时3R、4R、5R……，数值取的是照片较短的那一边。按照目前的通行标准，照片尺寸大小是有较严格规定的(厘米cm)1英寸证明照的尺寸应为3．6厘米×2．7厘米；2英寸证明照的尺寸应是3．5厘米×5．3厘米；5英寸（最常见的照片大小）照片的尺寸应为12．7厘米×8．9...

发布博客于 2 年前

ES6语法 checkbox 复选框单选 / 全选 / 删除

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...

发布博客于 2 年前

vue-cli3 项目引入 vux-ui 加 vue.config.js devServer{}配置

前言：由于项目需要，用的vue-cli3 + vux-ui 来做，vux现在也是比较优秀的前端移动端 UI 组件库、框架了，可是现在的vux 和 vue-cli3还没有同步更新，现将所填的坑记录下！！！安装基础必要的环境：首先需要安装Node.js环境、vue-cli脚手架什么的，这里就不再说了，官方文档说得比我详细：node.js官方：http://nodejs.cn/...

发布博客于 2 年前

键盘F1到F12功能键的组合使用

大多数功能键都是组合使用的，也有单用的，你这样问怎么回答啊，一个键可能代表很多意思，不同情况不一样的，你慢慢用过程当中问具体的问题，后就会熟悉啦.一般,capslk是锁定大写英文,按shift再按字母就会显示大写松开shift单独按字母键一般小写,然后按shift再按数字键是标明的上面那行,否则就是指数字,比如1上有!,按shift再按1就出现!,只按1就出现1.ctrl和alt一般要组...

发布博客于 2 年前

微信H5 分享(自定义标题、图片、链接) 与禁止分享(微信隐藏功能按钮) 功能的写法

使用场景：最近有个H5项目在微信浏览器上运行，在项目开发过程中有一个奇特的需求，就是打开这个项目网页的用户分享和静止分享（就是有些页面要求要有分享【可自己定义标题、图片、链接】，而有些页面要求要不让用户分享）。自定义分享到是经常做，但要不让用户分享还真没做过，经过一翻折腾最终搞定了，代码如下：注：无论是信自定义分享还是静止分享都要引入微信的js-sdk文件，官网下载地址：ht...

发布博客于 2 年前

解决在微信 H5 页面 background 背景图显示不出来！！！

最近做了个项目是在微信运行H5页面，背景是加在body上的页，在微信上打开背景图一闪而过，而用手机自带的浏览器打开又是正常的，在网上查了好多方法都不行。之前是用的是：background-size: 100%body{background: #b2b8c6 url(../assets/body.jpg?v168) top left repeat-y; background-s...

发布博客于 2 年前

Vue Cli 使用详解（vue cli怎么用），从0开始，手把手操作！

前言：随着Web技术的不断发展，目前，在前端开发框架技术领域中常用的js框架有Angular、React、Vue这三个最为常用，我个人认为Vue提取了Angular和React优点，再加上Vue自己的创作，推出了当前市场上使用量最多的框架之一，当然，Angular和React用得很多，这个都是根据各自的需求来定。这里我们主要讨论Vue，由于Vue借助WebPack用于快速构建标准的Vue项...

发布博客于 2 年前

H5送鲜花、礼物动画(解决：多个动画同时渲染卡顿问题)

前言：由于项目需要，要做一个送礼物的动画，而在项目开发过程中碰到了一些坑，现在记录下来难免以后再次跳坑。如有不足之处还请多多指教。使用场景：四个人斗地主，当你觉得哪个人打得好就可以送他一束鲜花，打行不好你可以向他扔鸡蛋，礼物分别是：鲜花、平锅，点赞，砸蛋共有4种，这4种礼物的动画是用GIF图片做（可以用Canvas做）的，当前送礼物的人少的时候还好，但是在人多...

发布博客于 2 年前

mongodb官网下载不了， MongoDB下载、安装、配置、使用，如何下载MongoDB数据库，MongoDB入门

什么是MongoDB ?MongoDB 是由C++语言编写的，是一个基于分布式文件存储的开源数据库系统。MongoDB 可在高负载的情况下，添加更多的节点，可以保证服务器性能。MongoDB 可为Web应用提供可扩展的高性能数据存储解决方案。MongoDB 将数据存储在灵活的json文档中，这意味着可以直接得到从文档到文档的数据、结构等。MongoDB 是免费使用的。Mon...

发布博客于 5 月前

新一代Ajax API Fetch 局部刷新技术

前后端交互，异步加载等首先想到的ajax，好像在我们的认知中除了ajax就没有别的了。其实我们都被这种观念误导了，ajax只是对于XMLHttpRequest的一种封装，我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest的Ajax，它是一种能够有效改进页面通信的技术。而Fetch API则是XMLHttpRequest的最新替代技术，它是W3C的正式标准。这...

发布博客于 3 年前

JS电脑配置检测

废话就不多说了，直接上代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>浏览器电脑配置检测</title> <style type="text/css"> ...

发布博客于 3 年前

JavaScript (mp3、mp4、jpg、doc、txt、rar)单个、多文件批量下载

JavaScript 多文件下载HTML5中 a 标签多了一个属性——download，用户点击链接浏览器会打开并显示该链接的内容，若在链接中加了 download 属性，点击该链接不会打开这个文件，而是直接下载。注意，是HTML5中的新特性，所以低版本浏览器不兼容！1、单个文件下载：以下载mp3为例：重点在于：要在a标签中加上download属性;<a do...

发布博客于 3 年前

Web开发项目前后端分离接口域名地址优化

概述：在Web、APP、微信等网站开发过程中，当项目要进行前后端分离的时候，前后端的数据交互几乎都是调接口，目前用 XMLHttpRequest （Ajax 局部刷新技术用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新 *jQuery插件封装了$.ajax方法很方面*）, 或者 HTML5中 websocket API (实时

发布博客于 4 年前

H5 Video 截取第一帧 Canvas 动态视频渲染、截取控制

由于现在的新媒体技术、资源、客户体验、需求等也越来越广、多、高，作为HTML5中较为重要的新媒体video视频API，也是用得非常之多。比如之前有个项目要在微信中做直播（半屏）播放（rtmp, m3u8等视频流），在IOS手机还好（听说ios手机微信没那么大的操控权限），而在Android手机下（Android系统毕竟是开源产品），只要在微信X5内核...

发布博客于 4 年前

CSS、JS 使DIV水平和垂直居中的各种方法

在Web开发中，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如何垂直居中呢？我们在网页布局，特别是手机等web端网页经常是不固定高宽的div。在这里，我总结出一些在工作中用到过的方法，和大家一起分享，疏漏之处，欢迎指导！实例代码：HTML: CSS:.po

发布博客于 4 年前

jQuery插件开发模式（组件封装）

在项目开发过程中，由于jQuery有较好的实用性，所以都用得非常多，而在项目开发时，某个功能（代码）使用很频繁被多个地方调用，那么就可以借助jQuery插件提供的组件封装方法高，来封装一些使用频率较的功能。JQuery中组件开发方式主要有两种：通过$.extend()来扩展jQuery通过$.fn 向jQuery添加新的方法还有 $.widget()

发布博客于 4 年前

CSS3 响应适动态加载外部style样式文件

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS3 响应适动态加载外部style样式文件</title>  <link rel="stylesheet" t...

发布博客于 4 年前

Stylus—CSS预处理框架

随着项目越来越复杂，CSS的预处理越来越重要，css维护工作会越来越困难，造成这些困难的很大原因源于CSS 是一门非程序式语言，没有变量、函数、作用域等概念。为了更好的管理、维护CSS代码，可以使用stylus、sass、less等技术, 这里选择的的stylus。参考网址：http://stylus-lang.com开源地址：https://github.

发布博客于 4 年前

jQuery 代码编写优化

jQuery是Web前端中应用最广泛之一，但在书写jquery的时候，为了书写代码方便，往往忽略了程序执行过程中，给客户端带来的压力。随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢，甚至无法运行等问题。因此有必要对自己书写的jquery代码进行优化，以达到更快捷、更流畅的运行效果。1，总是从ID选择器开始继承在...

发布博客于 4 年前

PHP断点续传的原理与实现

Http协议规定了如何传输某个资源的一部分，而不是全部。比如，有一个文件的大小是1000字节，浏览器可以只请求该文件的前300个字节，或者只请求第500到第1000个字节。通过这种方式，就可以不必在一次请求中传输某个资源的全部内容，而是发起多次请求，每次仅请求其中的一部分内容。等所有这些请求都返回之后，再把得到的内容一块一块的拼接起来得到完整的资源。实现断点续传就是要利用http协议的上

发布博客于 4 年前

web前端-图片，优化，压缩

据网络统计，60%的网站流量均来自网站图片，可见对图片合理优化可以大幅影响网站流量，减小带宽消耗和服务器压力。常用格式：图片格式支持透明动画支持压缩方式浏览器支持相对原图大小适应场景jpg不支持不支持有损所有由画质决定所有通用场景

发布博客于 4 年前

Web前端开发 icon图标转 web字体图标

在我们大多数的项目当中，icon图标是必不可少的，有的一个一个单独切片，或者将它们拼接组合起来（图片合成技术： css sprite ）从而减少请求，方便调用等，但是随着项目的逐渐扩展壮大，图标越来越多，到最后难以维护，比如以后要改某个图标的位置x , y，大小，顔色，新增。。。等等这样的方式就显得比较有限制性了。 IcoMoon是一个可以通过个性化设置来创建自定义图标（字体）

发布博客于 4 年前

Ajax文件上传带进度条、文件类型、大小、数量等获取、限制

$ajax 文件上传，带进度条，文件类型，文件大小。 Web前端代码效果图：使用说明：1、复制以下代码，创建一个新的html文件，粘贴对应的代码。2、引入jQuery文件，或 CDN地址。3、配置后端服务器上传地址。HTML代码：<!DOCTYPE html><html><head> <me...

发布博客于 4 年前

$.ajax() 函数详解

jQuery.ajax()函数用于通过后台HTTP请求加载远程数据。jQuery.ajax()函数是jQuery封装的AJAX技术实现，通过该函数，我们无需刷新当前页面即可获取远程服务器上的数据。jQuery.ajax()函数是jQuery的底层AJAX实现。jQuery.get()、 jQuery.post()、load()、 jQuery.getJSON()、 jQuery.g

发布博客于 4 年前

Web移动端Css Fixed方式的布局方案

移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。iOS下的 Fixed + Input BUG现象让我们先举个栗子，最直观的说明一下这个 BUG 的现象。常规的 fixed 布局，可能使用如下布局（以

发布博客于 4 年前

jquery中prop()方法和attr()方法的区别

其是prop()方法和attr()方法都是用来获取或设置标签元素属性的，但自从jquery1.6以上引入了 prop方法后，什么时候该用prop()？什么时候用attr()？它们两个之间有什么区别？没搞清楚前还真有点困惑。一、attr方法：获取用法：.attr('属性名')；// 实例：var getchecked =$('input[type=checkbox]'...

发布博客于 5 年前

移动端H5页面 rem 自适应缩放JS代码

移动端网页 rem 自适应布局在各种屏幕大小手机上实现自适应效果，用rem单位，根据手机屏幕大小自动改变(包括横屏和竖屏时)：文字大小，图片大小，布局宽度大小等！;(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window...

发布博客于 5 年前

JS常用事件兼容性处理方法

跨浏览器事件处理程序【根据能力检测调用】

发布博客于 5 年前

JavaScript中的Event事件对象详解

JavaScript事件【event】在JavaScript中对于事件来讲，首先，我们需要了解这样几个概念：事件、事件类型、事件绑定、事件监听、事件处理程序(事件侦听器)、事件对象(事件源)、事件流、事件冒泡、事件捕获、事件性能优化（事件委托[事件代理]、移除事件处理程序）、浏览器内核（常见的浏览器兼容问题）等。什么是事件(event)：注：其实事件一直都是存在的（不管有没有绑定...

发布博客于 5 年前

移动端 H5 常用META标签属性详解

1、移动端H5浏览器中页面常用meta配置：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum=1.0, user-scalable=no shrink-to-fit=no" />content属性值说明： width ...

发布博客于 5 年前

jquery.from.min.js

/ *！ * jquery.from.min.js *版本：3.51.0-2014.06.20 *需要jQuery的1.5版或更高版本 *版权所有（C）2014年M. Alsup *实例和文档：http://malsup.com/jquery/form/ *项目库：https://github.com/malsup/form *双麻省理工学院和GPL授权。 * https://github.com/malsup/form#copyright-and-license * /

发布资源于 5 年前

html、css、js文件加载顺序及执行情况

html、css、js文件加载顺序及执行情况

发布博客于 5 年前

你应该知道的HTML 5五大特性

摘要：HTML5技术中有这样5个特性，它们能够让你实现事半功倍的开发效果，它们分别是：DNS Prefetching、Link Prefetching、Download属性、Regular Expressions以及Datalist元素。HTML5的诞生为Web App以及移动App开发带来了许多新鲜有趣的JavaScript与HTML API。本文将介绍5个能够让你事半功倍的HTML

发布博客于 5 年前

原生JS 和 jQuery 通过url传递和接收自定义参数

一、传递参数页面参数传递方法1：通过a标签传递<a href="page/info.html?gid=1024&red=#5u6c86&img='./img/goods1.jpg'"></a>参数传递方法2：通过js方式传递<script>// 说明：参数传递说明 let 参数变量1 = './im...

发布博客于 5 年前

HTML5触屏设备单点触控事件

HTML5触屏设备的单点触控提供了touchstart，touchend，touchmove和touchcancel四种事件现在什么技术最火？HTML5！现在什么技术最时尚！还是HTML5！也许有泡沫和炒作的成分，但是不得不承认，这个世界上本就没有所谓的公平。多年来兢兢业业带给我们无数快乐痛苦和就业机会的Flash，在代表着众多巨头利益，从蹒跚学步起就被内定为太子的HTML

发布博客于 5 年前

纯JavaScript弹窗效果

纯JavaScript弹窗效果, 无任何兼容性问题，包括水平和垂直居对齐以及半透明遮照层，详细的代码注释一看就懂。

发布资源于 5 年前

js评分效果

js评分效果.box, .box ul { float: left; list-style: none; }.box li { width: 30px; height: 30px; display: inline-block; border: 1px solid gray; cursor: pointer; }.box .artcet { background: green; }

发布博客于 5 年前

HTML5 CSS3 响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。优点：面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点：兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折中性质的设计...

发布博客于 5 年前

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况[转载]

px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。(另外需注意chrome强制最小字体为12号，

发布博客于 5 年前

JS数组去重的各种方法

数组去重方法1： * 循环去重 arr.indexOf(); * 循环时判断新数组中是否存当前被循环的这个元素，如果不存在就向新数组中添加，存在则什么都不做 let arr = ['A', 'C', 'A', 'B', 'E', 'C', 'F', 'B', 'D', 'A']; ...

发布博客于 5 年前

JS每隔1秒输出一组新的随机数

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS生成随机数</title> <style type="text/css"> h1 { text-align: center; } s...

发布博客于 5 年前

Jquery 获取input是否被选中，并修改状态！

HTML代码：<fieldset id="checkBox"> <legend>复选框</legend> ————爱好： <label><input type="checkbox" name="" id="" value="1" data-par="上网" />上网，</...

发布博客于 5 年前

照片尺寸大小是多少厘米

1寸到6寸照片的尺寸各是多少厘米

发布博客于 5 年前

CSS3 background-attachment：属性

background-attachment :定义背景图片随滚动轴的移动方式取值: scroll | fixed | inheritscroll: 随着页面的滚动轴背景图片将移动fixed: 随着页面的滚动轴背景图片不会移动inherit: 继承初始值: scroll继承性: 否适用于: 所有元素HTML代码：<!DOCTYPE html><h...

发布博客于 5 年前

判断多个checkbox复选框至少选一个（提交时必须选择一个）

HTML代码：<h2>请选择您的爱好：</h2><form action="" method="post" id="form"> <label><input type="checkbox" name="hobby" value="上班" />上班</label> <label><i...

发布博客于 5 年前

CSS3的 transform属性，怎么才能让他同时执行多个不同动画（变换属性）效果

如果要给一个dom元素，同时设置多个不同的CSS变换(transform)属性时，在属性中间用空格隔开即可，旋转缩放扭曲等同时执行多个效果！div{ width: 100px; height: 100px; background: red;  transition: al...

发布博客于 5 年前

jq条形码+二维码生成+Canvas动态背景

可根据您输入的内容生成条形码或二维码，（Jquery条形码生成 + Jquery二维码生成 + HTML5 Canvas动态背景共3个页面.html）

发布资源于 5 年前

动态创建表格，更新、提交、循环获取表格中各种元素的数据并转换为JSON，数组的数据格式。

HTML代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>js表格操作</title></head><body> <h1>JS操作表格</h1> <h...

发布博客于 5 年前

点击动态创建表格、单行删除、全选、全部一键删除

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>js表格操作</title> <style type="text/css"> html, body { font...

发布博客于 5 年前

code128条形码、一维码生成

code128条形码、一维码生成，根据输入的内容，生成对应的条形码，格式类型为code128，code.js

发布资源于 5 年前

高性能Linux服务器构建实战：运维监控、性能调优与集群应用(完整)

高性能Linux服务器构建实战：运维监控、性能调优与集群应用(完整)

发布资源于 5 年前