panshao
在做手机端的时候，几乎每个页面都需要弹`toast`, 所以就简单的对`toast`做了下封装。 `js`代码如下 ``` js function toast (msg = '', ms = 1000, id = 'toast') { var div = document.createElement('div') div.id = id div.innerText = msg document.body.appendChild(div) setTimeout(function ()...
关于文字超过一行时，经常会遇到以下两种布局 1. 文字一行时，水平居中显示，多行时左对齐。 2. 文字一行时，垂直居中左对齐显示，多行时仍然垂直居中左对齐显示。 对于第一种布局，如果兼容到`android 4.4`, 可以如下实现： html 代码： ```html 我是单行标题居中 我是两行标题两行标题两行标题居左 ``` css 代码： ``` css .container{ margin: auto; width: 320px; padding: 0 10px; background: #ddd; } h2{...
之前使用`fastclick`这个库帮我处理`300ms`毫秒延迟的问题，一直都是好好的。 直到有一天测试把我叫过去，点了点出现了一个诡异的`bug`.经过我一个下午的调试 最后准确的定位到了`fastclick`这个库上。 问题描述： 当手机屏幕超过一屏的时候，会点击弹窗按钮，然后关掉， 然后再点击显示弹窗就不管用了，需要 点击俩次才可以。而且这个现象只在`iphone`的手机上有问题，安卓机没有任何问题 [这是测试页面](https://test-ndgrfrsrst.now.sh/) ### 用`iphone`手机打开上面的链接，然后点击屏幕最下方的`click me`按钮测试 解决方案： 谷歌了半天也没发现什么解决方案，就去[fastclick](https://github.com/ftlabs/fastclick) 提了一个`issue`,感谢好心人回答了我的问题。 [答案链接](https://github.com/ftlabs/fastclick/issues/506) 具体原因不详，可能是`fastclick`的`bug`. ps: 由于我本人没有用`jq`库，所以修改了下答案的代码,最终如下： ``` html click me X if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function...
本来的 `sass` 是这样的 ``` scss $card-red: #d0262f; $card-blue: #51b8f2; $card-orange: #fb8649; $card-green: #77e1bb; $card-gray: #969696; .card-red { border-left-color: $card-red; .good-title { color: $card-red; } } .card-blue { border-left-color: $card-blue; .good-title...
### 突然遇到一个难题， 就是实现无滚动条的滚动 这样的滚动靠的是鼠标上的滚轮，利用滚轮来滚动， 其实就是正常的滚动，去掉滚动条。 在`webkit`内核的浏览器中有个私有属性`::-webkit-scrollbar`，可以对滚动条进行样式的设置的， 不过也只针对`webkit`内核的浏览器，，， 下面介绍两种实现方法， 其思路都是一样的， #先看代码 html 代码： ``` html ddddd ddddd ddddd ddddd ddddd ddddd ddddd ddddd ddddd ddddd ddddd ddddd ddddd ddddd ddddd ddddd...
### css单行省略 ``` css display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ``` ### css在移动端实现多行省略 ``` css overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; ```...
### 闲着没事写了写`css` 都是用一个div实现的， 具体示例如下： 1. 一个 `div` 点缀随机点 效果图：  html 代码： ``` html ``` scss 代码： ``` sass @function multiple-box-shadow ($n) { $value: '#{random(1000)}px #{random(1000)}px #A1B8D0'; @for $i from...
在 `coffeescript` 中实现数组的初始化非常简单 ``` js [1..10] // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] ``` 这个功能还是很常用的， 那么如何用 `js` 如何实现这个功能呢？ 一开始我是这样想的： ``` js Array(10).map((val, index) => index +...
`tmux`是一款命令行的神器， 逼格非常之高。 我并没有打算介绍 `tmux`， 如果你对`tmux`感兴趣。请参考下面给出的资源 [tmux介绍 视频演示](http://haoduoshipin.com/v/41) [tmux 常用快捷键](https://tmuxcheatsheet.com/) 下面是我自己的`.tmux.conf`文件。 ``` bash # 前缀绑定 (Ctrl+x) 因为Ctrl + a 在命令行中有其他的作用 unbind C-b set -g prefix C-x bind-key C-x send-prefix # 分割窗口...
`let a = b = c = 1` 究竟是如何赋值的 ``` js (function example() { let a = b = c = 1; }()); console.log(a); // undefined console.log(b); // 1 console.log(c);...