個人常用JavaScript

原創

2020-02-22 20:46

1.拷貝文本到剪貼板

function copyText(text) {
    var textarea = document.createElement("input");//創建input對象
    var currentFocus = document.activeElement;//當前獲得焦點的元素
    document.body.appendChild(textarea);//添加元素
    textarea.value = text;
    textarea.focus();
    if(textarea.setSelectionRange)
        textarea.setSelectionRange(0, textarea.value.length);//獲取光標起始位置到結束位置
    else
        textarea.select();
    try {
        var flag = document.execCommand("copy");//執行復制
    } catch(eo) {
        var flag = false;
    }
    document.body.removeChild(textarea);//刪除元素
    currentFocus.focus();
    return flag;
}

2.格式化時間/時間格式化

Date.prototype.format = function (format) {
    var args = {
        "M+": this.getMonth() + 1,
        "d+": this.getDate(),
        "h+": this.getHours(),
        "m+": this.getMinutes(),
        "s+": this.getSeconds(),
        "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
        "S": this.getMilliseconds()
    };
    if (/(y+)/.test(format))
        format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var i in args) {
        var n = args[i];
        if (new RegExp("(" + i + ")").test(format))
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length));
    }
    return format;
};

function strTimeFormat(strTime) {
    var times = strTime.toString().replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, "$1-$2-$3 $4:$5:$6");
    return times;
}

//使用方法
console.log(new Date().format("yyyy-MM-dd hh:mm:ss"));
console.log(strTimeFormat("2019-12-12 12:00:00"));

3.顯示提示信息

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則可以激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--響應式佈局先決條件-->
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=0.9,maximum-scale=1.0,user-scalable=no">
    <!--告訴瀏覽器準備接受HTML,編碼格式爲UTF-8-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--告訴瀏覽器我使用的是急速核webkit(不支持ActiveX控件):內核分別有webkit,ie-comp,ie-stand(支持ActiveX控件)-->
    <meta name="renderer" content="webkit">

    <script src="/page/js/jquery/jquery-3.3.1.min.js"></script>
    <script src="/page/css/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/page/css/bootstrap/css/bootstrap.min.css">

    <title>數據</title>

    <style>
        .backparm_th th {
            border-top-width: 0px !important;
        }

        body {
            padding-right: 0px !important;
        }

        .modal-open {
            overflow: auto;
        }
    </style>
    <script>
        /**
         * 顯示提示信息
         * @param status
         * @param msg
         */
        function showTipsModal(status, msg) {
            $("#tips_msg").text(msg);
            if (status === "error") {
                $("#tips_panel").removeClass("alert alert-success alert-dismissable");
                $("#tips_panel").addClass("alert alert-danger alert-dismissable");
            } else if (status === "success") {
                $("#tips_panel").removeClass("alert alert-danger alert-dismissable");
                $("#tips_panel").addClass("alert alert-success alert-dismissable");
            }

            var scrolltop = window.parent.document.scrollingElement.scrollTop;
            $("#tipsModal").css({ 'margin-top': scrolltop });
            $('#tipsModal').modal("show");

            if (status === "success") {
                setTimeout(function () { $('#tipsModal').modal("hide"); }, 2800);
            } else {
                setTimeout(function () { $('#tipsModal').modal("hide");}, 5000);
            }
        }
    </script>
</head>
<body>
	<button class="btn btn-default" type="button" οnclick="showTipsModal('error', '測試提示模態框')">查詢</button>
	
    <div class="container" style="width: 100%">
        <!-- 提示信息模態框 -->
        <div class="modal fade" id="tipsModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header text-center" style="margin:0;padding:0;border: 0;">
                        <div class="col-md-12 column" style="margin:0;padding:0;">
                            <div class="alert alert-success alert-dismissable" style="margin:0;" id="tips_panel">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <strong id="tips_msg"></strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>