HTMLとブートストラップを用いたRGBカラーピッカー

4672 ワード
webdev html beginners テキストリンク
今日、私は、RGBとカラーストラップを使用してカラーピッカーを作成しました.それは楽しみのようでした、そして、開発の10分以内にこれを完了しました.
ここでは、ライブDEMOです

このデモをビルドするための技術

  • HTML
  • CSS (インライン)
  • ブートストラップ5 , 5656 , 9182
  • JavaScript (数行)

    • コードスニペット


    コードを見たいなら、コードスニペットのリンクです
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RGB Color Chooser</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body style="background-color: black;">
    <header>
        <h1 class="text-center my-4 font-monospace text-white">RGB COLOR PICKER</h1>
    </header>
    <div class="container">
        <div class="row">
            <div class="col-md-4"></div>
            <div id="result" class="shadow rounded col-md-4 d-flex justify-content-center p-5 my-5" style="background-color: rgb(127,127,127);">

            </div>
            <div class="col-md-4"></div>
        </div>
        <div class="row">
            <div class="col-md-4 col-lg-4 p-5">
                <p class="text-center text-white">RED</p>
                <input type="range" class="form-range" min="0" max="255" step="1" id="customRange1" oninput='OutputIdRed.value = customRange1.value' onchange="changebackground()">
                <output class="text-center text-white" style="display: block;" id="OutputIdRed">127</output>
            </div>
            <div class="col-md-4 col-lg-4 p-5">
                <p class="text-center text-white">GREEN</p>
                <input type="range" class="form-range" min="0" max="255" step="1" id="customRange2" oninput='OutputIdGreen.value = customRange2.value' onchange="changebackground()">
                <output class="text-center text-white" style="display: block;" id="OutputIdGreen">127</output>
            </div>
            <div class="col-md-4 col-lg-4 p-5">
                <p class="text-center text-white">BLUE</p>
                <input type="range" class="form-range" min="0" max="255" step="1" id="customRange3" oninput='OutputIdBlue.value = customRange3.value' onchange="changebackground()">
                <output class="text-center text-white" style="display: block;" id="OutputIdBlue">127</output>
            </div>
        </div>
    </div>

    <script>

        function changebackground(){
            document.getElementById('result').style.backgroundColor = 'rgb(' + document.getElementById("OutputIdRed").value + ',' + document.getElementById("OutputIdGreen").value + ',' + document.getElementById("OutputIdBlue").value + ')';
        }
    </script>
</body>
</html>

    この点で学ぶポイント

  • ブートストラップクラス
  • JavaScriptを使用しないでスクロール値を表示します.
    • それで、あなたがコードをチェックしたならば.
    <input type="range" class="form-range" min="0" max="255" step="1" id="customRange1" oninput='OutputIdRed.value = customRange1.value' onchange="changebackground()">
<output class="text-center text-white" style="display: block;" id="OutputIdRed">127</output>
    ここでは、ユーザーが選択したスクロール値を示します.そのため、OnInputフィールドを使用し、出力フィールドにユーザー選択値を設定します.
    まとめ
    今日、我々はユーザーがRGB値に基づいて実際の色を見ることができる小さなデモを作成しました.我々は、HTMLとブートストラップを使用してデモを作成している.また、我々は10分以内に開発したこの小さなデモから学ぶことができる重要なポイントをカバーしている😀. この動画はお気に入りから削除されています.
    私もTwitterでいくつかの有用なコンテンツを投稿しています.それで、あなたたちはそこで私に従うことができます.
    Java String Poolとは?
    cron選択肢としてのシステムタイマー