add js files

wufengtao1 · Jul 20, 2021 · 3b1d911 · 3b1d911
1 parent 0c08d0c
commit 3b1d911
Show file tree

Hide file tree

Showing 46 changed files with 269 additions and 0 deletions.
diff --git a/css_14_选择器优先级/index.html → CSS/css_14_选择器优先级/index.html b/css_14_选择器优先级/index.html → CSS/css_14_选择器优先级/index.html
diff --git a/css_15_关系选择器/index.html → CSS/css_15_关系选择器/index.html b/css_15_关系选择器/index.html → CSS/css_15_关系选择器/index.html
diff --git a/css_16_后代选择器/index.html → CSS/css_16_后代选择器/index.html b/css_16_后代选择器/index.html → CSS/css_16_后代选择器/index.html
diff --git a/css_17_子元素选择器/index.html → CSS/css_17_子元素选择器/index.html b/css_17_子元素选择器/index.html → CSS/css_17_子元素选择器/index.html
diff --git a/css_18_伪类选择器/index.html → CSS/css_18_伪类选择器/index.html b/css_18_伪类选择器/index.html → CSS/css_18_伪类选择器/index.html
diff --git a/css_19_anchor伪类/index.html → CSS/css_19_anchor伪类/index.html b/css_19_anchor伪类/index.html → CSS/css_19_anchor伪类/index.html
diff --git a/css_20_伪元素选择器/index.html → CSS/css_20_伪元素选择器/index.html b/css_20_伪元素选择器/index.html → CSS/css_20_伪元素选择器/index.html
diff --git a/css_21_餐厅练习/LICENSE → CSS/css_21_餐厅练习/LICENSE b/css_21_餐厅练习/LICENSE → CSS/css_21_餐厅练习/LICENSE
diff --git a/css_21_餐厅练习/README.md → CSS/css_21_餐厅练习/README.md b/css_21_餐厅练习/README.md → CSS/css_21_餐厅练习/README.md
diff --git a/css_21_餐厅练习/favicon.png → CSS/css_21_餐厅练习/favicon.png b/css_21_餐厅练习/favicon.png → CSS/css_21_餐厅练习/favicon.png
diff --git a/css_21_餐厅练习/index.html → CSS/css_21_餐厅练习/index.html b/css_21_餐厅练习/index.html → CSS/css_21_餐厅练习/index.html
diff --git a/css_21_餐厅练习/jquery.js → CSS/css_21_餐厅练习/jquery.js b/css_21_餐厅练习/jquery.js → CSS/css_21_餐厅练习/jquery.js
diff --git a/css_21_餐厅练习/levels.js → CSS/css_21_餐厅练习/levels.js b/css_21_餐厅练习/levels.js → CSS/css_21_餐厅练习/levels.js
diff --git a/css_21_餐厅练习/restaurant.js → CSS/css_21_餐厅练习/restaurant.js b/css_21_餐厅练习/restaurant.js → CSS/css_21_餐厅练习/restaurant.js
diff --git a/css_21_餐厅练习/style.css → CSS/css_21_餐厅练习/style.css b/css_21_餐厅练习/style.css → CSS/css_21_餐厅练习/style.css
diff --git a/css_21_餐厅练习/todo.txt → CSS/css_21_餐厅练习/todo.txt b/css_21_餐厅练习/todo.txt → CSS/css_21_餐厅练习/todo.txt
diff --git a/css_22_字体/index.html → CSS/css_22_字体/index.html b/css_22_字体/index.html → CSS/css_22_字体/index.html
diff --git a/css_24_盒子模型/index.html → CSS/css_24_盒子模型/index.html b/css_24_盒子模型/index.html → CSS/css_24_盒子模型/index.html
diff --git a/css_25_盒子模型(边框区)/index.html → CSS/css_25_盒子模型(边框区)/index.html b/css_25_盒子模型(边框区)/index.html → CSS/css_25_盒子模型(边框区)/index.html
diff --git a/css_26_盒子模型（内边距区）/index.html → CSS/css_26_盒子模型（内边距区）/index.html b/css_26_盒子模型（内边距区）/index.html → CSS/css_26_盒子模型（内边距区）/index.html
diff --git a/css_27_盒子模型（外边距区）/index.html → CSS/css_27_盒子模型（外边距区）/index.html b/css_27_盒子模型（外边距区）/index.html → CSS/css_27_盒子模型（外边距区）/index.html
diff --git a/css_28_盒子模型水平布局/index.html → CSS/css_28_盒子模型水平布局/index.html b/css_28_盒子模型水平布局/index.html → CSS/css_28_盒子模型水平布局/index.html
diff --git a/css_29_盒子模型垂直布局/index.html/index.html → CSS/css_29_盒子模型垂直布局/index.html/index.html b/css_29_盒子模型垂直布局/index.html/index.html → CSS/css_29_盒子模型垂直布局/index.html/index.html
diff --git a/css_30_行内元素的盒子模型/index.html → CSS/css_30_行内元素的盒子模型/index.html b/css_30_行内元素的盒子模型/index.html → CSS/css_30_行内元素的盒子模型/index.html
diff --git a/css_31_flex布局/index.html → CSS/css_31_flex布局/index.html b/css_31_flex布局/index.html → CSS/css_31_flex布局/index.html
diff --git a/css_32_Sass/1.css → CSS/css_32_Sass/1.css b/css_32_Sass/1.css → CSS/css_32_Sass/1.css
diff --git a/css_32_Sass/1.scss → CSS/css_32_Sass/1.scss b/css_32_Sass/1.scss → CSS/css_32_Sass/1.scss
diff --git a/css_32_Sass/index.html → CSS/css_32_Sass/index.html b/css_32_Sass/index.html → CSS/css_32_Sass/index.html
diff --git a/css_33_bootstrap/assets/ebook-cover.png → CSS/css_33_bootstrap/assets/ebook-cover.png b/css_33_bootstrap/assets/ebook-cover.png → CSS/css_33_bootstrap/assets/ebook-cover.png
diff --git a/css_33_bootstrap/assets/kindle.png → CSS/css_33_bootstrap/assets/kindle.png b/css_33_bootstrap/assets/kindle.png → CSS/css_33_bootstrap/assets/kindle.png
diff --git a/css_33_bootstrap/index.html → CSS/css_33_bootstrap/index.html b/css_33_bootstrap/index.html → CSS/css_33_bootstrap/index.html
diff --git a/css_5_example/index.html → CSS/css_5_example/index.html b/css_5_example/index.html → CSS/css_5_example/index.html
diff --git a/css_5_example/script.js → CSS/css_5_example/script.js b/css_5_example/script.js → CSS/css_5_example/script.js
diff --git a/css_5_example/style.css → CSS/css_5_example/style.css b/css_5_example/style.css → CSS/css_5_example/style.css
diff --git a/css_8_样式/style.css → CSS/css_8_样式/style.css b/css_8_样式/style.css → CSS/css_8_样式/style.css
diff --git a/css_8_样式/内联样式.html → CSS/css_8_样式/内联样式.html b/css_8_样式/内联样式.html → CSS/css_8_样式/内联样式.html
diff --git a/css_8_样式/内部样式.html → CSS/css_8_样式/内部样式.html b/css_8_样式/内部样式.html → CSS/css_8_样式/内部样式.html
diff --git a/css_8_样式/外部样式.html → CSS/css_8_样式/外部样式.html b/css_8_样式/外部样式.html → CSS/css_8_样式/外部样式.html
diff --git a/css_9_层叠/index.html → CSS/css_9_层叠/index.html b/css_9_层叠/index.html → CSS/css_9_层叠/index.html
diff --git a/css_9_继承/index.html → CSS/css_9_继承/index.html b/css_9_继承/index.html → CSS/css_9_继承/index.html
diff --git a/JavaScript/js_10_外部js/index.html b/JavaScript/js_10_外部js/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="zh-Hans">
+  <head>
+    <meta charset="utf-8">
+    <title>互动标签示例</title>
+    <style>
+      p {
+        width: 500px;
+        text-align: center;
+        border: 2px solid rgba(0, 0, 200, 0.6);
+        background: white;
+        color: green;
+        box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
+        border-radius: 10px;
+      }
+    </style>
+    <script src="./script.js" async></script>
+  </head>
+  <body>
+    <p>春晓</p>
+  </body>
+</html>
diff --git a/JavaScript/js_10_外部js/script.js b/JavaScript/js_10_外部js/script.js
@@ -0,0 +1,5 @@
+const para = document.querySelector('p');
+para.addEventListener('click', update);
+function update() {
+  para.textContent ='春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。';
+}
diff --git a/JavaScript/js_18_实战演练/index.html b/JavaScript/js_18_实战演练/index.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+<!-- 酒桌上，老板想让你开发一个猜数字游戏。程序随机选择一个 100 以内的自然数, 然后邀请玩家在 
+10 轮以内猜出这个数字。每轮后都应告知玩家的答案正确与否，如果出错了，则告诉他数字是低
+了还是高了。并且应显示出玩家前一轮所猜的数字。一旦玩家猜对，或者用尽所有机会，游戏将结
+束。游戏结束后，可以让玩家选择再次开始。 -->
+
+<!-- 算法设计：
+1.随机生成一个 100 以内的自然数。
+2.从1记录玩家当前的轮数。。
+3.为玩家提供一种提交数字的方法。
+4.一旦有结果提交，先将其记录下来，以便用户可以看到他们先前的猜测。
+5.然后检查它是否正确。
+6.如果正确：
+    显示祝贺消息。
+    阻止玩家继续猜测（不然会使游戏混乱）。
+    显示控件允许玩家重新开始游戏。
+7.如果出错，并且玩家有剩余轮次：
+    告诉玩家他们错了。
+    允许他们输入另一个猜测。
+    轮数加 1。
+8.如果出错，并且玩家没有剩余轮次：
+    告诉玩家游戏结束。
+    阻止玩家继续猜测（不然会使游戏混乱）。
+    显示控件允许玩家重新开始游戏。
+9.一旦游戏重启，确保游戏的存储的数据和UI完全重置，然后返回步骤1。 -->
+
+<!-- Html与CSS程序已配置好，可以看到一个简单的标题，一段游戏说明，和一个用于输入猜测的表单， -->
+  <head>
+    <meta charset="utf-8">
+
+    <title>猜数字游戏</title>
+
+    <style>
+      html {
+        font-family: sans-serif;
+      }
+
+      body {
+        background-color: #bfa;
+        width: 50%;
+        max-width: 800px;
+        min-width: 480px;
+        margin: 0 auto;
+      }
+
+      .lastResult {
+        color: white;
+        padding: 3px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>猜数字游戏</h1>
+
+    <p>我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。</p>
+
+    <div class="form">
+      <label for="guessField">猜猜数：</label>
+      <!-- 禁用浏览器自动补全功能，不然影响视觉 -->
+      <input autocomplete="off" disableautocomplete type="text" id="guessField" class="guessField">
+      <input type="submit" value="我猜猜" class="guessSubmit">
+    </div>
+
+    <div class="resultParas">
+      <p class="guesses"></p>
+      <p class="lastResult"></p>
+      <p class="lowOrHi"></p>
+    </div>
+
+
+    <script>
+    //   Math.random()将生成一个0到1的随机数，let是变量关键字，这样我们得到了一个1到100之间的随机数，并赋值给randomNumber。
+      let randomNumber = Math.floor(Math.random() * 100) + 1;
+      // 我们用5个常量存储5个引用，指向Html的5个元素。
+      const guesses = document.querySelector('.guesses');
+      const lastResult = document.querySelector('.lastResult');
+      const lowOrHi = document.querySelector('.lowOrHi');
+      const guessSubmit = document.querySelector('.guessSubmit');
+      const guessField = document.querySelector('.guessField');
+      // guessCount用于跟踪玩家猜测次数，初始化为1。
+      let guessCount = 1;
+      // resetButton用于对重置按钮的引用。
+      let resetButton;
+
+      // checkGuess用来验证玩家是否猜对，并做出反应
+      function checkGuess() {
+        // Number用于确保guessField.value是一个数字
+        let userGuess = Number(guessField.value);
+        // 若 guessCount === 1 则运行大括号里的语句，若不是则跳过
+        if (guessCount === 1) {
+          guesses.textContent = '上次猜的数：';
+        }
+        // 将当前 userGuess 值附加到 guesses 段落的末尾，并加上一个空格，这样2个猜测数之间就有一个空格
+        guesses.textContent += userGuess + ' ';
+
+        // 如果玩家猜对了，游戏胜利，将显示一个绿色的祝贺信息，并清除“高了/ 低了”信息框的内容，然后调用setGameOver() 方法。
+        // 如果玩家没有猜对，则会判断是不是第十轮，如果是，则与上面相同，但显示的是红色的游戏结束。
+        // 如果既没有猜对，也不是第十轮，则告诉玩家猜错了，并通知是高了还是低了。
+        if (userGuess === randomNumber) {
+          lastResult.textContent = '恭喜你！猜对了！';
+          lastResult.style.backgroundColor = 'green';
+          lowOrHi.textContent = '';
+          setGameOver();
+        } else if (guessCount === 10) {
+          lastResult.textContent = '!!!游戏结束!!!';
+          lowOrHi.textContent = '';
+          setGameOver();
+        } else {
+          lastResult.textContent = '你猜错了，请喝酒！';
+          lastResult.style.backgroundColor = 'red';
+          if(userGuess < randomNumber) {
+            lowOrHi.textContent = '你刚才猜低了！' ;
+          } else if(userGuess > randomNumber) {
+            lowOrHi.textContent = '你刚才猜高了！';
+          }
+        }
+      // 下面3行为下次猜测做准备，我们将玩家猜测轮数加1 （++ 是自增操作符，为自身加 1），然后把输入猜测值的地方清空，并将光标聚焦于此。
+        guessCount++;
+        guessField.value = '';
+        guessField.focus();
+      }
+      // 当有人点了 guessSubmit 代表的“我猜”之后，就运行 checkGuess 函数。其实这里有个小bug,l应该是大写
+      guessSubmit.addEventlistener('click', checkGuess);
+
+      // setGameOver设置了当游戏轮数到了之后，或者成功了之后该怎么办
+      function setGameOver() {
+        // 前两行通过将 disable 属性设置为 true 来禁用表单文本输入和按钮。否则用户就可以在游戏结束后提交更多的猜测。
+        guessField.disabled = true;
+        guessSubmit.disabled = true;
+        // 接下来的三行创建一个新的  <button> 元素，设置它的文本为“开始新游戏”，并把它添加到当前 HTML 的底部。
+        resetButton = document.createElement('button');
+        resetButton.textContent = '开始新游戏';
+        document.body.appendChild(resetButton);
+        // 最后一行在新按钮上设置了一个事件监听器，当它被点击时，一个名为 resetGame() 的函数被将被调用。
+        resetButton.addEventListener('click', resetGame);
+      }
+      // 这段代码将游戏中的一切重置为初始状态，然后玩家就可以开始新一轮的游戏了。
+      function resetGame() {
+        // 将轮数重置为1
+        guessCount = 1;
+        // 清除所有段落信息
+        const resetParas = document.querySelectorAll('.resultParas p');
+        for(let i = 0 ; i < resetParas.length ; i++) {
+          resetParas[i].textContent = '';
+        }
+        // 删除重置按钮
+        resetButton.parentNode.removeChild(resetButton);
+        // 启用表单元素
+        guessField.disabled = false;
+        guessSubmit.disabled = false;
+        // 清除文本域文本
+        guessField.value = '';
+        // 聚焦于此
+        guessField.focus();
+        // 删除 lastResult 背景颜色
+        lastResult.style.backgroundColor = 'white';
+        // 生成一个新的随机数
+        randomNumber = Math.floor(Math.random() * 100) + 1;
+      }
+    </script>
+  </body>
+</html>
diff --git a/JavaScript/js_35_添加DOM/index.html b/JavaScript/js_35_添加DOM/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<div id="div1">
+<p id="p1">这是一段文字。</p>
+<p id="p2">这是另一段文字。</p>
+</div>
+
+<script>
+var para = document.createElement("p");
+var node = document.createTextNode("这是新的文本。");
+para.appendChild(node);
+
+var element = document.getElementById("div1");
+var child = document.getElementById("p1");
+element.insertBefore(para,child);
+</script>
+
+</body>
+</html>
diff --git a/JavaScript/js_8_第一个js程序/index.html b/JavaScript/js_8_第一个js程序/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="zh-Hans">
+  <head>
+    <meta charset="utf-8">
+    <title>互动标签示例</title>
+    <style>
+      p {
+        width: 500px;
+        text-align: center;
+        border: 2px solid rgba(0, 0, 200, 0.6);
+        background: white;
+        color: green;
+        box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
+        border-radius: 10px;
+      }
+    </style>
+        <script>
+          const para = document.querySelector('p');
+          para.addEventListener('click', update);
+          function update() {
+            para.textContent ='春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。';
+          }
+        </script>
+  </head>
+  <body>
+    <p>春晓</p>
+
+  </body>
+</html>
diff --git a/JavaScript/js_9_内部JS/index.html b/JavaScript/js_9_内部JS/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="zh-Hans">
+  <head>
+    <meta charset="utf-8">
+    <title>互动标签示例</title>
+    <style>
+      p {
+        width: 500px;
+        text-align: center;
+        border: 2px solid rgba(0, 0, 200, 0.6);
+        background: white;
+        color: green;
+        box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
+        border-radius: 10px;
+      }
+    </style>
+        <script>
+          const para = document.querySelector('p');
+          para.addEventListener('click', update);
+          function update() {
+            para.textContent ='春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。';
+          }
+        </script>
+  </head>
+  <body>
+    <p>春晓</p>
+  </body>
+</html>