前端 用法記錄

一、模擬鍵盤事件

$("#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);

輸出結果：

 二、實現超出幾行，後面加省略號+更多、

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)
            }
        }

 三、軟鍵盤彈出

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%");
		    }
		});
    }

四、文字兩端對齊

法一：（兼容性有問題）

    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%;
}

 五、去除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;
}

 六、獲取某一天對應的星期一的日期

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"))

 七、計算某元素距離底部的距離

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

八、計算某元素距離可視窗口底部的距離

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

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