-
前几天收到一个需求，要实现一个背景视频播放的效果，在网上找了几个解决方案。 video.js 这是一起封装非常好的JS库了，可以实现非常棒的效果，一个效果图： 不过在我发现这个库之前，前人已经用了原生的<video>实现了，所以要在原生的基础上做修改。 显示 shadow DOM 要想自定义样式，需要先把浏览器的 shadow DOM 开启，开启方式如图： 打开之后就可以看到webkit内核对video的默认显示样式了 几个常用的控制样式 video::-webkit-media-controls-panel …
阅读更多 -
之前使用过一个CMS开发过后台系统，使用了 Bootstrap3，里面有好个非常好用的css类 hidden-* 和 visible-*，可以方便地实现响应式。最近帮朋友改一个基于 Bootstrap 4 开发的系统，却发现找不到这两个好用的类啦。后来仔细看了一下，发现在 Bootstrap 4 中，这2个类前缀已经被移除了。 取而代之的是新的控制 display 的方法，见这里：Display property · Bootstrap 几个示例 下面的示例来自 Stackoverflow Show/hide for …
阅读更多 -
最近调试一个React写的网站，想在控制台进行DOM操作。虽然目前浏览器已经原生支持了querySlector，但还是不如使用jQuery方便，由于项目本身并未引入jQuery，在控制台中调试还遇到了一点困难。方法总比困难多，找了一个办法在控制台成功注入了jQuery。 注入方法 var script = document.createElement("script") script.type = "text/javascript" script.src = …
阅读更多 -
最近在看之前的大神写的一个项目，出现了 Error: write after end 的报错信息，导致项目始终跑不起来。开始以为是我网络的问题，又是加VPN，又是挂代理，后来发现并没有用，还是install不上，后来查了一下，发现与npm版本有关。总结了下面几个解决方案。 安装特定版本npm 使用如下命令 npm install npm@4 -g 其中，@ 后接的是npm的版本。这种方法也可用于npm的降级。 切换node版本 通常这种项目是使用某一版本的node及其带的npm开发的，所以只要切换相应的node版本就可以了。笔者 …
阅读更多 -
在开发麻辣GIS的时候需要实现一个滚动跟随的效果，写得自己脱了一层皮，各种计算，不过好歹实现了。最近把个人博客也想加上这个效果，不想再重复造一次轮子。于是发现了这个：sutara79/jquery.simple-scroll-follow 尝试使用了一个发现还不错，比自己重新写一次要好得多。不过有些效果还是自己手动调教。 Demo 本站右侧的广告就是了，但触底的效果还是有点问题，等我搞定了再来总结一下。
阅读更多 -
Event Loop 也叫事件循环，是 JavaScript 中的基础概念，听起来蛮唬人，查了一些资料，斗胆用大白话来说说这个东西。PS：仅限浏览器的讨论。 为什么会有 Event Loop 这一切还要从 JavaScript 的诞生说起，因为造它的用途简单，就是来浏览器“谈谈心”。谈心嘛，套路什么的不用太深，给你一个单线程的脑子就够了。于是乎，这“一根筋”的 JavaScript 就来到了人间，虽然这个呆头呆脑的家伙后来上了一件叫 “Worker” 的装备，也开始学会了城里人的套路，但它总归是村里出来的（web worker本 …
阅读更多 -
一个简单的需求，要展示用户的微信名，有的人喜欢把微信名起的很长，导致一个框框显示不下，于是用到了 text-overflow 的属性。代码如下： width: 90%; margin: 0 auto; overflow: hidden; font-size: 14px; color: #fff; text-align: center; text-overflow: ellipsis; 可效果不是我想要的 解决方案 可以看出问题出在换行，加一句white-space: nowrap;即可。
阅读更多 -
开发时候经常会打印很多log，开始的时候还好，可后来就会打印一堆log出来，有时候调试为了找自己的log就会使用如下的句式： console.log('=============================>', a) 有没有办法让log更显眼一点？有。官方文档中说可以设置一个 %c 来指定输出样式。 那接下来就好办了 封装一个函数 最先想到封装一个函数。 function lc(tips, v, style) { if (!style) { style = 'background: …
阅读更多