标签 javascript 下的文章

JS浏览器/操作系统属性检测 浏览器指纹

浏览器环境使用Js可以检测的属性不仅包含浏览器的信息,同时还有操作系统,计算机硬件等信息(虽然不多)。

Chrome一直在阻止网页技术捕获用户的指纹,这是出于对于用户隐私与安全性的考虑,所以现在可用的技术可能在未来的某个版本中就不可用了。但是浏览器指纹帮助我们了解到原来还可以这么玩?而且未来Chrome也有可能授权用户给JS赋能唯一ID的能力,当然目前来看Chrome还没打算这么做。

- 阅读剩余部分 -

uniapp获取实时时间

view
<view>{{dateFormat(date)}}</view>

js


data() {
    return {
        date: new Date().toISOString(),//现在时间
    }
},

onLoad() {
    let _this = this;
    setInterval(function() {
    _this.date = Date.parse(new Date());
    }, 1000);
},


methods: {
    dateFormat(time) {
        let date = new Date(time);
        let year = date.getFullYear();
        // 在日期格式中,月份是从0开始的,因此要加0,使用三元表达式在小于10的前面加0,以达到格式统一  如 09:11:05
        let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "年" + month + "月" + day + "日" + hours + ":" + minutes + ":" + seconds;
        // return year + "-" + month + "-" + day;
    },
}

localStorage 存储对象

存:
var obj = {"name":"hello","age":"16"}
localStorage.setItem("userInfo",JSON.stringify(obj));

取:
var user = JSON.parse(localStorage.getItem("userInfo"));

删:
localStorage.removeItem("userInfo");

清:
localStorage.clear();

localStorage设置过期时间

//设置localStorage
function setLocalStorage(key, value) {
    var curtime = new Date().getTime(); // 获取当前时间 ,转换成JSON字符串序列
    var valueDate = JSON.stringify({
        val: value,
        timer: curtime
    });
    try {
        localStorage.setItem(key, valueDate);
    } catch(e) {
        // 兼容性写法
        if(isQuotaExceeded(e)) {
            console.log("Error: 本地存储超过限制");
            localStorage.clear();
        } else {
            console.log("Error: 保存到本地存储失败");
        }
    }
}

function isQuotaExceeded(e) {
    var quotaExceeded = false;
    if(e) {
        if(e.code) {
            switch(e.code) {
                case 22:
                    quotaExceeded = true;
                    break;
                case 1014: // Firefox
                    if(e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
                        quotaExceeded = true;
                    }
                    break;
            }
        } else if(e.number === -2147024882) { // IE8
            quotaExceeded = true;
        }
    }
    return quotaExceeded;
}

//获取localStorage
function getLocalStorage(key, day=1) {
    var exp = 60 * 60 * day; // 一天的秒数
    exp = exp*1000;
    if(localStorage.getItem(key)) {
        var vals = localStorage.getItem(key); // 获取本地存储的值
        var dataObj = JSON.parse(vals); // 将字符串转换成JSON对象
        // 如果(当前时间 - 存储的元素在创建时候设置的时间) > 过期时间
        var isTimed = (new Date().getTime() - dataObj.timer) > exp;
        if(isTimed) {
            console.log("存储已过期");
            localStorage.removeItem(key);
            return null;
        } else {
            var newValue = dataObj.val;
        }
        return newValue;
    } else {
        return null;
    }
}

JS全屏代码

<button type="button" class="admin-side-full">全屏</button>

<script type="text/javascript">
    $('.admin-side-full').on('click', function () {
        console.log(localStorage.full);
        if (!localStorage.full || localStorage.full== 0) {
            localStorage.full=1;
            var docElm = document.documentElement;
            //W3C
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            }
            //FireFox
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            //Chrome等
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
            //IE11
            else if (elem.msRequestFullscreen) {
                elem.msRequestFullscreen();
            }
            // layer.msg('按Esc即可退出全屏');
        } else {
            localStorage.full=0;
            if(document.exitFullscreen) {
                document.exitFullscreen();
            } else if(document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if(document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        }
    });
</script>

keyup事件延迟处理

表单中keyup事件自动检索数据中,考虑性能需延迟处理按键事件,无需每次keyup均执行异步请求。
利用event的timeStamp来标记时间,这样每次的keyup事件都会修改last的值,注意last必需为全局变量。如果时间差为0(也就是你停止输入1s之内都没有其它的keyup事件发生)则执行。

需处理that=$(this);,否则报错Cannot read property 'toLowerCase' of undefined

基础代码如下:

var oldtime;
$('input[name=dept]').keyup(function(event){
    oldtime = event.timeStamp;
    that=$(this);
    setTimeout(function(){
        if((oldtime-event.timeStamp)==0){
            var name = that.val();
            $.ajax({
                url:"{:U('Dept/ajax_get_dept')}",
                type: "post",
                async: false,
                data: {'keyword':name},
                dataType:"html",
                success: function (data) {
                    console.log(data);
                }
            });
        }
    },500);
})