Начало Каталог Помощ
Вход
lovecoding
/
W250511
10
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
Преглед на файлове

admin

fengchuanyu преди 3 седмици
родител
03a4058b99
ревизия
5491abcc20
променени са 4 файла, в които са добавени 93 реда и са изтрити 0 реда
Обединен изглед Покажи статистика за разликите
  1. 0 0
      4-BOM&DOM/2_DOM选择器.html
  2. 0 0
      4-BOM&DOM/3_DOM修改页面内容.html
  3. 26 0
      4-BOM&DOM/4_DOM点击事件.html
  4. 67 0
      4-BOM&DOM/练习1_DOM点赞.html

+ 0 - 0
4-BOM&DOM/2_选择器.html → 4-BOM&DOM/2_DOM选择器.html
Целия файл


+ 0 - 0
4-BOM&DOM/3_修改页面内容.html → 4-BOM&DOM/3_DOM修改页面内容.html
Целия файл


+ 26 - 0
4-BOM&DOM/4_DOM点击事件.html
Целия файл 

@@ -0,0 +1,26 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <button>按钮</button>
 
+    <script>
 
+        // 绑定事件
 
+        // 第一步 一定要先获取要绑定事件的标签
 
+        var btn = document.getElementsByTagName("button");
 
+        // 因为返回的内容为类数组 没有办法直接对数组进行操作 所以要把数组里面的值取出来
 
+        btn = btn[0];
 
+        
+        // 第二步绑定事件
 
+        // 通过获取到标签 给他一个 点击事件（click） 标签.onclick 赋值给他一个函数
 
+        // 这个函数称为事件处理函数
 
+        // 事件触发之后要做的事情就写在函数内
 
+        btn.onclick = function(){
 
+            console.log("按钮被点击了");
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 67 - 0
4-BOM&DOM/练习1_DOM点赞.html
Целия файл 

@@ -0,0 +1,67 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_z46pr7nyg5p.css">
 
+    <style>
 
+        body{
 
+            background-color: #f9f9f9;
 
+        }
 
+        .like-box{
 
+            width: 200px;
 
+            height: 200px;
 
+            border-color: #fff;
 
+            box-shadow: 0 0 10px rgba(0,0,0,0.5);
 
+            position: fixed;
 
+            top:50%;
 
+            left: 50%;
 
+            margin-top: -160px;
 
+            margin-left: -140px;
 
+            padding: 60px 40px;
 
+            text-align: center;
 
+        }
 
+        .like-box .like-title{
 
+            font-size: 20px;
 
+            font-weight: bold;
 
+            margin-bottom: 20px;
 
+        }
 
+        .like-box .like-icon .iconfont{
 
+            font-size: 70px;
 
+            color: #aaa;
 
+        }
 
+        .like-box .like-icon .iconfont:hover{
 
+            color: red;
 
+            cursor: pointer;
 
+        }
 
+        .like-box .like-num{
 
+            font-size: 30px;
 
+            font-weight: bold;
 
+        }
 
+        .like-box .like-text{
 
+            margin-top: 10px;
 
+            font-size: 12px;
 
+            color: #aaa;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="like-box">
 
+        <div class="like-title">点赞计数器</div>
 
+        <div class="like-icon">
 
+            <i class="iconfont icon-icons-"></i>
 
+        </div>
 
+        <div class="like-num"></div>
 
+        <div class="like-text">点击心形图标进行点赞</div>
 
+    </div>
 
+    <script>
 
+        // 获取数字标签 返回类数组
 
+        var likeIcon = document.getElementsByClassName("like-num");
 
+        // 从类数组中取出数字标签
 
+        likeIcon = likeIcon[0];
 
+        // 向数字标签中写入内容
 
+        likeIcon.innerText = 0;
 
+    </script>
 
+</body>
 
+</html>