ネット中間試験

74541 ワード
CSS html JavaScript テキストリンク
本当に勉強になりましたが…結局どこにあるかわからず苦い.
解けるときに知らない概念はないので、時間が足りないと思います.
今までやってきたHTML、CSS、JSを客観的に評価できる良い機会だと思います.知っていることから早く解きたい、正しい概念が覚えられないなら、その部分を横に置いて、後ろから解きたい.しかし、私の予想とは違って、細部では「私はまだ足りない」と感じています.时间を决めて指定の任务をするのは意义があって、最も重要なのは、、、とても面白いです!!その緊張感.いつかまた感じられるのかな?
友達もやってみよう!
時間制限は1時間半!
コードは私が試験中に解いたコードです.
皆さん、楽しんでください!!
できるだけ早く正解コードを作ってアップロードします.😎

質問する




コード#コード#


1番

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>Homework week2</title>
    <style type="text/css">
        div { width: 400px;}
        label {cursor: pointer;}
        label p {
          display: flex;
          justify-content: center;
        }
        label input {
          width: 370px;
          height: 30px;
        }
        label select {
          width: 370px;
          height: 30px;
        }
        input, select{ margin-left: 10px; }

        .title {
          background-color: gray;
          width: 400px;
          height: 40px;
          font-size: 20px;
          background-color: gray;
          color: aliceblue;
          margin-bottom : 30px;
          display: flex;
          align-items: center
        }
        .title p { margin-left: 10px; }
        #submit:hover {
          background-color: gray;
          color: white;
        }
        .reset:hover {
          background-color: gray;
          color: white;
        }
        #submit {
          width: 160px;
          height: 30px;
          /* border-radius: 10px; */
          background-color: gray;
          border-style: none;
          color: rgb(66, 61, 61);
          font-weight: bolder;
        }
        .reset {
          width: 160px;
          height: 30px;
          /* border-radius: 10px; */
          background-color: gray;
          border-style: none;
          color: rgb(66, 61, 61);
          font-weight: bolder;
        }
        .submit_form {
          width: 400px;
          height: 80px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .id_form {
          width: 400px;
          height: 300px;
          border: 5px black solid;
          border-radius: 30px;
        }

        #searches:hover {
          width: 600px;
          height: 500px;
        }
        #searches:hover .id_form p { font-size: 30px; }
    </style>
    
    <script>
        function start() {
            var Btn = document.getElementById( "submit" );
            Btn.addEventListener("click", btn_func, false);
        }

      	function btn_func(){
            var name = document.getElementById("name");
            var student_num = document.getElementById("student_num");
            var year_num = document.getElementById("year_num");
            var status = document.getElementById("status");
            var birthday = document.getElementById("birthday");
            var department = document.getElementById("department");

            if(name.value == "") {
              alert("이름을 입력 하세요");
              return;
            }
            if(student_num.value == "") {
              alert("학번을 입력 하세요");
              return;
            }
            if(year_num.value == "") {
              alert("학년을 입력 하세요");
              return;
            }
            if(status.value == "") {
              alert("상태를 입력 하세요");
              return;
            }
            if(birthday.value == "") {
              alert("생년월일을 입력 하세요");
              return;
            }
            if(department.value == "") {
              alert("학과를 입력 하세요");
              return;
            }

            var markup = "<div class = 'id_form'>";
            markup += "<p> 학생증 </p>";      
            markup += 
          "<p>"+ "이름 " + name.value + "</p>"+ 
            "<p>"+ "학번 " + student_num.value + "</p>" +
            "<p>"+ "학년 " + year_num.value + "</p>" +
            "<p>"+ "상태 " + status.value + "</p>" + 
            "<p>"+ "생년월일 " + birthday.value + "</p>" +
            "<p>" + "소속 " + department.value + "</p>"  ;

            markup += "</div>";

            document.getElementById("searches").innerHTML = markup;

        }

   	window.addEventListener( "load", start, false );

    </script>
  </head>

  <body>	
    <div class="title">
      <p> 학생증 만들기</p>
    </div>
    <form action = "#">
      <div>
        <label>
          <p>이름</p>
          <input id="name" type="text" placeholder="이름 입력 "/>
        </label>
      </div>

      <div>
        <label>
          <p>학번</p>
          <input id="student_num" type="text" placeholder="학번 입력"/>
        </label>
      </div>

      <div>
        <label>
          <p>학년</p>
          <input id="year_num" type="text" list="year" placeholder="학년 입력"/>

          <datalist id="year">
            <option value="1학년"></option>
            <option value="2학년"></option>
            <option value="3학년"></option>
            <option value="4학년"></option>
          </datalist>
        </label>
      </div>

      <div>
        <label for="txtList">
          <p>상태</p>
          <select id = "status" form="status_form">
            <option value="재학">재학</option>
            <option value="졸업">졸업</option>
            <option value="휴학">휴학</option>
            <option value="군휴학">군휴학</option>
          </select>

        </label>
      </div>

      <div>
        <label>
          <p>생년월일</p>
          <input id="birthday" type="date" />
        </label>
      </div>

      <div>
        <label>
          <p>소속 학과</p>
          <input id="department" type="text" placeholder="학과 입력" />
        </label>
      </div>

      <div class="submit_form">
        <input id="submit" type="submit" value="학생증 출력" cursor="pointer" />
        <input class="reset" type="reset" value="초기화" cursor="pointer" />
      </div>
    </form>
    
    <div id = "searches">
    </div>
    
  </body>
</html>
ひどい...面白くない感じが強いです.時間があるときはもう一回混んでください
1号を解いて「コアだ!!」感じたのはinputラベルにdatalistを使うこと...程度?入力は受け入れられますが、宣言されたdatalistで選択することもできます!!
この部分を除いて、残りはもともと知っていたので、たくさん書いたので、まあまあ簡単でした.
待望の2号...
実は完璧に終わって1日も1時間くらい?見つかる気がする
実力が良ければすぐやるけど….1時間半で1番2号を完璧に実現した人はいますか?どれだけ早くできるんだろう

2番

	<!DOCTYPE html>

<html>
<head>
    <style type="text/css">
        .main_form {
            display: block;
        }
        .big_box {
            display: flex;
            flex-wrap: wrap;
            width: 400px;
        }
        a {
            display: flex;
            width: 150px;
            height: 70px;
            padding: 0;
            margin : 5px;
            border: 1px blue solid;
            text-align: center;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            font-size: 50px;
        }
    </style>
    <script>
        var tags;

        function load_div() {
            // console.log("enter_load_div");
            var length = localStorage.length;
            tags = [];

            for (var i = 0; i < length; ++i) {
                tags[i] = localStorage.key(i);
            }

            tags.sort(); // sort the keys

            var markup = "<div class = big_box>";

            for (var i in tags) {
                var src = localStorage.getItem(tags[i]);
                
                markup += 
                    "<a href = 'https://" +
                        src + "' target='right' >" + 
                        tags[i] +
                    "</a>";
            }

            markup += "</div>";
            document.getElementById("searches").innerHTML = markup; 
        }

        function AddBtn_func() {
            var title = document.getElementById("title");
            var src = document.getElementById("src");

            if (localStorage.length > 9) {
                alert("요소의 최대 개수는 10개입니다.");
                return;
            }

            if(title.value == "") {
                alert("title 입력 하세요");
                return;
            }

            if(src.value == "") {
                alert("src 입력 하세요");
                return;
            }
            
            for( var i = 0; i < localStorage.length; ++i){
                if(title.value == localStorage.key(i)) {
                    alert("중복된 title이 있습니다");
                    return;
                }
            }
            localStorage.setItem(title.value, src.value); 
            title.value = "";
            src.value = ""; 

            load_div();
        }

        function DeleteBtn_func() {
            var title = document.getElementById("title");
            var src = document.getElementById("src");

            localStorage.removeItem( title.value );

            title.value = "";
            src.value = ""; 

            load_div();
        }

        function ClearBtn_func() {
            var title = document.getElementById("title");
            var src = document.getElementById("src");

            localStorage.clear();

            title.value = "";
            src.value = ""; 

            load_div();
        }

        function start() {
            var AddBtn = document.getElementById( "AddButton" );
            AddBtn.addEventListener("click", AddBtn_func, false);

            var DeleteBtn = document.getElementById( "DeleteButton" );
            DeleteBtn.addEventListener( "click", DeleteBtn_func, false );
            
            var ClearBtn = document.getElementById( "ClearButton" );
            ClearBtn.addEventListener("click", ClearBtn_func, false);

            load_div();
        }

        window.addEventListener( "load", start, false );

    </script>
</head>
<body>
    <div class="main_form"> 
        <div>
            <p> 즐겨찾기 제목 <input id = "title" type="text"></p>
            <p> 즐겨찾기 링크 <input id = "src" type="text"></p>
            <p>
                <input type = "button" 
                    value = "즐겨찾기 추가" 
                    id = "AddButton">
                <input type = "button" 
                    value = "즐겨찾기 삭제"
                    id = "DeleteButton">
                <input type = "button" 
                    value = "모두 삭제"
                    id = "ClearButton">
            </p>
        </div>
        
        <div id = "searches"></div>
    </div>
    <iframe name = "right" width ="50%" height = "70%"></iframe>
</body>
</html>
2番のコアはだいたい見ればわかる…!
ローカルストレージコンセプト
ローカルストレージを日頃から学んでいるので、実施しやすいです.それは一体なぜ時間が足りないのか…!!!
本当に无言で意味のないところに20分近く书きました.それは.
markup +="<a href = 'https://" + src 
  + "' target='right' >" + tags[i] + "</a>";
<iframe name = "right" width ="50%" height = "70%"></iframe>
aラベルとiframe!!見るからに無言だ.どうやって?ほほほ...
右の窓に表示させてもらいます.それでいいです.終わったらNAVERで
テストしましたが・・・これはどうしてだめですか.本当に世界を失ったように憂鬱
だから仕方なくそのまま提出しました!!
ネイバーだけじゃダメだったのか…他のサイトの動きが良かった…!!!
これはどんな気持ちが本当にとても良いです...幸せすぎる.😃
ネイバーがなぜダメなのか分からないNAVERが止めたようでなぜか止めた
結論は...試験が終わりました~!!!✌️
【メモ】情緒-同理心訓練
拡張gitタグ