一个爱听歌的搬砖工

在react项目中，因为有用到css动画效果给一个图片无限旋转360度，代码如下：

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

@keyframes rotatecm{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
@-webkit-keyframes rotatecm{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
.s-rotate {
  animation: rotatecm 3s linear infinite;
  -webkit-animation: rotatecm 3s linear infinite;
  -moz-animation: rotatecm 3s linear infinite;
  -o-animation: rotatecm 3s linear infinite;
}

页面已经展示出s-rotate这个类的代码但是动画就是不执行，排查了半天定位到是不是less的问题，因为自己有测试在w3school里动画是可以生效的；看了下页面源码，研究了一下发现是因为我配置了css module的原因，动画名被hash了但是引用却没有引用已被hash的动画名，修改一下代码：

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

:global(.s-rotate){
  @name: ~`'rotatecm'`;
    @keyframes @name{
      from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
    }
    @-webkit-keyframes @name{
      from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
    }
    animation: @name 3s linear infinite;
    -webkit-animation: @name 3s linear infinite;
    -moz-animation: @name 3s linear infinite;
    -o-animation: @name 3s linear infinite;
}

最近在做校招网站的时候有用到video标签，ios里面默认全屏播放，这边产品不想全屏，解决办法：

1

<video src="media/demo.mp4" id="video" poster="images/demo.jpg" preload width="100%" controls webkit-playsinline></video>

在ios15以上的版本中还有一个bug就是设置了video标签的poster时，视频播放有声音，画面不动。去掉poster就可以正常播放，我这边给的思路：
判断在安卓系统中正常走poster，在ios中给不使用poster属性增加dom元素，用定位直接铺在视频上。层级z-index给个-1就可以了，不需要做其他操作。注（如果安卓跟ios都用这个方法因为层级问题安卓会有层级bug所以分开判断）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="m-video">
  <video
    controls
    controlsList="nodownload"
    x5-playsinline
    playsinline="playsinline"
    x5-video-player-type="h5"
    x5-video-player-fullscreen="true"
    webkit-playsinline="webkit-playsinline"
    x-webkit-airplay
    x5-video-orientation="portraint"
  >
    <source
      src="demo.mp4"
      type="video/mp4"
    />
  </video>
  <span class="m-img">
    <img src="demo.png" />
  </span>
</div>

出于安全考虑，普通页面直接执行window.close()时不会生效，控制台会出现如下警告：

1

Scripts may not close windows that were not opened by script.

只有那些通a标签或者window.open()打开的页面才支持关闭，为什么这么规定呢？可能是直接输入地址访问的页面可能比较重要，减少被恶意JS攻击的可能性吧，所以规定只有用脚本（或代码）打开的页面才能用脚本关闭。

IE和火狐还未测试，Chrome已没问题。

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

// 关闭页面
closeCurrentPage() {
  const ua = window.navigator.userAgent;
  if (ua.indexOf('MSIE') > 0) {
    if (ua.indexOf('MSIE 6.0') > 0) {
      window.opener = null;
      window.close();
    } else {
      window.open('', '_top');
      window.top.close();
    }
  } else {
    window.opener = null;
    window.open('', '_self', '');
    window.close();
  }
}

还有种方法通过a标签的方式去操作

1

<a href="javascript:window.close()">关闭</a>

最近在做后台管理的时候有个导出记录的功能，我这边踩了个坑。后台接口是以流的形式把数据给我们，我这边是用 Blob 对象进行下载。如果不了解 Blob 的小伙伴可以查阅一下相关资料。我们来看一下用法：

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

axios
  .post('/demo', data, {
    responseType: 'arraybuffer',
  })
  .then((res) => {
    const blob = new Blob([res], {
      type:
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
    });
    const downloadElement = document.createElement('a');
    const href = window.URL.createObjectURL(blob); // 创建下载的链接
    downloadElement.href = href;
    downloadElement.download = ''; // 下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); // 点击下载
    document.body.removeChild(downloadElement); // 下载完成移除元素
    window.URL.revokeObjectURL(href); // 释放掉blob对象

阅读全文

简便的格式化时间

1
2
3
4
5
6

var format = function (time) {
  var date = new Date(+time + 8 * 3600 * 1000);
  return date.toJSON().substr(0, 19).replace("T", " ").replace(/-/g, ".");
};

var time1 = format(new Date());

阅读全文

记录一下打印功能的实现方式，之前做需求的时候有个预览打印的功能，这边分享一下，下次遇到不会再走弯路。
我这边是再做 react 项目的时候碰到了打印需求，网上其实有关基于 react 的打印插件，功能还是很强大的，我只用到了打印功能，并不需要引入第三方库，所以就用原生方法写了个。
因为我的打印是在弹窗的基础上打印一个表格，所以我新开了个页面，不然点击关闭按钮时，页面就回不来了。以下是实现的代码：

阅读全文

在网页设计中， Sticky footers 设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。
有的盆友就说了，我可以使用 position: fixed;bottom:0;
当然有些情况下是可以适用的，但是有些情况下并不适用，使用 fixed 不就反而更糟，再说了，像我们这样的喜欢新技（zhuang）术（B）的人，有使用新技（zhuang）术（B）的机会怎么能放过。
之前分享过一期网站 footer 沉底效果的解决方案，用的是 JS 或者采用 flex 布局，更利于 PC 端。今天分享下便于移动端的最佳套路。
当然市面上的一些解决方案，但多少都有些兼容性问题存在，这当然不是我们追求的，分享下实现的源码，有兴趣的私下里可以试一试。

阅读全文

方法一：使用replace正则匹配的方法
去除所有空格:

1

str = str.replace(/\s*/g,"");

去除两头空格:

1

str = str.replace(/^\s*|\s*$/g,"");

去除左空格：

1

str = str.replace( /^\s*/, "");

阅读全文

分享一下URL跳转后面拼接参数获取参数的方法：

之前一直用的是这个方法，不管URL后面有几个参数，一个个的去获取，感觉比较麻烦了，不实用了，所以区分了一下，
如果URL后面只跟一个参数的话，可以用这个方法获取

1
2
3
4
5
6
7
8
9
10
11

function getParamVal(type) {
  const { href } = window.location;
  let res = '';
  let startIndex = href.lastIndexOf(type);
  if (startIndex !== -1) {
    startIndex = href.indexOf('=', startIndex) + 1;
    const endIndex = href.indexOf('&', startIndex);
    res = endIndex !== -1 ? href.substring(startIndex, endIndex) : href.substring(startIndex);
  }
  return res;
}

阅读全文

相同点：JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。
typeof的定义和用法：返回值是一个字符串，用来说明变量的数据类型。
细节：
(1)、typeof 一般只能返回如下几个结果：number,boolean,string,function,object,undefined。
(2)、typeof 来获取一个变量是否存在，如 if(typeof a!=”undefined”){alert(“ok”)}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错。

(3)、对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。
Instanceof定义和用法：instanceof 用于判断一个变量是否属于某个对象的实例。

阅读全文