web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

前端19个冷知识代码

481 ℃
     

1. 获取当前页面的滚动位置

const getScrollPosition = (el = window) => ({ 
    x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft, 
    y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop 
}) 
getScrollPosition(); // {x: 0, y: 200}

2. 平滑滚动到页面顶部

const scrollToTop = () => { 
    const c = document.documentElement.scrollTop || document.body.scrollTop 
    if (c > 0) { 
        window.requestAnimationFrame(scrollToTop) 
        window.scrollTo(0, c - c / 8) 
    } 
} 
scrollToTop()

3. 确定设备是移动设备还是台式机/笔记本电脑

const detectDeviceType = () => 
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
    .test(navigator.userAgent) ? 
    'Mobile' : 'Desktop' 
detectDeviceType() // "Mobile" or "Desktop"

4. 带图带事件的桌面通知

function doNotify(title, options = {}, events = {}) {
  const notification = new Notification(title, options)
  for (let event in events) {
    notification[event] = events[event]
  }
}

function notify(title, options = {}, events = {}) {
  if (!('Notification' in window)) {
    return console.error('This browser does not support desktop notification')
  } else if (Notification.permission === 'granted') {
    doNotify(title, options, events)
  } else if (Notification.permission !== 'denied') {
    Notification.requestPermission().then(function (permission) {
      if (permission === 'granted') {
        doNotify(title, options, events)
      }
    })
  }
}
notify(
  '中奖提示',
  {
    icon: 'https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/f1a9f122e925aeef5e4534ff7f706729~300x300.image',
    body: '恭喜你,掘金签到一等奖',
    tag: 'prize'
  },
  {
    onclick(ev) {
      console.log(ev)
      ev.target.close()
      window.focus()
    }
  }
)

5. 数组转树

function treeDataTranslate(data, id = 'id', pid = 'pId') {
  var res = []
  var temp = {}
  for (var i = 0; i < data.length; i++) {
    temp[data[i][id]] = data[i]
  }
  for (var k = 0; k < data.length; k++) {
    if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
      if (!temp[data[k][pid]]['children']) {
        temp[data[k][pid]]['children'] = []
      }
      temp[data[k][pid]]['children'].push(data[k])
    } else {
      res.push(data[k])
    }
  }
  return res
}

6. 禁用在浏览器打开控制台

setInterval(function () {
  check()
}, 4000)
var check = function () {
  function doCheck(a) {
    if (('' + a / a)['length'] !== 1 || a % 20 === 0) {
      ;(function () {}['constructor']('debugger')())
    } else {
      ;(function () {}['constructor']('debugger')())
    }
    doCheck(++a)
  }
  try {
    doCheck(0)
  } catch (err) {}
}
check()

7. 函数柯里化

function add() {
  let args = [...arguments]
  function _add() {
      args.push(...arguments)
      return _add
  }
  _add.toString = function () {
      return args.reduce((pre, cur) => {
          return pre + cur
      })
  }
  return _add
}
console.log(add(1, 2)(3, 4)(5)(6)()().toString())

8. toFullScreen:全屏

function toFullScreen() {
  let elem = document.body
  elem.webkitRequestFullScreen
    ? elem.webkitRequestFullScreen()
    : elem.mozRequestFullScreen
    ? elem.mozRequestFullScreen()
    : elem.msRequestFullscreen
    ? elem.msRequestFullscreen()
    : elem.requestFullScreen
    ? elem.requestFullScreen()
    : alert('浏览器不支持全屏')
}

9. exitFullscreen:退出全屏

function exitFullscreen() {
  let elem = parent.document
  elem.webkitCancelFullScreen
    ? elem.webkitCancelFullScreen()
    : elem.mozCancelFullScreen
    ? elem.mozCancelFullScreen()
    : elem.cancelFullScreen
    ? elem.cancelFullScreen()
    : elem.msExitFullscreen
    ? elem.msExitFullscreen()
    : elem.exitFullscreen
    ? elem.exitFullscreen()
    : alert('切换失败,可尝试Esc退出')
}

10. 禁止右键、选择、复制

;['contextmenu', 'selectstart', 'copy'].forEach(function (ev) {
  document.addEventListener(ev, function (event) {
    return (event.returnValue = false)
  })
})

11. 首字母大写

let firstUpperCase = ([first, ...rest]) => first?.toUpperCase() + rest.join('')

12. 数据类型验证

function typeOf(obj) {
  const toString = Object.prototype.toString
  const map = {
    '[object Boolean]': 'boolean',
    '[object Number]': 'number',
    '[object String]': 'string',
    '[object Function]': 'function',
    '[object Array]': 'array',
    '[object Date]': 'date',
    '[object RegExp]': 'regExp',
    '[object Undefined]': 'undefined',
    '[object Null]': 'null',
    '[object Object]': 'object',
    '[object FormData]': 'formData',
    '[object Symbol]': 'symbol', 
    '[object BigInt]': 'bigint'
  }
  return map[toString.call(obj)]
}

13. 复制文本

copyPersonURL(content) {
  let that = this
  if (window.ClipboardData) {
      window.clipboardData.setData('text', content)
  } else {
      ;(function (content) {
          document.oncopy = function (e) {
              e.clipboardData.setData('text', content)
              e.preventDefault()
              document.oncopy = null
          }
      })(content)
      document.execCommand('Copy')
  }
}

14.docx文件转html

部分样式无法实现,所以最好还是后端去实现,后端的比较成熟,这里用vue来演示
需要安装插件mammoth
npm install mammoth --save

<input type="file" name="file" @change="changeFile" />

<div id="wordView" v-html="wordText" />

import mammoth from "mammoth"

//选择本地文件预览
changeFile(event) {
// if(event.target.files[0].name.indexOf('docx')>-1){
let that = this;
let file = event.target.files[0];
let reader = new FileReader();
reader.onload = function (loadEvent) {
let arrayBuffer = loadEvent.target.result; //arrayBuffer
mammoth
.convertToHtml({ arrayBuffer: arrayBuffer })
// .convertToMarkdown({ arrayBuffer: arrayBuffer })
.then(that.displayResult)
.done();
};
reader.readAsArrayBuffer(file);
// }
},
//页面渲染
displayResult(result) {
console.log(result.value)
this.wordText = result.value;
}

15.验证'()'是否成对出现

[..."(())()(()())"].reduce((a,i)=> i === '(' ? a+1 : a-1 , 0);
// 输出0则是 

16.判断当前标签页是否激活

const isTabInView = () => !document.hidden

17.打开浏览器打印框

const showPrintDialog = () => window.print()

18.html转图片

需要安装插件dom-to-image
npm install dom-to-image
//引入domtoimage
import domtoimage from 'dom-to-image';
downLoadPhoto () {
  const node = document.getElementById('table')//对应的html标签id
  domtoimage.toPng(node)
    .then((dataUrl) => {
      const img = new Image()
      img.src = dataUrl
      // 将获取到的base64下载下来
      const imgUrl = img.src
      if (window.navigator.msSaveOrOpenBlob) {
        const bstr = atob(imgUrl.split(',')[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        const blob = new Blob([u8arr])
        window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
      } else {
        // 这里就按照chrome等新版浏览器来处理
        const a = document.createElement('a')
        a.href = imgUrl
        a.setAttribute('download', 'chart-download')
        a.click()
      }
    })
}

19.字符串转base与base64转字符串

// 加密
function base64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode('0x' + p1);
    }));
}
// 解密
function base64DecodeUnicode(str) {
    return decodeURIComponent(atob(str).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
}

前端css兼容性问题

前端冷知识:25个正则表达式

前端33个js知识基础代码

前端MD5加密源码(md5.js)

标签: 前端知识

上面是“前端19个冷知识代码”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_1495.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > vuejs
本文共计6239个字,预计阅读时长42分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一个可以查询老黄历的网站,可以根据五行取名!
下一篇: 详细介绍HTTP状态码不同之处的原因(什么原因导致的)
x 打工人ai神器