xmh

  • 首页

  • 标签

  • 归档

  • 搜索

hash值自定义某元素定位时候遇到的问题和解决方案

发表于 2022-05-23 | 更新于 2022-07-06
  1. 问题: 在chrome访问一个带hash的url, 执行滚动到页面上存在的某一个元素的位置, 每当刷新页面会出现回滚的现象
  2. 解决方案: history.scrollRestoration = ‘’manual’, 把chrome自动记录改成手动

history-api-scroll-restoration
code:

1
2
3
4
if ('scrollRestoration' in history) {
#// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}

阅读全文 »

CSS浏览器hack

发表于 2022-05-11 | 更新于 2022-05-10

CSS检测浏览器

适用与Internet Explorer、Firefox、Safari和Chrome的更新版本

阅读全文 »

husky安装和配置

发表于 2022-03-01 | 更新于 2022-04-29

husky 文档

husky 安装

1
npm install husky --save-dev
阅读全文 »

js-监听元素DOMNodeInserted和DOMNodeRemoved

发表于 2021-12-25 | 更新于 2022-07-05

监听document元素:

$(document)
        .on('DOMNodeInserted', '.item-content .ajax-progress', function() {}) // 插入(DOMNodeInserted)
        .on('DOMNodeRemoved', '#edit-field-qc-publisher-button + .ajax-progress', function() {}) //删除(DOMNodeRemoved)
};

ajaxComplete监听触发ajax事件:

#ajaxComplete
  $(document).ajaxComplete(function (e) {
    const { activeElement } = e.target;
    if (activeElement.id === 'edit-back') {
        console.log(activeElement.text());
    } else if (activeElement.id === 'edit-code') {
        ...
    }
  });

  # ajaxSuccess 

normalize.css

发表于 2021-09-25 | 更新于 2022-02-25

软件简介

https://github.com/necolas/normalize.css/
Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。

安装

1
npm install --save normalize.css

应用

1
2
main.js全局引入
import 'normalize.css'
阅读全文 »

js-传入日期减去当前日期,得到剩余天数

发表于 2021-09-25 | 更新于 2022-02-25

传入日期减去当前日期,得到剩余天数:

const calculateDate = (days) => {
    const myDate = new Date();
    const myToday = `${myDate.getFullYear()}-${myDate.getMonth() + 1}-${myDate.getDate()}`;
    const date1 = new Date(days);
    // console.log('myToday', myToday);
    const today = new Date(myToday);
    // const date2=new Date(yyyy-MM-dd);
    const date = (date1.getTime() - today.getTime()) / (1000 * 60 * 60 * 24); // 不考虑闰年否
    return date.toFixed(0);
};

mixins.scss

发表于 2021-08-31 | 更新于 2022-03-09

mixins.scss

阅读全文 »

CSS3与CSS2 上下左右居中

发表于 2021-08-25 | 更新于 2022-02-25

css3 上下左右居中:

1. transform:translate(左右,上下)上下左右居中:

1
2
3
4
5
6
.video{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

2. flex (左右,上下)上下左右居中:

1
2
3
4
5
.container{
display: flex;
align-items: center;/* 垂直居中 */
justify-content: center;/* center左右居中, space-between两端对齐 */
}

css2 上下左右居中:

3. position:absolute, margin(左右,上下)上下左右居中:

1
2
3
4
5
6
7
8
9
.video{
position:absolute;
top:50%;
left:50%;
with: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
}

4. display: table(左右,上下)上下左右居中:

1
2
3
4
5
6
7
8
9
10
11
.box {
display: table;
table-layout: fixed; //ie
width: 100%;
height: 100%;
text-align:center;
}
.box div {
display: table-cell;
vertical-align: middle;
}

gulp

发表于 2021-07-25 | 更新于 2022-03-09

安装gulp

1
npm i gulp gulp-cli -g

在当前themes下编译:

1
2
gulp sass
gulp build
阅读全文 »

webpack性能优化--产出代码

发表于 2021-05-25 | 更新于 2022-05-12

webpack性能优化–产出代码

体积更小
合理分包,不重复加载
速度更快, 内存使用更少

阅读全文 »

12…6
xiaoManHua

xiaoManHua

web前端笔记

54 日志
13 标签
© 2022 xiaoManHua
由 Hexo 强力驱动 v3.9.0
|
主题 – NexT.Muse v6.4.1
本站总访问量 次 | 有人看过我的博客啦