スパルタWebページ開発総合半ホームページ画面

57922 ワード

ホームページ画面を作成します.
前の計画資料の画面設計を参考に作成します.あなたが望むデザートの種類を選ぶと、それに関連する特性が現れます.プロパティを選択した後、下部の「Dessert」ボタンを押すと、条件を満たすスイーツリストの1つをランダムに出力するモードウィンドウが表示されます.

メインスクリーン

<div class="title">나는 원한다</div>
    <div class="content">

        <div class="container">
            <input type="radio"
                   name="size"
                   id="bread"
                   value="1">

            <label for="bread"></label>

            <input type="radio"
                   name="size"
                   id="drink"
                   value="2">

            <label for="drink"> 음료수</label>

            <input type="radio"
                   name="size"
                   id="icecream"
                   value="3">

            <label for="icecream"> 아이스크림</label>

            <input type="radio"
                   name="size"
                   id="snack"
                   value="4">

            <label for="snack"> 과자</label>

        </div>

スタイル

  <style>
        /** {*/
        /*    !*폰트는 나눔명조를 사용한다*!*/
        /*    font-family: 'Nanum Myeongjo', serif;*/
        /*}*/

        body {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            max-width: 700px;
            margin: 100px auto 0px auto;
            height: 600px;

        }

        .title {
            font-size: 60px;
        }

        .content {
            width: 100%;
            height: 400px;
            border: 1px solid black;
            background: antiquewhite;


        }

        .button_wrap {
            display: flex;
            justify-content: flex-end;
            font-size: 55px;
        }

        .sub_btn {
            font-size: 55px;
            outline: none;
            border-radius: 40%;
            transition: 0.5s;
        }

        .sub_btn:hover {
            background: blue;
            transition: 0.5s;
        }
        </style>
現在の画面

アイテムをチェックして[プロパティを選択](Select Properties)ウィンドウを出力


ラジオボタンのいずれかを選択した場合は、divを出力して条件を示す必要があります.

  • 練習用にindexにdivを作成します.
          <div class="box 1"><h2>빵을 고르셨습니다.</h2></div>
           <div class="box 2"><h2>음료수을 고르셨습니다.</h2></div>
           <div class="box 3"><h2>아이스크림을 고르셨습니다.</h2></div>
           <div class="box 4"><h2>과자를 고르셨습니다.</h2></div>
    

  • 選択したアイテムのvalue値を読み込み、クラス名が追加されたクラス名を読み込む変数を宣言します.
     var inputValue = $(this).attr("value")
     var targetBox =$("." + inputValue);

  • この変数以外のすべてのdivを非表示にし、選択したアイテムのみを表示します.
  • $(".box").not(targetBox).hide();
    $(targetBox).show()
    -これらのすべての操作は、ページのロード直後に実行されます.
     $(document).ready(function(){
            $('input[type="radio"]').click(function(){
                var inputValue = $(this).attr("value")
                var targetBox =$("." + inputValue);
                $(".box").not(targetBox).hide();
                $(targetBox).show()
            });
        })
    
    現状

    次に、各プロジェクトにプロパティ付きのボタンを生成します.
    アイテムをチェックすると、テキストではなくチェックボックスが印刷されます.
     <div class="box 1">// 빵을 선택했을때
                <div class="container_two">
                    <div>
                        <label class="check_obj">
                            <input  class="dessert_check"type="checkbox" >
                            <span>Dubai</span>
                        </label>
                    </div>
                    <div>
                        <label class="check_obj">
                            <input class="dessert_check" type="checkbox" name="">
                            <span>메롱시티</span>
                        </label>
                    </div>
                    <div>
                        <label class="check_obj">
                            <input class="dessert_check" type="checkbox" name="">
                            <span>스폰지밥</span>
                        </label>
                    </div>
                    <div>
                        <label class="check_obj">
                            <input class="dessert_check" type="checkbox" name="">
                            <span>광주</span>
                        </label>
                    </div>
                    <div>
                        <label class="check_obj">
                            <input class="dessert_check" type="checkbox" name="">
                            <span>대전</span>
                        </label>
                    </div>
    
                </div>
    格子のスタイルも別途作ります.
    
            .container_two {
    
                max-width: 700px;
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;
            }
    
            .container_two div {
                margin: 10px;
    
            }
    
            .check_obj {
                cursor: pointer;
            }
    
            .check_obj input[type="checkbox"] {
                display: none;
            }
    
            .check_obj span {
                position: relative;
                display: inline-block;
                background: #424242;
                padding: 15px 30px;
                color: #555;
                text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
                border-radius: 30px;
                font-size: 20px;
                transition: 0.5s;
                user-select: none;
                overflow: hidden;
            }
    
            .check_obj span:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 50%;
                background: rgba(255, 255, 255, .1);
            }
    
    
            .check_obj input[type="checkbox"]:checked ~ span {
                background: #0f0;
                color: #fff;
                box-shadow: 0 2px 20px #0f0;
            }

    他の項目を選択するときにチェックボックスを初期化


    ユーザーが1つのプロジェクトと1つのチェックボックスを選択した場合、そのプロジェクトのチェックボックスを選択し、別のプロジェクトのradiobuttonをクリックすると、初期化操作が行われます.他のプロジェクトのcheckbox値を追加できないため、1つのプロジェクトのcheckbox値に基づいてデータベースに必要な値を表示することを目的とします.
  • radioButtonをチェックするたびに、残りのcheckboxchecked値が初期化されます.
    したがって,以前に記述した$(document).readyだけでなく,コードも記述し,これらのチェックボックスの値をすべてcheckboxに変更した.
  •    $(document).ready(function () {
            $('input[type="radio"]').click(function () {
                var inputValue = $(this).attr("value")
                var targetBox = $("." + inputValue);
                $(".box").not(targetBox).hide();
                $(targetBox).show()
                var obj = document.getElementsByClassName('dessert_check');
                for (var i = 0; i< obj.length; i++){
                    obj[i].checked = false;
                }
    
            });
        })

    変更


    背景画面に動画を入れたいので、背景画面を修正しました.
    「body-wrapper」クラスと「video bg」クラスが生成され、背景画面の代わりにビデオファイルが使用されるようになった.
    <div class="body_wrapper">
        <div class="video_bg">
    
             <video muted autoplay loop>
                <source src="../static/video/dessert.mp4" type="video/mp4">
           </video>
    
        </div>
        <div class="content_wrapper" ...>
    </div>
    
    対応するcssプロパティを作成し、cssファイルを参照するために外部に移動します.
    `static/index.css
    
    body {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        background: #0c0c0c;
    }
    
    .body_wrapper{
        background:#0c0c0c;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 1200px;
        height: 1000px;
        margin: 0 auto;
        position: relative;
        z-index:1;
    }
    .video_bg{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    video {
    
        width: 100%;
        height: 100%;
        object-fit: cover;
        -o-object-fit: cover;
    
    }

    Desertボタンを押して表示するモード実装


    ユーザーは、アイテムとチェックボタンを選択し、Dessertボタンを押して、その条件を満たすメニューにモードウィンドウをランダムに表示します.
    </div>
        <div class="modal">
            <div class="modal_body">
    
                 <button class="close_btn">닫기</button>
            </div>
    
        </div>
    </div>
    
    false
    
    .modal {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        background-color: rgba(0,0,0,0.4);
        z-index: 5;
    
    }
    
    
    .modal_body{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        height: 600px;
        padding: 40px;
        background-color :rgb(255,255,255);
        border-radius: 10px;
        box-shadow: 0 2px 3px 0 rgba( 34, 36, 38 , 0.15);
        transform: translateX(-50%) translateY(-50%);
    }
    
    .close_btn{
    
        position: absolute;
        bottom:0;
        left: 50%;
        transform: translateX(-50%)  translateY(-50%);
        border: none;
        padding: 15px 30px;
        border-radius: 15px;
        text-decoration: none;
        font-weight: 600;
        transition: 0.25s;
        background-color: aliceblue;
        color:#a5d8ff;
    }
    
    .close_btn:hover{
        letter-spacing: 2px;
        transform: scale(1.2) translateX(-50%)  translateY(-50%); ;
    
    
        cursor: pointer;
    }
    
    現状