工作中遇到的一些问题以及解决的办法 前端 JS 正则
前言
前端
一、JS
1.时间
获取当地时间
this.state.date.toLocaleTimeString() 获取当地时间
/*
一定注意区分:【js语句(代码)】与【js表达式】
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
下面这些都是表达式:
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码):
下面这些都是语句(代码):
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}
*/
二、正则表达式
常用的正则表达式
不包含汉字 ^[^\u4e00-\u9fa5]+$
只能输入汉字 [\u4e00-\u9fa5]+
三、cmd以及终端简单命令
常用的命令
在文件夹的目录搜索框输入cmd 可以直接到cmd的对应位置
cmd窗口命令
dir 列举文件
cls 清空
cd 进入目录
vscode终端命令
ls 列举文件
clear 清空
pwd 显示当前工作目录
cd 切换文件路径
exit 结束会话
:q 退出
四、npm
下载依赖
npm install @autolog --save 下载依赖并添加到json 中
五、锚点定位
下载依赖
用a标签,在href属性中写入DIV的id
或者在js事件中通过window.location.hash="to"跳转
<!DOCTYPE html>
<html>
<head>
<style></style>
</head>
<body>
<h2>
<a href="#to">to div1</a>/h2>
<div id="to">div1</div>
</body>
</html>
不改变URL通过页面定位的方式
1: 用animate属性,当点击锚点后,页面滚动到相应的DIV
import React, { Component } from 'rax';
import { View } from 'ace-element';
import $ from 'jquery';
import './index.less';
class Mod extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
window.addEventListener('scroll', this.onscroll)
}
onscroll = () =>{
var scrollT = document.documentElement.scrollTop||document.body.scrollTop;
// 导航
var quickMenu = $('.service-nav-item');
// 需定位到的锚点位置
var quickLayer = $(".louti");
// 60 代表是需要去除的高度 如固顶的导航条
var spaceTop = 60;
if(scrollT >= 430 ){
$('.service-nav-container').addClass('fixed');
}else {
$('.service-nav-container').removeClass('fixed') //动态删除class属性
}
var wTop = $(window).scrollTop();
var space = [];
wTop = wTop + spaceTop;
quickLayer.each(function(i,t){
space.push($(t).offset().top)
});
var flag = 0;
var len = space.length;
for (var i = 0; i < len - 1; i++) {
if (space[i] <= wTop && space[i + 1] >= wTop) {
flag = i;
break;
}
}
if (wTop - space[flag] > space[flag + 1] - wTop
) {
flag += 1;
}
if (wTop > space[len - 1]) {
flag = len - 1;
}
quickMenu.eq(flag).addClass('active').siblings().removeClass('active');
}
a = (e,href) => {
const t = $(".service-nav-container");
console.log(e);
$(`#${href}key`).addClass('active');
$(".service-nav-item").not(`#${href}key`).removeClass('active');
const h = t.height()-1;
$("html,body").stop().animate({
scrollTop: $(`#${href}`).offset().top - h
}, 500)
}
render() {
const { navList = [] } = this.props;
return (
<View className="service-nav">
<View className="service-nav-container">
{navList.map((item) => {
return (
<span className="service-nav-item" id={item.navHref + 'key'} onClick={(e)=>{this.a(e,item.navHref)}}>{item.navName}</span>
)
})}
</View>
</View>
);
}
}
export default Mod;
2 用js的srollIntoView方法,点击a1页面跳转到a2
document.querySelector("#a1").onclick = function(){
document.querySelector("#a2").scrollIntoView(true);
}
总结
滚轮监听事件
document.documentElement.scrollTop = KaTeX parse error: Expected 'EOF', got '#' at position 3: (`#̲{href}).offset().top; document.body.scrollTop = $(
#${href}`).offset().top;
问题:document.documentElement.scrollTop 不起作用
原因 因为body html的高度是100% 滚轮是另外一个区域的滚动 所以不起作用
四、转义字符
https://tool.oschina.net/commons?type=2
🔚
加油