自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

J1ong的博客

心不妥协,行不受阻!

  • 博客(25)
  • 收藏
  • 关注

原创 Vue+Express+Mysql的电影售票管理项目

项目地址:https://github.com/J1ong/FilmSys(Github上附有完整使用说明,欢迎大家star)介绍这是一个由个人开发影院售票App,App采用的是当前较为流行的Vue组件框架和当前较火的轻量级NodeJs后台中的Express框架,技术上通过视口、媒体查询和相对单位能很好地适配不同像素、不同分辨率的移动终端。App实现了查看信息、选座购票、评论点赞、收藏...

2019-07-15 17:04:39 3429 26

原创 设置网页特定字体

1、首先得有相关字体的文件,加入到项目中2、配置引入字体的文件// 引入数字字体@font-face { font-family: 'digits'; src: url('../assets/fonts/digits.ttf') format('truetype');}3、使用4、效果

2022-03-14 17:24:34 643

原创 绝大多数浏览器滚动条样式兼容性写法

* { scrollbar-color: #ffffff rgba(0,0,0,0.4); /* 滑块颜色 滚动条背景颜色 */ scrollbar-width: thin; /* 滚动条宽度有三种:thin、auto、none */}/*滚动条样式*/*::-webkit-scrollbar{ width: 8px;}*::-webkit-scrollbar-thumb{ border-radius: 5px; height: 50px; background-colo

2021-12-02 09:06:43 1108

原创 快速设置网站标题旁的logo

<linkrel="icon"href="yn.png"type="image/x-icon"><linkrel="shortcuticon"href="yn.png"type="image/x-icon">

2021-03-22 16:22:19 229

原创 display、visibility和opacity隐藏元素的区别

前言:display:none,visibility:hiddren和opacity:0在某种程度上可以实现对html元素的隐藏,但还是有所区别的,具体结合业务场景应用。隐藏元素的方法隐藏后是否占据页面空间隐藏后是否还产生交互(如hover,click等)display:none否否visibility:hiddren是否opacity:0是是...

2020-07-21 16:10:04 261

原创 Vue电影项目

项目地址:https://github.com/J1ong/FilmSys介绍这是个人开发的电影售票管理项目,采用的是较为流行的Vue框架和Node的Express框架。前端页面展示:总体展示购票流程后台展示:登录页管理系统页项目说明整体项目目录├── film 前端页面项目文件├── film_admin 后台管理系统├── film_api 前后台接口文件├── db_film.sql 数据库文件拉取项目#依次执行以下命令git clone https://git

2020-06-03 09:49:48 5569 52

原创 CSS让元素水平垂直居中的常用方法

一、定宽居中方法1position:absolute;top:50%;left:50%;margin-top:-50px; /*假定元素高为100px*/margin-left:-50px; /*假定元素宽为100px*/方法2position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;二、不定宽居中方法1position:absolute;top:50%;left:50%;transform:transl

2020-05-19 16:11:19 179

原创 前端性能优化汇总

一、页面级别1.减少页面请求资源大小或次数(1)压缩合并css、js,css合并成1个文件,js合并成一个文件(2)使用字体图标和svg替换传统的png图片(3)图片懒加载(4)使用雪碧图或精灵图(5)减少cookie的使用(6)前后端数据交互是尽可能使用json格式传送(7)合理使用keep-alive(8)避免使用iframe(9)使用localStorage、sessionStorage存储一些简单的数据2.内联脚本位置,防阻塞二、代码级别1.减少闭包的使用2.减少DOM操

2020-05-19 14:35:45 127

原创 Git修改commit提交信息

对于修改git上commit的提交信息,我们可以分两种情况进行处理。1、已经commit但未push到git上git commit --amend输入命令后就可进入编辑界面进行修改了修改细节:在英文输入法状态下输入i进入编辑模式,修改完后还是英文输入法状态按Esc退出编辑状态,输入:wq保存并退出2、已经commit并push到git上git rebase -i HEAD~3这行...

2019-12-04 11:17:58 3261

原创 清除已设置的淘宝镜像

设置淘宝镜像命令的是:npm config set registry https://registry.npm.taobao.org清楚淘宝镜像命令即重新设置原来的即可,命令如下:npm config set registry https://registry.npmjs.org...

2019-11-13 16:51:10 1761

原创 React快速上手之react安装

一、Node.js的安装Node.js压缩包及源码下载地址,根据你们的系统和需求选择合适的进行下载即可,安装步骤基本都是下一步下一步即可。二、淘宝镜像安装为什么要用淘宝镜像呢?答:因为国内使用 npm 速度很慢,有时候在在拉取各种资源时,往往会非常慢,一直卡在那不动,使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm就好很多了:npm install -g ...

2019-11-13 15:08:41 291

原创 Vue中快速上手ECharts绘制图表

npm安装ECharts使用如下命令通过 npm 安装 EChartsnpm install echarts --save 绘制简单图表绘制图表之前我们需要准备一个具备高宽的 DOM 容器。<template> <div id='app'> <div id='echart' style='width: 200px; height: 200px'...

2019-09-30 11:53:21 574

转载 chrome调试-性能分析performance

1、performance页面性能分析本文将介绍如何使用chrome devTool的performance来对页面进行性能分析(1)操作过程1、进入匿名模式保证分析结果少收到其他插件的干扰(windows可使用快捷点 ctrl + shift + N)2、确保screenshots checkbox是选中的,然后点击controls,开始记录(windows快捷键 shift + ...

2019-09-26 16:12:25 1566

原创 Js中的防抖与节流

首先,我们以window.onresize事件为例,来看一下未做防抖的情况。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...

2019-09-03 11:40:55 264

原创 Babel 将 ES6 转成 ES5 的思路

Babel 是如何把 ES6 转成 ES5 呢,其大致分为三步:将代码字符串解析成抽象语法树,即所谓的 AST 对 AST 进行处理,在这个阶段可以对 ES6 代码进行相应转换,即转成 ES5 代码 根据处理后的 AST 再生成代码字符串...

2019-08-26 15:51:15 280

原创 Vue封装移动端日期选择器组件

npm地址:https://www.npmjs.com/package/vuejs-mobile-datepicker Github地址:https://github.com/J1ong/vuejs-mobile-datepicker(欢迎Star)效果图:日期选择器组件功能在线演示地址https://1g703.csb.app(为有更好的体验,请在浏览器上切换到手机模式或在手...

2019-08-02 15:37:46 8036 5

原创 Vue error:Props with type Object/Array must use a factory function to return the default value.

Invalid default value for prop "defaultDate": Props with type Object/Array must use a factory function to return the default value.解决:

2019-08-02 15:11:46 1818

原创 如何去除input内有数字与字母的时候出现红色波浪线

当input框内有数字与字母的时候出现红色波浪线如图,解决在input中的属性上加spellcheck =“false”就行了spellcheck,HTML5 支持的属性,用true和false来设定是否对用户输入的文章内容进行拼写检查。拼写检查结果的显示方法交给浏览器自己定义,比如Opera会在单词下面划出红色的波浪线。...

2019-07-25 17:13:06 7444

原创 修改Git提交说明信息

如果你发现,你commit到Github上的说明信息不准确或者不完整,想做修改。那应该怎么做呢?首先我们可以分两种情况去处理:1.最近一次提交如果是对最近一次的提交信息做修改,我们可以在命令行输入我们就进入了vim编辑器,对我们的提交说明信息进行修改,带#行表示注释,我们所做的就是修改第一行的内容,按下i进入编辑状态,修改提交说明信息。修改完成后按Esc退出编辑状态,...

2019-07-24 14:24:20 3047

原创 都在用的Flex布局神器

一、Flexdisplay: flex; //将对象作为弹性伸缩盒展示display: -wekit-flex; //webkit内核浏览器上使用需加上前缀dispaly: inline-flex // 将对象作为内联块级伸缩盒展示dispaly: flex || inline-flex //兼容写法二、容器属性flex-direction: row | row-rever...

2019-07-17 12:35:47 878

原创 微信小程序动画其实很简单

在小程序中,通常可以使用CSS渐变和CSS动画来创建简易的界面动画。同时,还可以使用 wx.createAnimation 接口来动态创建简易的动画效果。这里我们主要介绍一下使用微信wx.createAnimation 接口来创建动画效果。1.创建动画实例//js文件this.animation = wx.createAnimation({ duration:3000,...

2019-06-18 16:27:17 448

原创 CSS3 实现文字渐变色

直接上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-size: 60px; ...

2019-06-13 15:59:13 42377 4

原创 微信小程序组件绑定事件该如何传参

小程序在组件上绑定事件后,传递参数的方式不同于前端开发其他场景中直接加参数的方式,小程序在参数的传递时,采用事件对象的自定义属性的方式,具体实现如下:wxml:<view class="normal" bindtap="switchMovieTab" data-flag="{{true}}">热映</view>js:switchMovieTab(e){...

2019-06-12 17:15:08 4711

原创 如何快速把本地项目上传到GitHub

1.首先你得需要有一个github账号和git工具,没有的同学要先注册和安装。github注册地址:https://github.com/join?source=logingit工具下载安装地址:https://git-scm.com/downloads2.登录成功后来到首页,我们在右上角可以看到有一个+号下拉列表,点击选择New repository创建一个仓库。3.我们填写...

2019-06-11 14:34:18 142

原创 记录

Let's start! ——记录一下,从今天开始写博客!...

2019-06-10 16:42:03 125

空空如也

空空如也

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

TA关注的人

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