zoukankan      html  css  js  c++  java
  • 有用的Javascript,长期更新...

    1,点击目标区域以外隐藏,运用场景:点击遮罩层,弹层关闭。 

    // 点击目标区域以外隐藏
    $(document).on("click", function (event) {
    	var e = window.event || e;
    	obj = $(e.srcElement || e.target);
    	if ($(obj).is(selector)) {
    		// console.log('内部区域');
    		// do something 
    	} else {
    		// console.log('你的点击不在目标区域');
    		// do something  
    	}
    });
    

    2,JS超出显示省略号

    function getStrLen(str, len) {
    	if(!str) return;
    	var iCount = 0;
    	var reg = /[^x00-xff]/;
    	var result = "";
    	for (var i = 0; i < len; i++) {
    		if (reg.test(str.charAt(i))) {
    			iCount++
    		}
    		result += str.charAt(i);
    		iCount++
    	}
    
    	if (result.length < str.length) {
    		result += "...";
    	}
    	return result
    }
    

    3、JS日期加月计算;

    /** 
     * 日期加月计算 
     * num:要加的月数 
     * sdate:要计算的日期,日期对象 
     */  
    function addMonth(num,sdate) {  
        //日期不传默认为当前日期  
        var d = sdate || new Date();  
        //当前月份  
        var oldMonth = d.getMonth();  
        //当前几号  
        var oldDay = d.getDate();  
        //每月多少天,平年  
        var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
        //闰年二月为29天  
        var fullYear = d.getFullYear();  
        if ((fullYear % 4 == 0 && fullYear % 100 != 0) || fullYear % 400 == 0) {  
            days[1] = 29;  
        }  
        //加月,设置月为:当前月份+要加的月数  
        d.setMonth(oldMonth + num);  
        //计算月日  
        var newDay = d.getDate();  
        if (oldDay == days[oldMonth]) {  
            if(newDay != oldDay){  
                //设置新日期为:新日期的上个月的最后一天  
                d.setDate(0);  
            }else{  
                //设置为当月最后一天  
                d.setDate(1);  
                d.setMonth(d.getMonth()+1);  
                d.setDate(0);  
            }  
        }  
        //输出年月日,月日不足10前面补0  
        var y = d.getFullYear();  
        var m = d.getMonth() + 1;  
        var dd = d.getDate();  
        if (m < 10) {  
            m = '0' + m;  
        }  
        if (dd < 10) {  
            dd = '0' + dd;  
        }  
        return y + "-" + m + "-" + dd;  
    }  
    addMonth(2,new Date("2017-02-28"))
    // 2017-04-30
    

    4、一个页面应用加个倒计时

    var addTimer = function () {
        var list = [],
            interval;
    
        return function(id, time) {
            if (!interval)
                interval = setInterval(go, 1000);
            list.push({ ele: id, time: time });
        }
    
        function go() {
            for (var i = 0; i < list.length; i++) {
                document.getElementById(list[i].ele).innerHTML = getTimerString(list[i].time ? list[i].time -= 1 : 0);
                if (!list[i].time)
                    list.splice(i--, 1);
            }
        }
    
        function getTimerString(time) {
            var end = new Date(time);
            var now = new Date();
            var m = Math.round((end - now) / 1000);
            var day = parseInt(m / 24 / 3600);
            var hours = parseInt((m % (3600 * 24)) / 3600);
            var minutes = parseInt((m % 3600) / 60);
            var seconds = m % 60;
            return "还有" + day + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
        }
    }();
    // 调用
    addTimer(id, timestamp);
    

    5、js实现某年某月某天距离现在有多少天,多少分,多少秒,动态显示!

    /**
     * @Author   Jone
     * @DateTime 2019-04-04
     * @param    {[type]}   date [js实现某年某月某天距离现在有多少天,多少分,多少秒,动态显示!]
     * @return   {[type]}        [description]
     */
    function aa(date) {
        var current = Date();
        var seconds = (Date.parse(current) - Date.parse(date)) / 1000;
        var days = Math.floor(seconds / (3600 * 24));
        seconds = seconds % (3600 * 24);
        var hours = Math.floor(seconds / 3600);
        seconds = seconds % 3600;
        var minutes = Math.floor(seconds / 60);
        seconds = seconds % 60;
        var formatNumber = n => n.toString()[1] ? n.toString() : '0' + n.toString();
        var result = days + '天' + formatNumber(hours) + '小时' + formatNumber(minutes) + '分钟' + formatNumber(seconds) + '秒';
        return result;
    }
    // 调用
    setInterval(() => {
        console.log(aa(time));
    }, 1000)
    

    6、解决buffer中文乱码

    let unit8Arr = new Uint8Array(arrayBuffer) ;
    let encodedString = String.fromCharCode.apply(null, unit8Arr),
    decodedString = decodeURIComponent(escape((encodedString)));//没有这一步中文会乱码
    console.log(decodedString);
    

    7、解决移动端页面键盘回收问题

    handleBlur = () => {
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
          window.scrollTo(0, Math.max(scrollHeight - 1, 0));
        }, 100);
      }
    

      

  • 相关阅读:
    vue路由的两种模式,hash与history
    javascript的继承小结
    attr和prop区别
    ie6、7下 text-indent 问题
    推荐链接
    iphone中 input圆角bug
    gif图片加载问题
    IE7中绝对定位元素之间的遮盖问题
    多行文本溢出显示省略号(...)的方法
    ie6兼容之绝对定位元素内容为空时高度问题
  • 原文地址:https://www.cnblogs.com/jone-chen/p/6168640.html
Copyright © 2011-2022 走看看