xmh

  • 首页

  • 标签

  • 归档

  • 搜索

js-input

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

input只能输入数字与小数点并且是0.25的倍数:

$('#input').on('keyup', function() {
      const value = $(this).val();
      let replaceVal = value.replace(/[^0-9.]/g, '');//输入的值只能为数字与小数点
      if (replaceVal.length === 1 && replaceVal === '0') {//第一位数字不能为0,为0时自动清空
        replaceVal = '';
      }
      $(this).val(replaceVal);
      //这行对数据+字母无效: const regex = /\b[0-9]+\.(?:25|5|75)|(?<!\.|\d)[1-9]\d*(?!\.)/;
      // if (!regex.test(replaceVal)) {

      if (replaceVal % 0.25 !== 0) {//输入的数字必须是0.25的倍数
        $('.error-msg').html(Drupal.t('Please enter a multiple 0f 0.25.'));
      }
  })

图片按比例设置

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

图片按比例设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
mixin img-fit() {
object-fit: cover;
object-position: 50% 50%;
// font-family: 'object-fit: cover; object-position: 50% 50%';
width: 100%;
height: 100%;
}

%img-fit {
@include img-fit();
}

.responsive-media {
display: block;
overflow: hidden;
padding: 0;
position: relative;
background: transparent;
z-index: 1;
img,
picture,
iframe,
embed,
object,
video {
@extend %img-fit;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
}

@mixin responsive-ratio($x,$y) {
height: 0;
padding-bottom: percentage($y / $x);
}
.responsive-media{
@include responsive-ratio(2, 3);//图片2:3
}
阅读全文 »

mask-image 灰色hover时是彩色, linear-gradient 线性渐变创建图像

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

1.svg做背景,默认是灰色,hover时是彩色:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.logo {
display:inline-block;
width: 66px;
height: 25px;
background-color: gray;
mask-image: url(../images/logo.svg);
mask-position: center bottom;
mask-repeat: no-repeat;
}
&:hover,
&:focus {
.logo {
background-color: #00297a;
}
}
阅读全文 »

css3-2021杂项

发表于 2021-02-10 | 更新于 2022-03-09

背景有透明度%:

1
background-color: #55585a7a;//可以google浏览器开发才工具调

左窄右宽的边框做背景:

1
2
3
.polygon-top::before {
border-width: 1.5rem 50vw 1.5rem 50vw;
}

google开发者工具截图

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

截整张网页的图:

1
2
3
1. 打google浏览器开发者工具
2. ctrl+shift+p 输入capture
3.选择:Screenshot Capture full size screenshot

hexo-跨域方法

发表于 2021-01-27 | 更新于 2022-02-25

hexo 跨域方法

案例demo

1.安装http-proxy-middleware:

1
npm install --save-dev http-proxy-middleware
阅读全文 »

git 指定从其他分支拉取(复制)commit,git cherry-pick

发表于 2020-12-25 | 更新于 2022-02-25

git cherry-pick 复制commit

1
git cherry-pick c677c62e58baa

主题界面的暗/光模式开关 prefers-color-scheme

发表于 2020-12-20 | 更新于 2022-02-25

一个暗/光模式开关prefers-color-scheme:

light
表示用户已告知系统他们选择使用浅色主题的界面。
dark
表示用户已告知系统他们选择使用暗色主题的界面。
译者注:“未得知”、“已告知”等用语,英文原文如此。
“未得知”可理解为:浏览器的宿主系统不支持设置主题色,或者支持主题色并默认为/被设为了未设置/无偏好。
“已告知”为:浏览器的宿主系统支持设置主题色,且被设置为了亮色或者暗色。

目前,若结果为 no-preference,无法通过此媒体特性获知宿主系统是否支持设置主题色,或者用户是否主动将其设置为无偏好。出于隐私保护等方面的考虑,用户或用户代理也可能在一些情况下在浏览器内部将其设置为 no-preference。

阅读全文 »

git rebase --continue 解决冲突后代码合并

发表于 2020-11-25 | 更新于 2022-02-25

解决冲突,代码合并

1
2
3
4
git rebase develop
解决冲突后:
git add 冲突修改的文件
git rebase --continue

如果git rebase –continue退不出来,关闭窗口,再执行:

1
2
3
4
5
git config core.editor vim
git rebase --continue
按Esc
:wq
回车

git reset 撤下commit或push

发表于 2020-06-22 | 更新于 2022-02-25

取消commit, (未push)

1
git reset a517075c66 // a517075c66为commit之前的提交ID

撤下上1次push提交,不留历史记录(记得备份)

1
2
3
1. git log 
2. git reset --hard a517075c66cec4f44c336//回退到a517075c66cec4f44c336版本, 这一步之前一定要保存好文件,之后就什么都没有了
3. git push origin feature/CITC-99 -f //强制push <> -f,不强推会冲突,推不上,必须强推

git reset –hard ID之后,本地文件清空找回方法(如果之前每次提交之前都有git stash的话,按以下步骤可以找回)

1
2
3
4
5
6
7
1. git fsck --lost-found
2. 找到“悬空 commit ID”,忽略“悬空 blob”,
3. git show 7480ed4bba,从上到下,一个个ID找下去,直到找到文件为止
4. 找到后,git merge 7480ed4bba, 退出
5. git stash,再次备份文件,把文件重命名,使git reset --hard后不被丢失
6. 再次git reset --hard 6bd3af08e008ff 恢复到撤消之前的代码,无影无踪;
7. 手动把备份的文件恢复
123…5
xiaoManHua

xiaoManHua

web前端笔记

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