admin

6-HTML5/4_控制表单.html

@@ -18,6 +18,12 @@
     <!-- label 标签  用于绑定表单元素  for属性用于绑定表单元素的id -->
     <label for="ck1">同意</label>
 
+    <form action="xxx.php">
+        <input type="text" name="username" placeholder="请输入用户名" value="xxx">
+        <input type="range" max="100" min="0" value="10">
+        <input type="submit" value="提交">
+        <input type="reset" value="重置">
+    </form>
     <script>
         var oInp = document.getElementById("inp1");
         var oBtn = document.getElementById("btn");

6-HTML5/练习1_表单控制.html

@@ -133,11 +133,12 @@
             width: 200px;
             height: 200px;
             background-color: gray;
-            border:1px solid blue;
+            border: 1px solid blue;
             display: flex;
             justify-content: center;
             align-items: center;
-        
+            transition: all 0.5s linear;
+            border-radius: 10px;
         }
 
         /* content end */
@@ -154,6 +155,7 @@
         </header>
         <div class="content main-width">
             <aside>
+            <form>
                 <h2>控制面板</h2>
                 <div class="inp1">
                     <p>元素大小: 200px</p>
@@ -177,7 +179,7 @@
                     </div>
                 </div>
                 <div class="inp5">
-                    <p>边框样式</p>
+                    <p>文本颜色</p>
                     <div class="color-content">
                         <input type="color">
                         <input type="text">
@@ -201,8 +203,9 @@
                     <label for="is-shadow">开启阴影</label>
                 </div>
                 <div class="inp9">
-                    <button>重置样式</button>
+                    <button type="reset">重置样式</button>
                 </div>
+                </form>
             </aside>
             <article>
                 <h2>预览区域</h2>
@@ -217,6 +220,86 @@
 
         </footer>
     </div>
+    <script>
+        // 获取元素
+        var oBox = document.querySelector(".box");
+
+
+
+        // 绑定事件
+        // 元素大小
+        var inp1 = document.querySelector(".inp1");
+        var inp1Text = inp1.querySelector("p");
+        inp1 = inp1.querySelector("input");
+        inp1.oninput = function () {
+            console.log(this.value);
+            inp1Text.innerText = "元素大小：" + this.value + "px";
+            oBox.style.width = this.value + "px";
+            oBox.style.height = this.value + "px";
+        }
+        // 圆角大小
+        var inp2 = document.querySelector(".inp2 input");
+        var inp2Text = document.querySelector(".inp2 p");
+        console.log(inp2)
+        inp2.oninput = function () {
+            oBox.style.borderRadius = this.value + "px";
+            inp2Text.innerText = "圆角大小：" + this.value + "px";
+        }
+
+        // 修改背景色
+        var inp3 = document.querySelector(".inp3 input[type='color']");
+        var inp3Text = document.querySelector(".inp3 input[type='text']");
+        inp3.oninput = function () {
+            oBox.style.backgroundColor = this.value;
+            inp3Text.value = this.value;
+        }
+
+        // 改变文本内容
+        var inp4 = document.querySelector(".inp4 input");
+        inp4.oninput = function () {
+            oBox.innerText = this.value;
+        }
+
+        // 改变文本颜色
+        var inp5 = document.querySelector(".inp5 input[type='color']");
+        var inp5Text = document.querySelector(".inp5 input[type='text']");
+        inp5.oninput = function () {
+            oBox.style.color = this.value;
+            inp5Text.value = this.value;
+        }
+
+        // 改变边框样式
+        var inp6 = document.querySelector(".inp6 select");
+        inp6.onchange = function () {
+            console.log(this.value);
+            oBox.style.borderStyle = this.value;
+        }
+        // 改变边框宽度
+        var inp7 = document.querySelector(".inp7 input");
+        var inp7Text = document.querySelector(".inp7 p");
+        inp7.oninput = function(){
+            oBox.style.borderWidth = this.value + "px";
+            inp7Text.innerText = "边框宽度：" + this.value + "px";
+        }
+
+        // 改变阴影效果
+        var inp8 = document.querySelector(".inp8 input");
+        inp8.onchange = function(){
+            console.log(this.checked)
+            if(this.checked){
+                oBox.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
+            }else{
+                oBox.style.boxShadow = "none";
+            }
+        }
+
+        // 重置样式
+        var inp9 = document.querySelector(".inp9 button");
+        inp9.onclick = function(){
+            oBox.style = "";
+        }
+
+    </script>
 </body>
 
 </html>