如何显示动态变化页面背景的当前HEX颜色代码？

你只需要在现有代码的setInterval回调函数中，添加一行代码来更新testval元素的内容即可，具体修改如下：

修改后的核心代码片段 #

setInterval(function() {
    var bgColor = color();
    var textColor = invertColor(bgColor, true);
    document.getElementById("body").style.backgroundColor = bgColor;
    document.getElementById("name").style.color = textColor;
    document.getElementById("intro").style.color = textColor;
    // 新增这行代码，将当前HEX颜色值显示到testval元素中
    document.getElementById("testval").textContent = bgColor;
}, 3000);

完整修改后的页面代码 #

<body class="index-page" id="body" style="user-select: none; cursor: none">
    <div class="cursor"></div>
    <div class="wrapper" onmousedown='return false;' onselectstart='return false;'>
        <div id="container" style="background-color: transparent !important;"></div>
        <main class="" id="content" style="">
            <div class="heroindex text-center" style="">
                <h1 class="white texth ctabtn" style="background-color: transparent; font-weight: bold; color: black;" id="name">Jonathan Lee</h1>
            </div>

        </main>
        <div id="intro" style="height: 500px; text-align: center">
            <h2>Current Colour</h2>
            <p id="testval"></p>
        </div>
    </div>
    <script>
        function invertColor(hex, bw) {
            if (hex.indexOf('#') === 0) {
                hex = hex.slice(1);
            }
            // convert 3-digit hex to 6-digits.
            if (hex.length === 3) {
                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
            }
            if (hex.length !== 6) {
                throw new Error('Invalid HEX color.');
            }
            var r = parseInt(hex.slice(0, 2), 16),
                g = parseInt(hex.slice(2, 4), 16),
                b = parseInt(hex.slice(4, 6), 16);
            if (bw) {
                return (r * 0.299 + g * 0.587 + b * 0.114) > 186 ?
                    '#000000' :
                    '#FFFFFF';
            }
            // invert color components
            r = (255 - r).toString(16);
            g = (255 - g).toString(16);
            b = (255 - b).toString(16);
            // pad each with zeros and return
            return "#" + padZero(r) + padZero(g) + padZero(b);
        }

        function padZero(str, len) {
            len = len || 2;
            var zeros = new Array(len).join('0');
            return (zeros + str).slice(-len);
        }

        var color = function getRandomColor() {
            var letters = '0123456789ABCDEF'.split('');
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    

        setInterval(function() {
            var bgColor = color();
            var textColor = invertColor(bgColor, true);
            document.getElementById("body").style.backgroundColor = bgColor;
            document.getElementById("name").style.color = textColor;
            document.getElementById("intro").style.color = textColor;
            // 新增代码：更新testval元素显示当前HEX颜色
            document.getElementById("testval").textContent = bgColor;
        }, 3000);

    </script>
</body>

说明 #

每次setInterval触发时，会生成新的随机背景色bgColor，在修改背景色和文字颜色后，直接将bgColor赋值给testval元素的textContent，就能实现每3秒同步更新显示当前的HEX颜色代码。

内容的提问来源于stack exchange，提问作者Jonathan Lee