https://lingyuzhao.top/js/ShowArea.js

1/**
2 * ÐÅÏ¢Êý¾ÝÏÔʾÇøÓòÊÊÅäÆ÷
3 */
4class ShowArea {
5    /**
6     * ¹¹½¨³öÀ´Ò»¸öÐÅÏ¢ÏÔʾ×é¼þ
7     * @param e ÓÃÓÚ½øÐÐÐÅÏ¢ÏÔʾµÄ×é¼þÔªËضÔÏó
8     * @param defInfoFun ĬÈÏÐÅÏ¢µÄչʾº¯Êý Õâ¸öº¯Êý»á±»Ã¿¹ý
9     * @param reDefInfoFunMS ÖØе÷Óà defInfoFun µÄ×îСʱ¼ä¼ä¸ô ÓÃÀ´½øÐÐˢвÙ×÷
10     * @param infoColor_str ûÓгöÏÖ´íÎóµÄÏÔʾÑÕÉ«
11     * @param defColor_str ²»ÌṩÑÕÉ«²ÎÊýµÄʱºòÒªÏÔʾµÄÑÕÉ«
12     * @param warnColor_str ³öÏÖÁ˾¯¸æÐÅÏ¢µÄÏÔʾÑÕÉ«
13     * @param errorColor_str ³öÏÖÁË´íÎóµÄÏÔʾÑÕÉ«
14     */
15    constructor(e, defInfoFun = undefined, reDefInfoFunMS = 4000, infoColor_str = "#0f0", defColor_str = "#ffffff", warnColor_str = "#f0ff00", errorColor_str = "#ff0000") {
16        this.e = e;
17        this.mark = false;
18        this.isItem = isIterable(this.e);
19        this.infoColor_str = infoColor_str;
20        this.defColor_str = defColor_str;
21        this.warnColor_str = warnColor_str;
22        this.errorColor_str = errorColor_str;
23        if (defInfoFun !== undefined) {
24            this.show(defInfoFun(), undefined, false)
25            setInterval(
26                () => {
27                    if (this.isMark()) {
28                        this.unMark();
29                        return;
30                    }
31                    this.show(defInfoFun(), undefined, false)
32                }, reDefInfoFunMS
33            )
34        }
35    }
36
37    /**
38     * Åжϵ±Ç°ÊÇ·ñÓÐÊä³öÐÅÏ¢ Èç¹ûÓÐÊä³öÐÅÏ¢ÕâÀï·µ»Ø true
39     * @return {boolean} Èç¹ûÓÐÊä³öµÄÐÅÏ¢ ÕâÀï·µ»Ø true
40     */
41    isMark() {
42        return this.mark;
43    }
44
45    /**
46     * È¡ÏûÐÅÏ¢±ê¼Ç£¬Õâ¸ö²Ù×÷½«»áÈà defInfoFun µÄµ÷ÓÃÖØÐÂÉúЧ
47     */
48    unMark() {
49        this.mark = false;
50    }
51
52    /**
53     * ±ê¼ÇÐÅÏ¢£¬Õâ¸ö²Ù×÷½«»áÈà defInfoFun µÄµ÷ÓÃʧЧһ´Î£¬Ê§Ð§Ö®ºó»áÖØÐÂÉúЧ
54     */
55    makeMark() {
56        this.mark = true;
57    }
58
59    /**
60     * ÏÔʾÐÅÏ¢
61     * @param str ÒªÏÔʾµÄÐÅÏ¢
62     * @param color_str ÏÔʾÐÅÏ¢µÄ×ÖÌåÑÕÉ«
63     * @param mark Èç¹ûÐèÒª½øÐбê¼Ç ÔÚÕâÀïÉèÖà true ±»±ê¼ÇµÄÐÅÏ¢µÄÉúÃüÖÜÆڱȽϳ¤£¬¿ÉÒÔÈ·±£Õ¹Ê¾µÄ³É¹¦£¡
64     */
65    show(str, color_str = undefined, mark = true) {
66        this.mark = mark;
67        if (this.isItem) {
68            for (const ae of this.e) {
69                ae.innerText = str;
70                ae.style.color = color_str === undefined ? this.defColor_str : color_str;
71            }
72        } else {
73            this.e.innerText = str;
74            this.e.style.color = color_str === undefined ? this.defColor_str : color_str;
75        }
76    }
77
78    /**
79     * ÏÔʾÐÅÏ¢
80     * @param str ÒªÏÔʾµÄÐÅÏ¢
81     */
82    info(str) {
83        this.show(str, this.infoColor_str);
84    }
85
86    /**
87     * ÒÔ¾¯¸æµÄ·½Ê½ÏÔʾÐÅÏ¢
88     * @param str ÒªÏÔʾµÄÐÅÏ¢
89     */
90    warn(str) {
91        this.show(str, this.warnColor_str);
92    }
93
94    /**
95     * ÒÔ´íÎóµÄ·½Ê½ÏÔʾÐÅÏ¢
96     * @param str ÒªÏÔʾµÄÐÅÏ¢
97     */
98    error(str) {
99        this.show(str, this.errorColor_str);
100    }
101
102}