JavaScript中的一些骚操作

1、判断当前设备是pc端还是移动端

核心代码

function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            document.writeln("您的浏览设备为：");
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                document.writeln("phone");
            } else {
                document.writeln("pc");
            }
        }

        browserRedirect();

点击这里看demo

2、计算代码执行的时间

你可以启动一个计时器（timer）来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行10,000个计时器。当以此计时器名字为参数调用 console.timeEnd() 时，浏览器将以毫秒为单位，输出对应计时器所经过的时间.

示例：

console.time("sort");
let arr = [];
for (var i = 0; i < 10000000; i++) {
  arr.push(i);
}
console.timeEnd("sort"); //sort: 268.125ms

3、搜索结果高亮显示

用搜索工具搜索问题的时候，一般会把搜索出来的答案的关键词高亮，例如下图:

然后最近项目里面也有搜索这个功能，就想着JS能不能也实现这样的功能：‘把用户搜索的关键词在搜索结果里面高亮显示’

下面是代码

<script type="text/javascript">
	const pcontent = document.querySelector('#word').innerHTML;//文章内容
	const input = document.getElementById('inp');//搜索框
	const button = document.querySelector('button');//按钮
	button.onclick = function(){
		const input_value = input.value;//搜索框里面的内容
		const key_words = pcontent.split(input_value);
		document.querySelector('#word').innerHTML = key_words.join(`<span style='color:red'>${input_value}</span>`)
	}
</script>

点击这里看demo

4、JS巧妙输出26个字母

<script type="text/javascript">
    var arr=[];
    for (var i = 65; i <=90; i++) {
        arr.push(String.fromCharCode(i).toLowerCase());
    }
    console.log(arr);
</script>

5、基于浏览器的HTML5地理定位

核心代码

function getLocation() {
    var options = {
        enableHighAccuracy: true, //boolean 是否要求高精度的地理信息，默认为false
        maximumAge: 1000 //应用程序的缓存时间
    }
    if (navigator.geolocation) {
        //浏览器支持geolocation
        navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
    } else {
        //浏览器不支持geolocation
        console.log("浏览器不支持!");
    }
}

点击这里看demo

6、js生成随机数

核心代码

function getRandomMumber(size) {
    var arr = [];
    var str = '';
    for (let i = 0; i < 10; i++) {
    arr.push(i);
    }
    for (var i = 65; i <= 90; i++) {
    arr.push(String.fromCharCode(i).toLowerCase());
    arr.push(String.fromCharCode(i).toUpperCase());
    }
    for (let i = 0; i < size; i++) {
    var num = arr[Math.floor(Math.random() * arr.length)];
    str += num;
    }
    console.log(str);
    return str;
}
getRandomMumber(6);

7、生成指定区间的随机数

/**
    * 随机数，能取到最大值
    * @param {*} min 
    * @param {*} max 
    */
function getRandom(min, max) {
    return Math.floor(Math.random() * (max + 1 - min) + min);
}

点击这里看demo