Skip to content

Latest commit

 

History

History
285 lines (254 loc) · 6.07 KB

一些有用的代码.md

File metadata and controls

285 lines (254 loc) · 6.07 KB

调用浏览器进程，做一些请求（关闭浏览器也生效）

navigator.sendBeacon(url, data)

懒加载（新方法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      html, body {
        height: 100%;
        overflow-y: auto;
      }
      li {
        line-height: 100px;
      }
    </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
  <script>
    var observer = new IntersectionObserver(changes => {
      changes.forEach(item => {
        if (item.isIntersecting) {
          item.target.style.color = 'red'
          observer.unobserve(item.target)
        } else {
          item.target.style.color = 'green'
        }
      })
    })
    var targetList = document.querySelectorAll('li')
    targetList.forEach(target => observer.observe(target));
  </script>
</body>
</html>

ajax 数据流转化成对应的数据并下载 请求时responseType: 'blob'

// data 为返回的数据流
var resBlob = data

// type 为流的格式, 可从响应头里取得，动态替换
var blob = new Blob([resBlob], {'type': 'application/xlsx'})
var downloadUrl = window.URL.createObjectURL(blob)
var a = document.createElement('a')
a.setAttribute('target', '_blank')
a.setAttribute('href', downloadUrl)

// 文件后缀一定要跟上面流的格式一一对应
a.setAttribute('download', 'report.xlsx')
a.click()

禁止浏览器回退

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
  history.pushState(null, null, document.URL);
});

苹果系统在滚动长页面的时候总是滚的很不爽，不利索，回弹效果，加一句代码：

-webkit-overflow-scrolling : touch;

取消移动端点击闪屏

-webkit-tap-highlight-color: rgba(0,0,0,0);

取消当前获得焦点的元素

document.activeElement.blur();

video默认控制器隐藏

- video::-webkit-media-controls-enclosure { display:none!important;}

让元素滚动到可视区域内

element.scrollIntoView()

用meta进行跳转

<meta http-equiv="refresh" content="0; url=pages/index.html">

线性渐变

background: linear-gradient(to right, blue, white);

径向渐变

background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

文本超出隐藏

{ 
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

获取元素相对容器的top值

function getElementTop(element){
  var actualTop = element.offsetTop;
  var current = element.offsetParent;
  while (current !== null){
    actualTop += current.offsetTop;
    current = current.offsetParent;
  }
  return actualTop;
}

根据x,y获取dom元素

document.elementFromPoint(x, y); // target Element

禁止用户选择文字（非输入框条件下）

{
  -webkit-user-drag: none; 
  -webkit-user-select: none; 
  -o-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none
}

复制文本，需在表单内的值

 document.querySelector('#copy_path').select();
 document.execCommand('copy');

安卓不支持，IE9一下不支持，绘制动画函数（浏览器自主选择合适的频率绘制）

window.requestAnimationFrame(callback) // 有点类似setTimeout

取消requestAnimationFrame动画

window.cancelAnimationFrame(id) // 类似clearTimeout(id)

常用的正则表达式

  • 效验密码强度
^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
  • 校验中文
^[\\u4e00-\\u9fa5]{0,}$
  • 由数字、26个英文字母或下划线组成的字符串
^\\w+$
  • 校验E-Mail 地址
^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$
  • 校验身份证号码
^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$
^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$
  • 校验金额
^\+?(?!0+(\.00?)?$)\d+(\.\d\d?)?$
  • 校验日期
^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$
  • 校验手机号
^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$
  • 判断IE的版本
^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\/[5-9]\\.0).*$
  • 检查URL的前缀
if (!s.match(/^[a-zA-Z]+:\\/\\//)) {
  s = 'http://' + s;
}
  • 提取URL链接
^(f|ht){1}(tp|tps):\\/\\/([\\w-]+\\.)+[\\w-]+(\\/[\\w- ./?%&=]*)?
  • 文件路径及扩展名校验
^([a-zA-Z]\\:|\\\\)\\\\([^\\\\]+\\\\)*[^\\/:*?"<>|]+\\.txt(l)?$
  • 提取颜色
^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
  • 提取网页图片
\\< *[img][^\\\\>]*[src] *= *[\\"\\']{0,1}([^\\"\\'\\ >]*)
  • 提取页面超链接
(<a\\s*(?!.*\\brel=)[^>]*)(href="https?:\\/\\/)((?!(?:(?:www\\.)?'.implode('|(?:www\\.)?', $follow_list).'))[^"]+)"((?!.*\\brel=)[^>]*)(?:[^>]*)>
  • 查找CSS属性
^\\s*[a-zA-Z\\-]+\\s*[:]{1}\\s[a-zA-Z0-9\\s.#]+[;]{1}
  • 抽取注释
<!--(.*?)-->
  • 匹配HTML标签
<\\/?\\w+((\\s+\\w+(\\s*=\\s*(?:".*?"|'.*?'|[\\^'">\\s]+))?)+\\s*|\\s*)\\/?>
  • 匹配img标签
/<img [^>]*src=['"]([^'"]+)[^>]*>/gi
  • 上传文件转base64字符串
updateFile function (event) {
  return new Promise((resolve, reject) => {
    let file = event.target.files[0]
    let reader = new FileReader(file)
    reader.readAsDataURL(file, 'utf-8') 
    reader.onload = function () {
      let result = this.result.replace(/data:.*;base64,/i, '')
      resolve(result)
    }
  }) 
}

async updateJarFile function (event) {
  let jarFile = await updateFile(event)
  console.log(jarFile)
}
  • Linux下干掉某一进程
ps axu | grep string
kill -9 id