标签：document const return 20 实用 elements let obj js
// 1 滚动到页面顶部 window.scrollTo() 平滑滚动到页面顶部
const scrollToTop = () => {
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
}
// 2 滚动到页面底部 如果知道页面的高度，也可以平滑滚动到页面底部
const scorllToBottom = () => {
window.scrollTo({
top: document.documentElement.offsetHeight,
left: 0,
behavior: 'smooth'
})
}
// 3 滚动元素到可见区域 将元素滚动到可见区域 scrollIntoView 就足够了
const smoothScroll = (element) => {
element.scrollIntoView({
behavior: 'smooth'
})
}
// 4 全屏显示元素 全屏播放视频，并在浏览器中全屏打开页面。
const goToFullScreen = (elements) => {
elements = elements || document.body
if (elements.requestFullscreen) {
elements.requestFullscreen()
} else if (elements.mozRequestFullScreen) {
elements.mozRequestFullScreen()
} else if (elements.msRequestFullscreen) {
elements.msRequestFullscreen()
} else if (elements.webkitRequestFullscreen) {
elements.webkitRequestFullscreen()
}
}
// 5 退出浏览器全屏状态 和第四点一起使用。
const goExitFullscreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
}
// 6 获取数据类型 如何通过函数获取变量的数据类型
const getType = (value) => {
const match = Object.prototype.toString.call(value).match(/(\w+)]/)
return match[1].toLocaleLowerCase()
}
getType()// undefined
getType({}) // object
getType([]) // array
getType(1) // number
getType('fatfish') // string
getType(true) // boolean
getType(/fatfish/) // regexp正则表达式
// 7 停止冒泡事件 一种适用于所有平台的防止事件冒泡的方法
const stopPropagation = (event) => {
event = event || window.event
if (event.stopPropagation) {
event.stopPropagation()
} else {
event.cancelBubble = true
}
}
// 8 深拷贝一个对象 复制深度嵌套的对象
const deepCopy = (obj, hash = new WeakMap()) => {
if (obj instanceof Date) {
return new RegExp(obj)
}
if (hash.has(obj)) {
return hash.get(obj)
}
let allDesc = Object.getOwnPropertyDescriptors(obj)
let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc)
hash.set(obj, cloneObj)
for (let key of Reflect.ownKeys(obj)) {
if (obj[key] && typeof obj[key] === 'object') {
cloneObj[key] = deepCopy(obj[key], hash)
} else {
cloneObj[key] = obj[key]
}
}
return cloneObj
}
// 9 确定设备类型 我们经常必须这样做才能在手机上显示 A 逻辑，在 PC 上显示 B 逻辑。基本上，设备类型是通过识别浏览器的 userAgent 来确定的。
const isMobile = () => {
return !!navigator.userAgent.match(
/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i
)
}
// 10 判断设备是安卓还是IOS 除了区分是移动端还是PC端，很多时候我们还需要区分当前设备是Android还是IOS。
const isAndroid = () => {
return /android/i.test(navigator.userAgent.toLowerCase())
}
const isIOS = () => {
let reg = /iPhone|iPad|iPod|iOS|Macintosh/i
return reg.test(navigator.userAgent.toLowerCase())
}
// 11 获取浏览器类型及其版本 兼容性问题
const getExplorerInfo = () => {
let t = navigator.userAgent.toLowerCase()
return 0 <= t.indexOf('msie') ? {
// ie<11
type: 'IE',
version: Number(t.match(/msie([\d]+)/)[1])
} : !!t.match(/trident\/.+?rv:(([\d.]+))/) ? {
// ie 11
type: 'IE',
version: 11
} : 0 <= t.indexOf('edge')
? {
type: 'Edge',
version: Number(t.match(/edge\/([\d]+)/)[1])
} : 0 <= t.indexOf('firefox')
? {
type: 'Firefox',
version: Number(t.match(/firefox\/([\d]+)/)[1])
}
: 0 <= t.indexOf('chrome')
? {
type: 'Chrome',
version: Number(t.match(/chrome\/([\d]+)/)[1])
}
: 0 <= t.indexOf('opera')
? {
type: 'opera',
version: Number(t.match(/opera\/([\d]+)/)[1])
}
: 0 <= t.indexOf(Safari)
? {
type: 'Safari',
version: Number(t.match(/version\/([\d]+)/)[1])
}
: {
type: t,
version: -1
}
}
// 12 设置cookies cookies是糟糕的API，重新安装提高开发效率
const setCookie = (key, value, expire) => {
const d = new Date()
d.setDate(d.getDate() + expire)
document.cookie = `${key}=${value};expries=${d.toUTCString()}`
}
// 13 读取cookie
const getCookie = (key) => {
const cookieStr = unescape(document.cookie)
const arr = cookieStr.split(';')
let cookieValue = ''
for (let i = 0; i < arr.length; i++) {
const temp = arr[i].split('=')
if (temp[0] === key) {
cookieValue = temp[1]
break
}
}
return cookieValue
}
// 14 删除cookies 将过期时间设置为这一刻，它就会立即过期
const delCookiie = (keys) => {
document.cookie = `${encodeURIComponent(keys)}=;expires=${new Date()}`
}
// 15 生成随机字符串
const randomString = (len) => {
let charts = 'ABCDEFGHIJKLMNOPPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789'
let strLen = charts.length
let randomStr = ''
for (let i = 0; i < len; i++) {
randomStr = randomStr + charts.charAt(Math.floor(Math.random() * strLen))
}
return randomStr
}
// 16 字符串首字母大写
const fistLetterUpper = (str) => {
return str.charAt(0).toUpperCase() + str.slice(1)
}
fistLetterUpper('fatfish') // Fatfish
// 17 生成指定范围内的随机数
const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
randomNum(1, 10)// 6
randomNum(10, 20)// 11
// 18 打乱数组的顺序 打乱数组的原始顺序
const shuffleArray = (array) => {
return array.sort(() => 0.5 - Math.random())
}
let arras = [1, -1, 10, 5]
shuffleArray(arras)// 数组顺序随机
shuffleArray(arras)//
// 19 从数组中获取随机值
const getRandomValue = arrays[Math.floor(Math.random() * arrays.length)]
const prizes = ['$100', '可乐', '
标签：document,const,return,20,实用,elements,let,obj,js
来源： https://www.cnblogs.com/reverse-x/p/16645484.html
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。