y1238r的博客

原创 js方法的应用（前端写法）

1.获取地址栏上某个参数值；2.转换带T的时间格式；3.时间戳转换成，YYYY-MM-DD HH:MM:SS格式；4.计算两个时间相差的天、小时、分、秒；5.获取字符串中的数字和运算符，并分别组成新的数组；6.百度地图经纬度转腾讯/高德

原创 正则表达式的应用（前端写法）

匹配字符串中，a标签的href值

原创 刷题遇到的问题

1、变量提升与函数声明；2、for循环中let、var和异步的使用

原创 前端小知识

1.禁止在浏览器上赋值文字；2.滚动条滚动到页面顶部；3.js获取地址栏上某个参数值；4.使用正则表达式匹配字符串中a标签的href值；5.禁止原生input标签，按下回车键自动打开下载弹窗；6.从字符串中，找出a标签的href值

原创 前端命名及注释规范（仅供参考）

在开发过程中，每个人的开发习惯都不一样。约束代码的命名规范，能更好的理解代码，提高开发效率，也能让整个项目结构更加清晰、整洁。

原创 点击左右箭头滑动导航栏，动态隐藏/显示左右箭头

1、 点击左箭头，导航栏向左滑动。当导航栏滑动到最左边时，隐藏右箭头；2、 点击右箭头，导航栏向右滑动。当导航栏滑动到最右边时，隐藏左箭头；3、点击导航A，导航A高亮显示。

原创 windows方法和属性

介绍了window的方法和属性，

原创 屏幕尺寸及媒体查询常见用法

介绍常见的pc端、移动端分辨率，媒体查询的常见用法

原创 动态添加/删除css文件

动态添加、删除css文件

原创 vscode，解决ESLint与Prettier冲突问题

vscode，如果项目遵循eslint规则，使用prettier插件格式化，两者会冲突。主要思想：解决eslint和prettier冲突问题。

原创 css图片不变形显示

图片在页面上，不变形显示。采用object-fit属性、transform属性实现

原创 css文字处理（溢出、折行）

css，文字单行省略、多行省略，文字折行写法

原创 vsCode运行到浏览器，中文乱码

vscode运行到浏览器，页面出现中文乱码问题

原创 vscode保存代码，浏览器自动刷新页面

介绍vscode编辑器，保存代码，自动刷新浏览器页面的2种扩展方式。即Live Server和Preview on Web Server扩展。

原创 前端实用的工具网站

推荐适用于前端的一些工具网站

原创 A页面跳转tabBar页面，并刷新tabBar页面数据

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

原创 promise.all技术分享

1、说明Promise.all() 方法接收一个promise的iterable类型的输入，并且只返回一个Promise实例， 成功返回的结果是一个数组。注：当所有的promise执行成功后，则成功；当某个promise执行失败，则失败。Promise.all([]) .then(() => { // 成功的回调 }) .catch(() => { // 失败的回调 });2、适用场景适用处理多个异步任务，且某些异步任务完成之后，

原创 上传的图片加水印

1、步骤说明第一步：uni.chooseImage，获取图片的临时路径第二步：uni.getImageInfo，获取图片的宽高作为画布的大小第三步：uni.createCanvasContext，创建 canvas 绘图上下文，在画布中画文字水印第四步：uni.canvasToTempFilePath，把当前画布指定区域的内容转换成指定大小的图片第五步：页面渲染2、代码<template> <view class="upload"> <view cla

原创 vuex模块化的写法及用法：state、getteer、mutations、actions

文章目录一、main.js：挂载二、index.js：导出 store三、app.js：导出app模块四、结构五、具体使用1、state2、getters3、mutations4、actions一、main.js：挂载import store from './store/index';Vue.prototype.$store = store;二、index.js：导出 storeimport Vue from "vue";import Vuex from "vuex";import app

原创 使用nvm遇到的问题

一、切换node版本出现乱码1、问题截图2、解决方法(1) 情况一描述：安装nvm的路径中，带有中文或者空格。方案：去掉路径中的中文或空格 ，重新输入切换命令。(2) 情况二：描述：使用权限不够。方案：进入C:\Windows\System32，找到cmd.exe并右击它，选择“以管理员身份运行”，输入切换命令，node版本切换成功。(3) 情况三描述：安装了最新的nvm版本，在此我是指1.1.9版本。方案：降低nvm版本。下载低版本的安装包，重新安装nvm，我安装的是1.

原创 nvm的介绍、安装、常用命令

文章目录一、介绍二、安装nvm1、下载nvm安装包2、安装nvm三、nvm常用命令一、介绍nvm 是node.js的版本管理器，可以查看已安装的node版本、安装指定版本的node、切换正在使用的node版本等。二、安装nvm1、下载nvm安装包(1) 下载地址https://github.com/coreybutler/nvm-windows/releases/tag/1.1.7(2) 文件说明nvm-noinstall.zip：绿色免安装版，使用时需进行配置nvm-setup.zip

原创 uni-app 获取用户的openID和基本信息

1、前提条件：找到小程序的id和密钥在微信公众平台，https://mp.weixin.qq.com/，找到小程序的id和密钥2、代码展示（1）uni.login：获取用户的登录凭证。https://uniapp.dcloud.io/api/plugins/login?id=login（2）uni.request：发送网络请求，通过登录凭证获取用户的openID。https://uniapp.dcloud.io/api/request/request?id=request（3）请求接

原创 VSCode适用的一些插件及设置

插件安装：点击扩展图标，输入框输入插件名，选择相应的插件，点击“安装”。1、Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code作用：将VSCode的界面设置成中文显示2、open in browser用处：在VSCode中修改代码，浏览器自动刷新3、Git Graph作用：查看历史提交人、提交时间、代码详情等信息.........

原创 学习typescript遇到的问题

1、在vscode下运行ts(1)安装typescript：npm install -g typescript(2)在vscode商店安装Code Runner(3)运行ts2、console.log在控制台下报错在vscode控制台下，运行 npm install -D tslib @types/node命令

原创 vue-父子组件间的传值、父组件调用子组件的方法或变量

一、目的使用组件，能减轻后期维护项目的成本，更有利于维护和开发项目。二、父组件传值给子组件1、步骤（1）父组件的写法（2）子组件的写法2、结果

原创 前端-可视化创建vue项目

注：以下操作是在已安装脚手架的基础上进行一、打开可视化界面第一步，视窗键+R，打开“运行”窗口，输入“cmd”，第二步，在命令行界面中，输入vue ui，打开可视化界面，如下图所示。二、创建vue项目1、打开创建项目界面在Vue项目管理器界面中，选择“创建”选项卡，选择保存项目的路径，点击“在此创建新项目”按钮。如下图所示。2、填写详情的相关信息（1）填写项目的名称（项目名只能是英文，不能是中文）（2）选择包管理器（npm、yarn、pnpm，常用npm）（3）选择是否初始化git仓

原创 前端-es6中函数的默认参数值和函数的剩余参数

1.函数的默认参数值即当函数调用时，函数在没有传值或者传的值是undefined的情况下，函数会使用默认参数值。代码如下：function defaultParam(a = 1 ,b = 2){ console.log(a+','+b)}defaultParam(undefined,4)代码说明：结果为1,4。其中1和2就是此函数的默认参数值。函数调用时，a获得的值是undefined，所有a就使用了默认参数值，a为1；b传了有效的值给函数，所有b就使用了函数调用传过去的值，b为4。2.函数

原创 获取对象属性值的两种方式

原创 前端-当元素高度大于滚动条到容器顶部的高度时，将该元素变为固定定位

一、思路通过js获取元素的高度；当页面触发滚动条事件时，动态获取滚动条的scrollTop；元素高度与滚动条scrollTop比大小。元素高度 <= 滚动条scrollTop时，将元素设置为普通流；元素高度 > 滚动条scrollTop时，将元素设置为固定定位。二、代码1.html<header> <span>零度漫画</span></header>2.cssheader{ display: flex; w

原创 前端-语义化标签

一、HTML5页面结构为了让文档结构更加清晰，HTML5增加了<header>、<nav>、<article>、<section>、<aside>和<footer>等标签作为区块元素。二、语义化作用1.使用html语义化，能使页面结构更加清晰，便于解析。2.有利于SEO。搜索引擎爬虫依赖于html标签来确定上下文和关键字权重。3.在没有css样式的的情况下，页面也能正确清晰的呈现。4.有利于各种设备解析，如盲人阅读器。5

原创 前端-浮动元素的作用

一、文字环绕1.文字说明浮动元素会脱离网页文档，会与其他元素发生重叠，但不会与文本内容发生重叠2.代码div:nth-child(1){ width: 50px; height: 50px; float: left; background: greenyellow;}div:nth-child(2){ width: 200px; height: 100px; background: red;}<div></div><div>

原创 css清除浮动的方法

解决因子元素浮动，造成页面塌陷的问题。即介绍清除浮动的几种常用方法

原创 前端-html元素居中

方法一：针对普通文档流div{ width: 200px; height: 200px; background: lightslategray; margin: 0 auto; }<body> <div></div></body>方法二：针对绝对定位.content{ position: absolute; width: 100px; height: 100px; ba

原创 链接样式顺序：link、visited、hover、active

1、介绍a:link - 正常，未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻当设置为若干链路状态的样式，也有一些顺序规则：a:hover 必须跟在 a:link 和 a:visited后面a:active 必须跟在 a:hover后面2、cssa:link { color: gray;}a:visited { color: red;}a:hover { color: green