ljinest

HTML页面中取代锚点自动滑动页面的一种方式scrollIntoView()文章目录HTML页面中取代锚点自动滑动页面的一种方式scrollIntoView()定义BooleanObjectbehaviorblockinline代码示例在用户界面中，经常使用锚点帮助用户跳转到页面的某个特定位置。锚点基于超链接的方式，在用户点击事件之后滑动页面。如果你觉得添加锚点和链接元素比较麻烦和不美观，可以尝试组件的scrollIntoView()方法。定义element.scrollIntoView();el

快速入门Flow.js前言最近在看React.js，可能大家知道在React中，大部分源码都是用Flow.js写的，有时候会看不懂是什么意思。所以阅读源码之前，还是有必要快速看一下Flow.js的语法的。简介那Flow.js是什么框架呢？其实它和最近几年非常流行的TypeScript类似，是一个静态类型检查器，我们知道JavaScript是一个弱类型语言，在大型项目、框架实行的过程中，这种弱类型特征会带来一些意想不到的Bug等风险，所以需要引入类型检查器，从根本上避免类型带来的Bug。Vue3.j

React入门之官方例子井字棋“Tic Tac Toe”强化功能的实现（详解，附代码）文章目录React入门之官方例子井字棋“Tic Tac Toe”强化功能的实现（详解，附代码）前言分点讲解显示落棋位置加粗当前选择的历史步骤改变棋盘的输出方式，让其不再是硬编码输出增加一个toggle按钮，能够让历史步骤显示的顺序变化。当有人赢了之后，高亮格子。如果没人胜利，则提示平局消息完整代码演示网址前言在Reactjs的这篇官方入门文档中，初学者会完成一个井字棋的小应用。在文档的最后，作者还给出了6个需求，分别

MDN Web文档 Array.prototype.flat() 扁平化数组的四个替代方案代码解析文章目录MDN Web文档 Array.prototype.flat() 扁平化数组的四个替代方案代码解析什么是扁平化标准方法替代方案后言注：本文为MDN标准Web文档中例子的解释，代码来自MDNArray.prototype.flat()。什么是扁平化将某一个数组的所有元素及子数组中的元素合并为一个新数组并返回。const arr1 = [0, 1, 2, [3, 4]];console.lo

【JS】立即调用函数表达式 IIFE 定义及三个使用场景文章目录【JS】立即调用函数表达式 IIFE 定义及三个使用场景定义使用场景防止变量污染给变量创建私有状态递归调用匿名函数定义IIFE（Immediately Invoked Function Expression）是立即调用函数表达式，它会定义一个方法并且立即调用该方法。(function () { var message = "IIFE";})();当然，包含参数的方法也是可以的，前面的圆括号中是函数的定义，而后面的圆括号

JS 提取字符串中的数字var str = "example12str933"var res1 = str.replace(/\D/g, '') // 第一种替代所有非数字 \Dvar res2 = str.replace(/[^\d]/g, '') // 第二种替代所有非数字 ^\dvar res3 = str.replace(/[^0-9]/g, '') // 第三种替代所有非 0-9 ^0-9var resArry = str.match(/\d+/)[index] // 数组// res

JavaScript中 Array.prototype.map() 使用的注意点文章目录JavaScript中 Array.prototype.map() 使用的注意点定义解读语法参数返回值特点与`foreach()`的区别容易犯的错误使用技巧一般方法在字符串上应用配合`querySelectorAll()` 应用参考链接如果读者对map()函数的定义很熟悉的话，直接跳到特点部分。定义map()方法创建一个新数组，并且这个数组中的每个元素是调用一次提供的函数后的返回值解读注意，在map()方法中

命令行中：# 模组安装路径npm config set prefix <PATH-TO-PREFIX># 缓存路径npm config set cache <PATH-TO-CACHE>注意，文件夹要事先创建：mkdir <FOLDER-NAME>cd <FOLDER-NAME>

前言今天敲代码的时候，遇到一个小问题。前端有两个输入框，一个是开始日，一个是结束日。现在需要判断用户输入的情况，大致上有以下四种：都没有输入只输入了一个都输入了，但是开始日大于结束日都输入了，且合法因为不同情况下的错误信息显示不同，所以要区分判断。我重点把目光放在了第二种。第二种情况的判断逻辑最简单的方法也是最直观的方法：if ((!start && end) || (start && !end))但是这样并不精简，优雅。群里有一位老哥提供了更加优

今年6月转部门、换项目之后开始使用VSCode，盘点一下每天都会使用，已经形成肌肉记忆的快捷键一览，如果有遗漏的、有用的快捷键，希望大家补充一下。快捷键内容[C] + B关闭/开启侧边栏[C] + J关闭/开启下方状态栏[C] + C在光标没有选择任何字符的情况下，复制光标当前行内容（自带换行符）[C] + X同上，剪切当前行[C] + F当前文档查询[C] + H替换文本[C] + YRedo[C] + W关闭当前窗口[

前言最近上班过程中，谷歌到了一个概念OTP，看到它的全称之后，我发现它是一个我们日常生活中已经离不开的东西：（One-Time-Password），顾名思义，一次性密码。恐怕最常见的可能就是我们动态登录账号的时候选择短信（SSM）验证账号。这个验证码就属于OTP。虽然目前工作中没有用到OTP，但是我还是决定了解一下这个概念，说不定以后什么时候就用到了。OTP概念首先我们要知道的是，OTP是MFA（Multi-Factor-Authentication）的一个实现模型。先简单了解一下MFA的概念，MFA

高亮效果：实现方法：打开VSCODE的设置界面（在左下角或者快捷键ctrl + ,）,在右上角打开 settings.json，见图第一个按钮。在settings.json中，找到"workbench.colorCustomizations"键，如果没有的话，自己在JSON文件中添加。找到之后，在键下添加如下属性与值："editor.selectionBackground": "#5eff0080"。具体颜色可以看你的喜好，这里再推荐给大家一个挑选颜色的网站：Color Hunt保存sett

项目中有可能会遇到not extensible的对象，这个时候我们只能拷贝一份对象，然后再我们新拷贝的对象中进行数据操作。以下为sample代码：var copiedData = [] // 用于储存拷贝的对象data.forEach(obj => { var newObj = {} // new一个新对象 for(let i in obj) { newObj[i] = obj[i] // 拷贝到新对象之中 // 在新对象中做一些数据操作

项目场景：开发中，后台传给前台了一串类似这样格式的日期-时间字符串：2020-09-10T07:36:51.000+0000直接显示出来肯定不符合需求，我们需要把它格式化成北京时间。问题分析：这串日期-时间其实已经有我们需要的所有信息了，我们一块一块地分析一下：2020-09-15，这个是日期。10:30:20.000，这个是精确到毫秒的时间。0000，这个是提示时区。Ｔ，提示日期与时间的分界线＋，提示时间与时区的分界线现在我们知道，如果我们直接parse这个字符串，得到的也不是

需求提要我们如果想写一个效果类似弹出框的组件，首先简单分析一下弹出框的几个特性：弹出框肯定位于当前页面的最顶端，并且在弹出框关闭之前，其他控件都无法点击、focus等。为了更好突出弹出框的效果，除了弹出框以外的部分，我们可以加上一个幕布（英文为backdrop）效果，让背景的元素模糊、半透明、变暗等等，让用户的注意力能够完全集中在弹出框之中。弹出前：弹出后：需求分析把弹出框设定到当前页面的最顶端很简单，我们很快就能想到用Z-index去实现，把Z-index设定到一个足够大的值（取

Vue 组件中5种Watch方式的使用解释watch是一个对象，这个对象的键是需要观察的表达式，值可以是直接方法、方法名、包含选项的对象等等，Vue实例会在实例化时调用$watch(), 遍历watch对象的每一个属性，并且观察。注意，本文不会阐述watch对象的具体实现源码，只是介绍watch对象键值的五种使用方式。格式：watch { { [key: string]: string | Function | Object | Array }}使用方式：最直接的，直接用方法作

需求背景在不用flex、grid等布局的前提下，有些时候我们希望将一个元素不占位定位到某一个地方，比如说居右，由于要求元素不占位，所以float: right也不能完成需求。解决方法有一个简易的解决办法，下面是样式sample：.absolute-right { position: absolute; right: 50%;}这边的right: 50%是父元素宽度的50%，相当于把这个元素置于父元素的中间，这边还需要注意的是考虑元素的width。这个方法不管屏幕分辨率是多少都是可以做到定位

这种情况大多数是因为元素绝对定位之后被藏在其他元素的后方了。就和ppt中的元素被置底一样，但是html中有些情况你还是能看到你的元素问题描述：某个点击元素被加上position: absolute属性之后发现没办法点击到了。原因分析：这种情况大多数是因为元素绝对定位之后被藏在其他元素的后方了。就和ppt中的图片被置底一样，但是html中有些情况你还是能看到你的元素，这种情况下我们要把这个元素置顶。解决方案：打开开发者工具，选择到你的元素，给这个元素的element style加上一个z-

之前一直在用Sublime里面的某个插件做文件对比，因为最近一直在用VSCode, 想看看有什么插件可以实现文件对比 + 同屏滚动的，看了一下VSCode自己就带有这个功能，本文为大家分享使用方法。打开项目文件夹，要保证你要对比的两个文件在一个VSCode窗口内（试了一下，两个Window里面的文件不能使用这个功能）选择第一个文件，右键，点击’Select for Compare’右键第二个文件，点击‘Compare with Selected’点击之后，就会有一个新的对比文件生成，在这个文件里

上回我们在demo项目中创建了学习Vue.js的第一个HelloVue.vue文件本篇介绍一些Vue的一些最基本、最核心的基础功能。它们出自Vue的官方文档Introduce小节，如果你对我的介绍有不懂的地方，可以跳转到原始文档中找寻答案。本篇文章包含以下Vue.js功能最基本实现代码：*注意，它们是在项目中的，与官方文档有稍许不一致。v-bind绑定元素属性条件与循环处理输入、事件监听组件化v-bind绑定元素属性vue.js中提供了一系列特殊属性，它们带有v-前缀，被称作指令（d

在我们使用input等标签的时候，也许会用到一些auto-complete的功能，让用户的体验更加完善，如根据用户输入的内容来自动判断、填充。case1 预测问题下例为我在百度上输入“为什么”之后，百度自动跳出的autocomplete内容，应该是最近百度用户问的最多的问题。case2 输入历史有时候一个输入框可能是用户之前输入过很多次的、相同的内容（如用户名、密码等基本不变的信息），这个时候，autocomplete是节省用户输入的时间，自动填充信息。下例为bing搜索上的历史记录，也是aut

上一节把一个Vue的完整目录及其意义记录了一下，接下来就来写一个我们的第一个Vue组件，一个最简单的Hello Vue我们在上回说的components文件夹下面新建一个HelloVue.vue文件。然后在里面写上下面的代码：<template> <div> <p>Hello, Vue!</p> <p>{{msg}}</p> </div></template><script

因为觉得react的设计哲学不太对我的口味，转到vue玩玩，初始化一个vue项目之后（用vue create/ vue init 都可以）我们得到的项目目录是这样的：buildbuild.js > 生产环境构建脚本check-versions.js > 用来检查npm，node.js版本utils.js > vue开发环境的webpack相关配置文件vue-loader.conf.js > 配置了css加载器以及编译css之后自动添加前缀webpack.*.co

CSS IS AWESOMEHTML<body><p lang="en">CSS <em>is</em> awe&shy;some </p></body><em>为强调标签，当前HTML会渲染成斜体。&shy;为软连接符号，当字体一行放不下时，会在软连接符号处加一个-并且换行。CSSbody { font-family: Helvetica, Arial, sans-serif;

HTML、JS、CSS实现果冻按钮效果效果图：参考代码仍然是yuanchuan前辈的codePen项目果冻按钮下面开始解读HTML：<div id="boxes"> <div style="--color: #f44336"></div> <div style="--color: #e91e63"></div> <div style="--color: #9c27b0"></div>

JS、CSS实现matrix rain效果这个是我在codePen上看到的一个国内前端前辈写的。今天让我们来读一下他的代码把。样式文件style.css首先看一下style.css样式文件html, body { height: 100%; margin: 0; overflow: hidden;}overflow:hidden 是指在body中的元素溢出时，选择hidden隐藏掉。overflow还有其他的值：值描述visible默认值。内容不会被

Redux is simple.Using normal object to describe app state. For example, a app called ‘TODO’ s state might be like this:State: { todos: [ { text: 'Eat food', completed: true }, { text: 'Exercise', completed: false } ], visibilityFi

Post 2 Logo.js这个组件是进入界面的Logo效果，具体效果是鼠标离开Logo区域，点都分散鼠标移动到Logo区域，点聚集成React（或者任意形状）文件头部分import React, { Component } from 'react'// import ReactDOM from 'react-dom'import { connect } from 'react-redux'import TweenOne from 'rc-tween-one'import ticker

阅读代码 React + redux后台系统最近在自学React，在git上找到一个demo，打算用日志的形式记录阅读代码的过程。使用的技术： React webpack redux antd axios less本人对前端的知识：HTML CSS JS 都是基础阶段。 在公司项目中写过简单的页面。对进阶的知识涉猎有限。本次希望以一边阅读代码一边在不懂的地方跳出进行知识补充的方法学习。因此遇到不知道的地方我会用跳出关键词暂且离开代码片段。如果有理解不对的地方希望大家能够指正教导。####项目结