前端用法记录

1、模拟键盘事件

$("#test").keyup(function(event) {
    console.info(event.keyCode)
    // 从keycode 转换为 字符
    console.info(String.fromCharCode(event.keyCode))
});

var e = jQuery.Event("keyup");
e.keyCode =65;
$("#test").trigger(e);

输出结果：

2、实现超出几行，后面加省略号+更多、

function LimitNumber() {
            var divHeight = $(".intro-r").height();
            var $p = $("#introText");
            var flag = false;
            while ($p.outerHeight() > divHeight) {
                $p.text($p.text().replace(/(s)*([a-zA-Z0-9]+|W)(...)?$/, "..."));
                flag = true;
            };
            if(flag) {
                var str = $.trim($("#introText").text());
                str = str.substring(0,str.length-10)+ '......';
                $p.text(str)
            }
        }

3、软键盘弹出

var u =  navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    if (isAndroid) {
        var winHeight = $(window).height();   //获取当前页面高度
		$(window).resize(function(){
		   var thisHeight=$(this).height();
		    if(winHeight - thisHeight >50){
		        $(".precept-cnt").css("top", "25%");
		    }else{
		        $(".precept-cnt").css("top", "62%");
		    }
		});
    }

4、文字两端对齐

法一：（兼容性有问题）

    text-align: justify;
    text-align-last: justify;

法二：

.score-record-list .item .opt button.border {
    border: 1px solid #24bd54;
    background: #fff;
    color: #24bd54;
    text-align:justify;
    height: 55px;
    line-height: 55px;
    overflow:hidden;
}
.score-record-list .item .opt button.border:after{
 content: "";
 display: inline-block;
 width: 100%;
}

5、去除input[number]的默认上下箭头

input[type=number]::-webkit-inner-spin-button,  
input[type=number]::-webkit-outer-spin-button {  
    -webkit-appearance: none;  
    margin: 0; 
} 
input[type=number] {
    -moz-appearance:textfield;
}

6、获取某一天对应的星期一的日期

function getMonOfWeek(date) {
    var day = date.getDay() || 7;
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1 - day);
};
// 使用
getMonOfWeek(new Date("2018-06-26"))

7、计算某元素距离底部的距离

var $parentContent = document.querySelector('.audit-list-content');
var scrollBottom = $parentContent.scrollHeight-$parentContent.scrollTop-$parentContent.clientHeight;

8、计算某元素距离可视窗口底部的距离

某元素的高度：selectHeight: (function(){
    return 2.9*window.innerWidth/750*100;
})()

结果：window.innerHeight - $event.currentTarget.getBoundingClientRect().bottom < this.selectHeight

前端 用法记录

前端用法记录