Click here for free DL of the app version that can save data.

No:20309

←

Prev Next

→

Colour blender
Developer User8892｜Date and time 23/10/9 4:52:10
Build time 10.969 sec｜Game capacity 2.598KB｜

Script

Колор-блендер

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<html>
<head>
    <title>Color Blender</title>
    <style>
        body {
            background-color: #f1f1f1;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        h1 {
            color: #333;
        }
        
        #color1, #color2 {
            width: 50%;
            height: 150px;
            margin: 20px auto;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        
        #result {
            width: 50%;
            height: 150px;
            margin: 20px auto;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        
        #output {
            width: 100%;
            font-size: 24px;
            margin-top: 20px;
            color: #666;
        }
    </style>
</head>
<body>
    <h1>Колор-блендер</h1>
    
    <div>
        <input type="color" id="colorInput1" onchange="blendColors()" />
        <input type="color" id="colorInput2" onchange="blendColors()" />
    </div>
    
    <div id="color1"></div>
    <div id="color2"></div>
    
    <div id="result"></div>
    
    <p id="output"></p>
    
    <script>
        function blendColors() {
            var color1 = document.getElementById("colorInput1").value;
            var color2 = document.getElementById("colorInput2").value;
            
            document.getElementById("color1").style.backgroundColor = color1;
            document.getElementById("color2").style.backgroundColor = color2;
            
            var r1 = parseInt(color1.substr(1, 2), 16);
            var g1 = parseInt(color1.substr(3, 2), 16);
            var b1 = parseInt(color1.substr(5, 2), 16);
            
            var r2 = parseInt(color2.substr(1, 2), 16);
            var g2 = parseInt(color2.substr(3, 2), 16);
            var b2 = parseInt(color2.substr(5, 2), 16);
            
            var r = Math.floor((r1 + r2) / 2);
            var g = Math.floor((g1 + g2) / 2);
            var b = Math.floor((b1 + b2) / 2);
            
            var blendedColor = "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
            
            document.getElementById("result").style.backgroundColor = blendedColor;
            document.getElementById("output").textContent = "Смешаный цвет: " + blendedColor;
        }
        
        function componentToHex(c) {
            var hex = c.toString(16);
            return hex.length == 1 ? "0" + hex : hex;
        }
    </script>
</body>
</html>