https://lingyuzhao.top/js/lib/joker_box_pop_up/js/joker_box_pop_up.js

1/**
2 * JokerBox 弹窗组件，这个组件可以自动实现弹窗的功能，且允许您自定义弹窗的格式！
3 *
4 * JokerBox pop-up component, this component can automatically implement the pop-up function and allow you to customize the format of the pop-up!
5 */
6class JokerBox_popUp {
7
8    /**
9     * 将弹窗功能装载到一个元素上，这将会把弹窗组件的声明周期与元素的生命周期绑定在一起
10     *
11     * Load the pop-up function onto an element, which will bind the declaration cycle of the pop-up component to the lifecycle of the element
12     * @param dom {HTMLElement} 需要承载弹窗的元素
13     *
14     * Elements that need to carry pop-ups
15     *
16     * @param cssFormatter {string} 在弹窗中显示内容时要使用的预制格式，我们允许并支持您使用自己的格式做为弹窗中的展示，请注意，这将会让您的元素被 jokerBox 管理！
17     * We allow and support you to use your own pre made format for displaying content in pop ups. Please note that this will allow your elements to be managed by jokerBox!
18     *
19     * Elements that need to carry pop-ups
20     * @param color {{color: string, background: string}} 分别是背景颜色和字体颜色
21     *
22     *
23     * They are background color and font color, respectively
24     * @param closeClickAnimation 关闭按钮被点击之后的关闭动画效果 在这里使用的是内置的动画，如果您有自己的动画，可以直接在这里传递动画的名字！
25     *
26     * The close animation effect after the close button is clicked here uses the built-in animation. If you have your own animation, you can directly pass the name of the animation here!
27     */
28    constructor(dom,
29                color = {},
30                closeClickAnimation = 'jokerBox_pop_up_show_display_life_close',
31                cssFormatter = undefined) {
32
33        console.info(`jokerBox_v${JokerBox_popUp.getVersion()} -> popUp set ok!!`)
34
35        // 判断背景颜色是否为 空
36        if (color['background'] === undefined) {
37            color['background'] = '#ccf8bf';
38        }
39
40        // 判断字体颜色是否为空
41        if (color['color'] === undefined) {
42            color['color'] = JokerBoxUtils.invertColor(color['background']);
43        }
44
45        let div1, div2, div3;
46
47        if (cssFormatter !== undefined) {

48            div1 = document.querySelector(cssFormatter);
49            const s1 = cssFormatter + ' .pop_up_content_text';
50            const s2 = cssFormatter + ' .pop_up_content_close';
51            div2 = document.querySelector(s1);
52            div3 = document.querySelector(s2);
53            if (!(div1 && div2 && div3)) {
54                console.error("jokerBox_popUp: subHtml is undefined!!\n" +
55                    "You need to ensure that the following two class name elements are included in the format you specify\n" +
56                    "\n" +
57                    "1. " + s1 + ": Text content display element（There can only be one）\n" +
58                    "\n" +
59                    "2. " + s2 + ": Close button display element（There can only be one）", {
60                    "your pop_up_content_text": div2,
61                    "your pop_up_content_close": div3
62                });
63                return;
64            }
65        } else {
66            div1 = document.createElement("div");
67            div2 = document.createElement("div");
68            div3 = document.createElement("a");
69            div1.classList.add('jokerBox_pop_up_show_div')
70            div2.classList.add('pop_up_content_text');
71            div3.classList.add('pop_up_content_close');
72
73            div1.appendChild(div3);
74            div1.appendChild(div2);
75            dom.appendChild(div1);
76        }
77
78        div2.innerText = 'welcome to use jokerBox!!!';
79        div3.innerText = 'x'
80        div3.title = '关闭弹窗'
81        div3.href = '#'
82        div3.onclick = () => {
83            div1.style.animation = closeClickAnimation + ' 1s forwards';
84        }
85
86
87        this.dom = div1;
88        this.textDom = div2;
89
90        this.dom.style.background = color['background'];
91        this.dom.style.transform = 'scale(0)';
92        this.dom.style.height = '0';
93        for (let childNode of this.dom.childNodes) {
94            if (childNode.style === undefined) {
95                continue;
96            }
97            childNode.style.color = color['color'];
98        }
99
100        const invertColor1 = JokerBoxUtils.invertColor(color['color']);
101        div3.onmouseover = function () {
102            this.style.color = invertColor1;
103            this.style.transform = 'scale(150%)';
104            this.style.textShadow = '20% 20% 20% 20% #fff';
105        }
106        div3.onmouseout = function () {
107            this.style.color = color['color'];
108            this.style.transform = 'scale(100%)';
109        }
110
111        this.dom.onanimationend = function () {

112            this.style.animation = 'none';
113        }
114    }
115
116    /**
117     * 将弹窗功能装载到一个元素上，这将会把弹窗组件的声明周期与元素的生命周期绑定在一起
118     *
119     * Load the pop-up function onto an element, which will bind the declaration cycle of the pop-up component to the lifecycle of the element
120     * @param dom {HTMLElement} 需要承载弹窗的元素
121     *
122     *
123     * @param cssFormatter {string} 在弹窗中显示内容时要使用的预制格式，我们允许并支持您使用自己的格式做为弹窗中的展示，请注意，这将会让您的元素被 jokerBox 管理！
124     * We allow and support you to use your own pre made format for displaying content in pop ups. Please note that this will allow your elements to be managed by jokerBox!
125     *
126     * Elements that need to carry pop-ups
127     * @param color {{color: string, background: string}} 分别是背景颜色和字体颜色
128     *
129     *
130     * They are background color and font color, respectively
131     * @param closeClickAnimation 关闭按钮被点击之后的关闭动画效果 在这里使用的是内置的动画，如果您有自己的动画，可以直接在这里传递动画的名字！
132     *
133     * The close animation effect after the close button is clicked here uses the built-in animation. If you have your own animation, you can directly pass the name of the animation here!
134     */
135    static createByHtml(dom, cssFormatter,
136                        color = {},
137                        closeClickAnimation = 'jokerBox_pop_up_show_display_life_close') {
138        return new JokerBox_popUp(dom, color, closeClickAnimation, cssFormatter);
139    }
140
141    /**
142     * 将弹窗功能装载到一个元素上，这将会把弹窗组件的声明周期与元素的生命周期绑定在一起
143     *
144     * Load the pop-up function onto an element, which will bind the declaration cycle of the pop-up component to the lifecycle of the element
145     * @param dom {HTMLElement} 需要承载弹窗的元素
146     *
147     * Elements that need to carry pop-ups
148     * @param color {{color: string, background: string}} 分别是背景颜色和字体颜色
149     *
150     * They are background color and font color, respectively
151     * @param closeClickAnimation 关闭按钮被点击之后的关闭动画效果 在这里使用的是内置的动画，如果您有自己的动画，可以直接在这里传递动画的名字！
152     *
153     * The close animation effect after the close button is clicked here uses the built-in animation. If you have your own animation, you can directly pass the name of the animation here!
154     */
155    static create(dom,
156                  color = {},
157                  closeClickAnimation = 'jokerBox_pop_up_show_display_life_close') {
158        return this.createByHtml(dom, undefined, color, closeClickAnimation)
159    }
160
161    static getVersion() {
162        return '1.0.0';
163    }
164
165    /**
166     * 弹窗显示框
167     * @param msg {string} 需要在弹窗中显示的内容
168     * @param timeMs {number} 弹窗动画+显示的总时间 毫秒数值
169     */
170    show(msg, timeMs = 10000) {
171        this.textDom.innerText = msg;
172        this.dom.style.animation = `jokerBox_pop_up_show_display_life ${timeMs}ms forwards`;
173    }
174}
175
176/**
177 * JokerBoxUtils 小丑盒 弹窗工具包
178 * @class JokerBoxUtils
179 * @classdesc JokerBoxUtils
180 */
181class JokerBoxUtils {
182
183    /**
184     * 计算一个颜色数值的反色
185     * @param color 需要被计算的颜色数值
186     * @return {string} 计算结果 反色的颜色数值 16 进制
187     */
188    static invertColor(color) {
189        // 将颜色值转换为 RGB 格式
190        const r = parseInt(color.substring(1, 3), 16);
191        const g = parseInt(color.substring(3, 5), 16);
192        const b = parseInt(color.substring(5, 7), 16);
193
194        // 计算反色值
195        const invertedR = 255 - r;
196        const invertedG = 255 - g;
197        const invertedB = 255 - b;
198
199        // 将反色值转换为十六进制格式，并返回结果
200        return '#' + invertedR.toString(16).padStart(2, '0') + invertedG.toString(16).padStart(2, '0') + invertedB.toString(16).padStart(2, '0');
201    }
202
203}