https://yifanads.com/web/CounterColorCalculator/?language=en

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="utf-8">
6    <title>Inverse calculator</title>
7    <meta name="keywords" content="Inverse">
8    <meta name="description" content="">
9    <meta name="renderer" content="webkit">
10    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
11    <meta name="viewport" content="width=device-width, initial-scale=1">
12    <link href="/layui/css/layui.css?v=2" rel="stylesheet">
13    <link href="/layui/css/global.css?v=1" rel="stylesheet">
14    <link rel="icon" type="image/png" href="img/logo.png" sizes="32x32">
15    

15<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8024055951217142" crossorigin="anonymous"></script>

15
16    

16<script>
17        (function() {
18            if (window.JSON && window.JSON.parse) {
19                var c = document.getElementsByTagName("head"),
20                    a = document.createElement("link");
21                try {
22                    var b = JSON.parse(localStorage.lefan)
23                } catch (d) {
24                    b = {}
25                }
26                "dark" === b.themeMode && (a.href = "/layui/css/layui-theme-dark.css", a.rel = "stylesheet", a.id = "layui_theme_css", c[0].appendChild(a))
27            }
28        })();
29    </script>

29
30    

30<script>
31        var _hmt = _hmt || [];
32        (function() {
33            var hm = document.createElement("script");
34            hm.src = "https://hm.baidu.com/hm.js?f290718d314a8f84e0048bd583d29bdd";
35            var s = document.getElementsByTagName("script")[0];
36            s.parentNode.insertBefore(hm, s);
37        })();
38    </script>

38
39    <style>
40        .grid-demo {
41            height: 200px;
42        }
43
44        @media screen and (max-width:767.98px) {
45            .grid-demo {
46                height: 100px;
47            }
48        }
49    </style>
50</head>
51
52<body>
53    <div class="layui-header ws-header ws-bg-light">
54        <div class="layui-container">
55            <div class="ws-logo1">
56                <a href="/">
57                    <img src="/web/img/web_logo.png" alt="乐凡网络">
58                </a>
59            </div>
60            <div class="header-center">Inverse calculator</div>
61            <div class="ws-header-menu">
62                <ul class="layui-nav layui-bg-gray ws-bg-light" id="LAY_NAV_TOP">
63                    <li class="layui-nav-item">
64                        <a href="/app?package=colour&language=en" style="color:#4395ff;"><i class="layui-icon layui-icon-android"></i>
65                            <i class="layui-icon layui-icon-ios"></i>&nbsp;
66                            Download APP</a>
67                    </li>
68                    <li class="layui-nav-item">
69                        <a href="javascript:;">English</a>
70                        <dl class="layui-nav-child layui-nav-child-c">
71                             <dd lay-unselect><a href="?language=zh">中文</a></dd>
72                            <dd lay-unselect class="layui-this"><a href="?language=en">English</a></dd>                        </dl>
73                    </li>
74                </ul>
75                <div class="ws-header-more">
76                    <i class="layui-icon layui-icon-shrink-right"></i>
77                </div>
78                <div class="ws-header-tool ws-bg-light">
79                    <div class="layui-form ws-header-theme" lay-filter="header-theme">
80                        <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
81                        <div lay-checkbox>
82                            <i class="layui-icon layui-icon-moon"></i> |
83                            <i class="layui-icon layui-icon-light"></i>
84                        </div>
85                    </div>
86                </div>
87            </div>
88        </div>
89    </div>
90    <div class="ws-container">
91        <div class="layui-container">
92            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;text-align: center;">
93                <legend>Inverse calculator</legend>
94            </fieldset>
95            <div class="layui-row layui-col-space30" style="text-align: center;">
96                <div class="layui-col-md6 layui-col-xs6">
97                    <div class="grid-demo" id="bg1"></div>
98                </div>
99                <div class="layui-col-md6 layui-col-xs6">
100                    <div class="grid-demo" id="bg2"></div>
101                </div>
102            </div>
103            <div class="layui-row layui-col-space1" style="text-align: center;">
104                <div class="layui-col-md6 layui-col-xs6">
105                    <h2>Orthochromatic</h2>
106                    <div style="display: inline-block;margin-top: 20px;">
107                        <form class="layui-form" action="">
108                            <div class="layui-inline">
109                                <div class="layui-input-inline">
110                                    <input type="text" value="" class="layui-input" id="test-form-input">
111                                </div>
112                                <div id="test-form"></div>
113                            </div>
114                        </form>
115                    </div>
116                </div>
117                <div class="layui-col-md6 layui-col-xs6">
118                    <h2>Inverse color</h2>
119                    <div class="layui-input-inline" style="margin-top: 20px;">
120                        <input type="text" value="" class="layui-input" id="fan" disabled>
121                    </div>
122                </div>
123            </div>
124            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;text-align: center;">
125                <legend>Code</legend>
126            </fieldset>
127            <pre class="layui-code" lay-skin="notepad">
128function ColorReverse(OldColorValue) {
129        var OldColorValue = "0x" + OldColorValue.replace(/#/g, "");
130        var str = "000000" + (0xFFFFFF - OldColorValue).toString(16);
131        return '#' + str.substring(str.length - 6, str.length);
132    }
133      </pre>
134        </div>
135    </div>
136    <div class="layui-footer ws-footer">
137        <div>For more color features, please download <a href='/app?package=colour&language=en' style='color:#4395ff;'>APP Client</a></div>
138        </br>
139        <p>Copyright © 2023 lefan MIT Licensed<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow" style="margin-left: 20px;">豫ICP备18035111号-1</a>
140        <p>
141    </div>
142    <div class="ws-shade"></div>
143    

143<script src="/layui/layui.js?v=2"></script>

143
144    

144<script src="/layui/api.js"></script>

144
145    

145<script>
146        var $ = layui.$;
147        var colorpicker = layui.colorpicker;
148        $('#test-form-input').val("#1c97f5");
149        $('#bg1').css('backgroundColor', '#1c97f5');
150        var fColor = ColorReverse("#1c97f5");
151        $('#fan').val(fColor);
152        $('#bg2').css('backgroundColor', fColor);
153        var form = layui.form;
154        try {
155            var b = JSON.parse(localStorage.lefan)
156        } catch (d) {
157            b = {}
158        }
159        form.val('header-theme', {
160            "theme-mode": b.themeMode === "dark"
161        });
162        form.on('switch(header-theme-mode)', function(data) {
163            localStorage.setItem("lefan", JSON.stringify({
164                "themeMode": this.checked ? "dark" : "light"
165            }))
166            if (this.checked) {
167                if (document.getElementById('layui_theme_css') == null) {
168                    var c = document.getElementsByTagName("head"),
169                        a = document.createElement("link");
170                    a.href = "/layui/css/layui-theme-dark.css", a.rel = "stylesheet", a.id = "layui_theme_css", c[0].appendChild(a);
171                } else {
172                    document.getElementById('layui_theme_css').setAttribute('href', '/layui/css/layui-theme-dark.css')
173                }
174            } else {
175                document.getElementById('layui_theme_css').removeAttribute('href');
176            }
177        });
178        $(".ws-header-more").on("click", function() {
179            $("body").addClass("ws-nav-show ws-shade-show");
180        });
181        $(".ws-shade").on("click", function() {
182            $("body").removeClass("ws-nav-show ws-shade-show");
183        });
184        //表单赋值
185        colorpicker.render({
186            elem: '#test-form',
187            color: '#1c97f5',
188            done: function(color) {
189                $('#test-form-input').val(color);
190                $('#bg1').css('backgroundColor', color);
191                var fColor1 = ColorReverse(color);
192                $('#fan').val(fColor1);
193                $('#bg2').css('backgroundColor', fColor1);
194            }
195        });
196        layui.code({
197            about: false,
198            title: 'JavaScript'
199        });
200
201        function ColorReverse(OldColorValue) {
202            var OldColorValue = "0x" + OldColorValue.replace(/#/g, "");
203            var str = "000000" + (0xFFFFFF - OldColorValue).toString(16);
204            return '#' + str.substring(str.length - 6, str.length);
205        }
206    </script>

206
207</body>
208
209</html>