JavaScript开发实例！滑块滚动到底部，浏览器全屏，设备识别，随机字符串，货币格式化，数据精度计算，生成二维码_window.scrollto({ top: 0, left: 0, behavior: 'smoo-优快云博客

本文介绍了JavaScript中的一些实用技巧，包括平滑滚动到页面顶部和底部、元素滚动到可见区域、全屏显示和退出全屏、阻止事件冒泡、设备类型检测、生成随机字符串、字符串操作、随机数生成、数组打乱、货币格式化以及数值计算防止溢出。这些技巧在前端开发中非常常见且实用。

1.滚动到页面顶部我们可以使用 window.scrollTo() 平滑滚动到页面顶部。
const scrollToTop = () => {
   window.scrollTo({
           top: 0, left: 0, behavior: "smooth"
   });
};

2.滚动到页面底部当然，如果知道页面的高度，也可以平滑滚动到页面底部。
const scrollToBottom = () => {
   window.scrollTo({
       top: document.documentElement.offsetHeight, left: 0, behavior: "smooth",
   });
};

3.滚动元素到可见区域有时我们需要将元素滚动到可见区域，我们应该怎么做？使用 scrollIntoView 就足够了。
const smoothScroll = (element) => {
   element.scrollIntoView({
           behavior: "smooth",
   });
};

4.全屏显示元素你一定遇到过这样的场景，需要全屏播放视频，并在浏览器中全屏打开页面。
const goToFullScreen = (element) => {
element = element || document.body;
   if (element.requestFullscreen) {
           element.requestFullscreen();
   } else if (element.mozRequestFullScreen) {
           element.mozRequestFullScreen();
   } else if (element.msRequestFullscreen) {
           element.msRequestFullscreen();
   } else if (element.webkitRequestFullscreen) {
           element.webkitRequestFullScreen();
}};

5.退出浏览器全屏状态是的，这个和第4点一起使用，你也会有退出浏览器全屏状态的场景。

6.停止冒泡事件一种适用于所有平台的防止事件冒泡的方法。
const stopPropagation = (event) => {
event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}};

7.确定设备类型我们经常必须这样做才能在手机上显示 A 逻辑，在 PC 上显示 B 逻辑。基本上，设备类型是通过识别浏览器的 userAgent 来确定的。
const isMobile = () => { return !!navigator.userAgent.match( /(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i );};

8.判断设备是安卓还是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());};

9.生成随机字符串不知道大家有没有遇到过需要生成随机字符串的场景。我遇到过很多次，每次都要google一遍，直到学会这个工具功能。
const randomString = (len) => {
let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789";
let strLen = chars.length; let randomStr = "";
for (let i = 0; i < len; i++) {
randomStr += chars.charAt(Math.floor(Math.random() * strLen));
}
return randomStr;};randomString(10)

10.字符串首字母大写
const fistLetterUpper = (str) => {
return str.charAt(0).toUpperCase() + str.slice(1);
};
fistLetterUpper('fatfish') // Fatfish

11.生成指定范围内的随机数也许出于测试目的，我经常需要生成一定范围内的随机数。
const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;randomNum(1, 10) // 6randomNum(10, 20) // 11

12.打乱数组的顺序如何打乱数组的原始顺序？
const shuffleArray = (array) => {
r eturn array.sort(() => 0.5 - Math.random())
}
let arr = [ 1, -1, 10, 5 ]shuffleArray(arr) // [5, -1, 10, 1]shuffleArray(arr) // [1, 10, -1, 5]

13.格式化货币格式化货币的方式有很多，比如这两种方式。
第一种方法
const formatMoney = (money) => {
return money.replace(new RegExp(`(?!^)(?=(\\d{3})+${money.includes('.') ? '\\.' : '$'})`, 'g'), ',')
}
formatMoney('123456789') // '123,456,789'formatMoney('123456789.123') // '123,456,789.123'formatMoney('123') // '123'
第二种方式正则表达式让我们很头疼，不是吗？所以我们需要找到一种更简单的方式来格式化货币。
const formatMoney = (money) => {
return money.toLocaleString()
}
formatMoney(123456789) // '123,456,789'formatMoney(123456789.123) // '123,456,789.123'formatMoney(123) // '123'

14. 数字计算，带小数点，防止数据溢出，保证数据进度

//加法(针对小数计算失去进度问题)

function accAdd(arg1,arg2){

var r1,r2,m;

try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}

try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}

m=Math.pow(10,Math.max(r1,r2))

return (arg1*m+arg2*m)/m

}

//减法(针对小数计算失去进度问题)

function Subtr(arg1,arg2){

var r1,r2,m,n;