Startseite Erkunden Hilfe
Anmelden
lovecoding
/
VIP26
9
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

day:18

e vor 1 Jahr
Ursprung
f23cd263f8
Commit
1ef2956dd9
100 geänderte Dateien mit 2393 neuen und 0 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 7 0
      day1/day1.md
  2. 50 0
      day1/html/demo.html
  3. 10 0
      day1/html/index.html
  4. 32 0
      day1/html/文档流.html
  5. 189 0
      day1/html/标签.html
  6. BIN
      day1/images/R-C.jpg
  7. BIN
      day1/images/img01.gif
  8. BIN
      day1/images/img01.jpeg
  9. BIN
      day1/images/img02.jpeg
  10. BIN
      day1/images/img03.jpeg
  11. BIN
      day1/images/img04.jpeg
  12. 11 0
      day10/html/1.字符串方法.html
  13. 11 0
      day10/html/2.基本数据类型和引用数据类型.html
  14. 53 0
      day10/js/1.字符串方法.js
  15. 31 0
      day10/js/2.数据类型.js
  16. 11 0
      day11/html/1.Math对象.html
  17. 80 0
      day11/html/2.Bom.html
  18. 12 0
      day11/html/3.window.html
  19. 15 0
      day11/html/4.history对象.html
  20. 11 0
      day11/html/5.Location对象.html
  21. 11 0
      day11/html/6.Navigator对象.html
  22. 26 0
      day11/html/CollectDigits.html
  23. 47 0
      day11/html/DayOfYear.html
  24. 19 0
      day11/html/test1.html
  25. 18 0
      day11/html/test2.html
  26. 44 0
      day11/html/斐波那契.html
  27. 34 0
      day11/html/素数.html
  28. 50 0
      day11/html/随机数.html
  29. 18 0
      day11/js/1.Math对象.js
  30. 43 0
      day11/js/2.Bom.js
  31. 24 0
      day11/js/3.window.js
  32. 11 0
      day11/js/4.history对象.js
  33. 9 0
      day11/js/5.Location对象.js
  34. 11 0
      day11/js/6.Navigator对象.js
  35. 29 0
      day12/html/1.获取元素节点.html
  36. 32 0
      day12/html/2.小例子.html
  37. 12 0
      day12/html/3.onload.html
  38. 72 0
      day12/html/4.选项卡.html
  39. 99 0
      day12/html/5.轮播图.html
  40. 112 0
      day12/html/6.滑入轮播图.html
  41. BIN
      day12/image/1.jpg
  42. BIN
      day12/image/2.jpg
  43. BIN
      day12/image/3.jpg
  44. BIN
      day12/image/4.jpg
  45. BIN
      day12/image/5.jpg
  46. 17 0
      day12/js/1.获取元素节点.js
  47. 20 0
      day12/js/2.小例子.js
  48. 4 0
      day12/js/3.onload.js
  49. 18 0
      day12/js/4.选项卡.js
  50. 65 0
      day12/js/5.轮播图.js
  51. 47 0
      day12/js/6.滑入轮播图.js
  52. 76 0
      day13/html/1.淡入淡出轮播图.html
  53. 25 0
      day13/html/2.获取元素宽度.html
  54. 29 0
      day13/html/3.小例子.html
  55. 27 0
      day13/html/4.事件.html
  56. 24 0
      day13/html/5.拖拽.html
  57. 74 0
      day13/html/6.放大镜.html
  58. BIN
      day13/image/1.jpg
  59. BIN
      day13/image/2.jpg
  60. BIN
      day13/image/3.jpg
  61. BIN
      day13/image/4.jpg
  62. BIN
      day13/image/5.jpg
  63. BIN
      day13/image/6.jpg
  64. BIN
      day13/image/7.jpg
  65. 19 0
      day13/js/1.淡入淡出轮播图.js
  66. 13 0
      day13/js/2.获取元素宽度.js
  67. 29 0
      day13/js/3.小例子.js
  68. 38 0
      day13/js/4.事件.js
  69. 14 0
      day13/js/5.拖拽.js
  70. 44 0
      day13/js/6.放大镜.js
  71. 14 0
      day14/html/1.节点.html
  72. 60 0
      day14/html/2.节点遍历.html
  73. 42 0
      day14/html/3.垂直导航.html
  74. 23 0
      day14/html/4.添加节点.html
  75. 33 0
      day14/html/5.事件冒泡.html
  76. 12 0
      day14/html/6.事件默认行为.html
  77. 26 0
      day14/html/7.事件源.html
  78. 39 0
      day14/html/8.事件流.html
  79. BIN
      day14/images/事件.png
  80. BIN
      day14/images/图片1.png
  81. 9 0
      day14/js/1.节点.js
  82. 0 0
      day14/js/2.节点遍历.js
  83. 12 0
      day14/js/3.垂直导航.js
  84. 50 0
      day14/js/4.添加节点.js
  85. 45 0
      day14/js/5.事件冒泡.js
  86. 8 0
      day14/js/6.事件默认行为.js
  87. 12 0
      day14/js/7.事件源.js
  88. 29 0
      day14/js/8.事件流.js
  89. 27 0
      day15/html/1.事件委托.html
  90. 19 0
      day15/html/2.this指向.html
  91. 11 0
      day15/html/3.改变this指向的方法.html
  92. 11 0
      day15/html/4.原型、原型链、构造函数.html
  93. 11 0
      day15/html/5.屏幕宽高.html
  94. 16 0
      day15/html/6.下落的树叶.html
  95. BIN
      day15/img/1.png
  96. BIN
      day15/img/2.png
  97. BIN
      day15/img/3.png
  98. BIN
      day15/img/4.png
  99. 23 0
      day15/js/1.事件委托.js
  100. 34 0
      day15/js/2.this指向.js

+ 7 - 0
day1/day1.md
Datei anzeigen 

@@ -0,0 +1,7 @@
 
+1.打开文件方法：
 
+    将文件夹拉到vscode上
 
+    打开vscode 选择（Open Folder）新建的文件夹
 
+2.一个完整的网页构成：
 
+    页面（html） 样式(css) 逻辑(javaScript=>js)
 
+3页面创建
 
+    名字(英文或者数字).后缀(html) 回车生成页面

+ 50 - 0
day1/html/demo.html
Datei anzeigen 

@@ -0,0 +1,50 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <title>案例</title>
 
+    </head>
 
+    <body>
 
+        <h1>圣诞节的那些事</h1>
 
+        <!-- 
+            锚点：
 
+                a标签实现
 
+                跳转位置起名 格式:id="名字"（英文）
 
+                标签中实现  href="#名字"
 
+         -->
 
+        <a href="#first">1.圣诞是怎样由来的</a>
 
+        <br>
 
+        <a href="#second">2.圣诞老人的由来</a>
 
+        <br>
 
+        <a href="#third">3.圣诞树的由来</a>
 
+        <br>
 
+        <h2 >圣诞是怎样由来的</h2>
 
+        <p id="first">
 
+            圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日，即上帝通过耶稣向世人显示自己。 这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期（Christmas Tide），各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。 在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。
 
+        </p>
 
+        <img src="../images/img01.gif" alt="">
 
+        <h2 id="second">圣诞老人的由来</h2>
 
+        <p>圣诞节当然少不了<a href="#">圣诞老人</a> ，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？</p>
 
+        <img src="../images/img02.jpeg" alt="">
 
+        <p>
 
+            相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。
 
+            <br> <br>
 
+            到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。
 
+            <br> <br>
 
+            在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头，然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。
 
+            <br> <br>
 
+        </p>
 
+        <h2 id="third">圣诞树的由来</h2>
 
+        <p>
 
+            圣诞一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。
 
+            <br><br>
 
+            其中一个是说：大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蜡烛放在树林中的枞树枝，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。而近今日，人们已经改用粉色的小灯泡了。
 
+            <br><br>
 
+            另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝插在地上，松枝立即变成一棵树，上面都挂满礼物，以答谢农民的好意。
 
+            <br><br>
 
+            圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。 每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。
 
+            <br><br>
 
+        </p>
 
+        <img src="../images/img03.jpeg" alt="">
 
+    </body>
 
+</html>

+ 10 - 0
day1/html/index.html
Datei anzeigen 

@@ -0,0 +1,10 @@
 
+<!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>
 
+</body>
 
+</html>

+ 32 - 0
day1/html/文档流.html
Datei anzeigen 

@@ -0,0 +1,32 @@
 
+<!-- 
+    为什么要写文档流： 所有的内容要全部写在文档流
 
+ -->
 
+ <!-- 注释 ctrl + / -->
 
+ <!DOCTYPE html>
 
+ <!-- 
+    声明头部文档使用规范：html xhtml(不采用)
 
+  -->
 
+  <html lang="en">
 
+    <!-- lang => language 语言 
+        en 英文 zh-CN 中文
 
+    -->
 
+    <!-- 所有内容写在html标签里 -->
 
+    <!-- 头部标签 -->
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <!-- 数据的元信息 charset 转编译符 utf-8 转编译码 
+            如果不写转编译码 导致页面乱码
 
+            不再页面中展示 为了方便搜索引擎（SEO）
 
+        -->
 
+        <title>今天</title>
 
+        <!-- 标题标签 页签头部展示 -->
 
+    </head>
 
+    <!-- 主体内容 -->
 
+    <body>
 
+        <!-- 
+            注释内容不再页面中显示  为了便携开发
 
+         -->
 
+        <!-- 页面中展示的内容 -->
 
+        一串文字一串文字一串文字一串文字    
+    </body>
 
+  </html>

+ 189 - 0
day1/html/标签.html
Datei anzeigen 

@@ -0,0 +1,189 @@
 
+<!DOCTYPE html>
 
+<!-- only -->
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <title>标签</title>
 
+    </head>
 
+    <body>
 
+        <!-- 
+            标签：
 
+                1.按是否闭合分类： 
+                
+                开始标签：<head> <body> <title>
 
+                
+                结束标签：</head> </body> </title>
 
+                闭合标签:由开始标签和结束标签组成的可以嵌套标签，承接内容的标签；
 
+                空标签：由开始标签组成 不承接内容的标签；
 
+
 
+                2.按是否换行分类： 
+                    a.块级元素：独占一行 ，块级元素可以包含行内元素 可以设置宽高
 
+                    b.行内元素：在一行显示的标签，行内元素不可以包含块级元素  设置宽高不生效
 
+                    c.行内块元素：可以设置宽高 在一行展示 中间有空白间隙
 
+                3.HTML文档标签（文档流）
 
+                4.H5新标签（移动端标签 暂时不讲）
 
+                
+                双标签：成对出现的标签 
+                单标签：单独出现的标签
 
+         -->
 
+
 
+        <!-- 
+            保存操作 ctrl + s 刷新页面 浏览器及时更新
 
+         -->
 
+         <!-- 
+            页面检查操作：点击浏览器页面 出现操作框 点击检查 出现元素审查
 
+          -->
 
+         <!-- 块级元素
 
+            div 划分区域 
+            h 标题
 
+            p 段落
 
+            hr 分割线
 
+            br 换行
 
+            ul li 无序列表
 
+            ol li 有序列表
 
+            dl dt dd 图文混排列表
 
+        -->
 
+
 
+         <!-- 
+            div标签：划分区域
 
+               特点：独占一行
 
+          -->
 
+          <!-- 文章盒子 -->
 
+         <div>
 
+            <a href="">跳转3</a>
 
+            <a href="https://cn.bing.com/search?q=%e6%9c%80%e6%96%b0%e8%96%aa%e9%85%ac%e6%8e%92%e8%a1%8c%e5%87%ba%e7%82%89&efirst=0&ecount=50&filters=tnTID%3a%22DSBOS_1136DEFA5C0441CDBE1D22C0D88B2CF3%22+tnVersion%3a%22701d00abd03f40eaa92705879143676b%22+Segment%3a%22popularnow.carousel%22+tnCol%3a%220%22+tnOrder%3a%225870b959-b536-4e01-9877-31e72cd0b409%22&form=HPNN01">跳转1</a>
 
+            <a href="#">跳转2</a>
 
+            <!-- 文章标题盒子 -->
 
+            <div>
 
+                <!--h标签： 标题标签 
+                    h1~h6特点：逐级减小
 
+                    权重最大的是 h1
 
+                    权重最小的是 h6
 
+                    特点： 独占一行
 
+                -->
 
+                <h1>第一天</h1>
 
+                <h2>第一天</h2>
 
+                <h3>第一天</h3>
 
+                <h4>第一天</h4>
 
+                <h5>第一天</h5>
 
+                <h6>第一天</h6>
 
+                <!-- 超链接标签:跳转操作 
+                    a标签：超链接
 
+                    属性：href
 
+                          1.要跳转的页面路径
 
+                          2.# 跳会页面顶部
 
+                          3."" 空字符串 刷新当点页面
 
+                -->
 
+            </div>
 
+            <!-- 文章内容盒子 -->
 
+            <div>
 
+                <!-- 段落 文本标签: p标签
 
+                    特点： 独占一行
 
+                -->
 
+                <!-- 换行标签：br 特点：独占一行 -->
 
+                <!-- 分割线标签：hr 特点独占一行 -->
 
+                <!-- 
+                    b 加粗字体 只是UI层面的加粗，不具备HTML语义化
 
+                    strong 加粗字体 不仅是UI层的加粗，具备HTML语义化 语气上的加粗
 
+                 -->
 
+                 <!-- 
+                    i 倾斜 只是UI层面的倾斜，不具备HTML语义化
 
+                    em 倾斜 不仅是UI层的倾斜，具备HTML语义化 强调倾斜
 
+                  -->
 
+                  <!-- 
+                    sup 上标
 
+                    sub 下标
 
+                    u   下划线
 
+                    s   删除线
 
+                    span 定义文本块
 
+                    a   超链接
 
+                   -->
 
+                   
+                   <img src="../images/R-C.jpg" alt="风景图" style="width:200px;height:200px">
 
+                   <img src="../images/R-C.jpg" alt="风景图" style="width:200px;height:200px">
 
+                   <img src="../images/R-C.jpg" alt="风景图" style="width:200px;height:200px">
 
+                   <img src="../images/R-C.jpg" alt="风景图" style="width:200px;height:200px">
 
+                <p>
 
+                    新的内容新的<span style="background-color: aqua;">内容222</span>新的内容新的内容新的内容新的1<br>内容新的内容新的内容新的内容新的内容新的内容新的内容<hr>新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容新的内容
 
+                </p>
 
+                <p>这是一段<b>内容</b>222这是一段<strong>内容</strong>这是一段内容这是一段内容这是一段内容
 
+                    <br>这是一段内容这是一段<i>内容</i>333这是一段<em>内容</em>这是一段内容<hr>这是一段内容这是一段内容</p>
 
+                
+                <p>1这是一段<sub>内容1</sub>这是一段<sup>内容</sup>这是一段<u>内容2</u>这是一段<s>内容3</s>这是一段内容这是一段内容这是一段内容
 
+                    <hr>这是一段内容这是一段内容这是一段内容这是一段内容</p>
 
+                    <!-- 无序列表
 
+                        ul li标签组成 无序列表
 
+                        默认样式：实心圆
 
+                        属性：
 
+                            type: square 实心的正方形 
+                                  circle 空心圆
 
+                                  disc   实心圆（默认的）
 
+                    -->
 
+                    <ul type="disc">
 
+                        <li>内容</li>
 
+                        <li>内容</li>
 
+                        <li>内容</li>
 
+                    </ul>
 
+                <!-- <ul type="disc">
 
+                    <li>内容1</li>
 
+                    <li>内容2</li>
 
+                    <li>内容3</li>
 
+                </ul> -->
 
+                <!-- 有序列表 
+                    ol li 标签组成 有序列表
 
+                    属性： type: A  a  i(罗马数字) 1（默认：阿拉伯数字）
 
+                           start 从...开始
 
+                           reversed 倒序
 
+                -->
 
+                <ol type="1" reversed>
 
+                    <li>内容</li>
 
+                    <li>内容</li>
 
+                    <li>内容</li>
 
+                    <li>内容</li>
 
+                    <li>内容</li>
 
+                    <li>内容</li>
 
+                    <li>内容</li>
 
+                </ol>
 
+                <!-- <ol type="1" reversed>
 
+                    <li>内容</li>
 
+                    <li>内容</li>
 
+                    <li>内容</li>
 
+                    <li>内容</li>
 
+                    <li>内容</li>
 
+                    <li>内容</li>
 
+                </ol> -->
 
+                <!-- 图片文件夹名称：images -->
 
+                <!-- 图文混排列表
 
+                    dl dt dd
 
+                    dt中放一张图片
 
+                -->
 
+                <dl>
 
+                    <dt>
 
+                        <!-- 房子图片 -->
 
+                        <!-- 图片标签：img 
+                            行内块元素
 
+                            属性：
 
+                            src：放置引入的图片地址
 
+                                地址的获取方法：
 
+                                1.从网上直接获取 绝对路径
 
+                                2.本地下载引入   相对路径
 
+                                    同级目录 ./
 
+                                    上级目录 ../
 
+                            alt:当图片无法加载时所展示的替换文字
 
+                                图片无法加载情况：
 
+                                    1.网络问题
 
+                                    2.图片违禁或侵权
 
+                        -->
 
+                        <img src="../images/R-C.jpg" alt="风景图">
 
+                        <!-- <img src="https://ts1.cn.mm.bing.net/th/id/R-C.df4462fabf18edd07195679a5f8a37e5?rik=FnNvr9jWWjHCVQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50059%2f8720.jpg_wh1200.jpg&ehk=ofb4q76uCls2S07aIlc8%2bab3H5zwrmj%2bhqiZ%2fyw3Ghw%3d&risl=&pid=ImgRaw&r=0" alt=""> -->
 
+                    </dt>
 
+                    <dd>
 
+                        <!-- 文字 -->
 
+                        这是一段文字
 
+                    </dd>
 
+                </dl>
 
+            </div>
 
+         </div>
 
+
 
+    </body>
 
+</html>

BIN
day1/images/R-C.jpg
Datei anzeigen


BIN
day1/images/img01.gif
Datei anzeigen


BIN
day1/images/img01.jpeg
Datei anzeigen


BIN
day1/images/img02.jpeg
Datei anzeigen


BIN
day1/images/img03.jpeg
Datei anzeigen


BIN
day1/images/img04.jpeg
Datei anzeigen


+ 11 - 0
day10/html/1.字符串方法.html
Datei anzeigen 

@@ -0,0 +1,11 @@
 
+<!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>
 
+    <script src="../js/1.字符串方法.js"></script>
 
+</body>
 
+</html>

+ 11 - 0
day10/html/2.基本数据类型和引用数据类型.html
Datei anzeigen 

@@ -0,0 +1,11 @@
 
+<!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>
 
+    <script src="../js/2.数据类型.js"></script>
 
+</body>
 
+</html>

+ 53 - 0
day10/js/1.字符串方法.js
Datei anzeigen 

@@ -0,0 +1,53 @@
 
+// toUpperCase 将字符串中的字母转换为大写的
 
+// toLowerCase 将字符串中的字母转换为小写的
 
+// concat 连接字符串
 
+// trim 消除字符串前后的空格
 
+
 
+
 
+// 长度 length
 
+// indexOf 字符串中指定字符串首次出现的索引下标位置
 
+var str = "My name is LiLi,I'm Chinese";
 
+console.log(str,'原字符串');
 
+str.indexOf("ese");
 
+// console.log(str.indexOf("ese"));
 
+
 
+// lastIndexOf 字符串中指定字符串最后出现的索引下标位置
 
+var lastStr = str.lastIndexOf("name");
 
+// console.log(lastStr)
 
+
 
+
 
+// slice 允许负数截取 从后往前-1开始 从前往后0开始
 
+// 一个值 截取当前索引下标位置到最后的内容
 
+// 两个值 截取当前索引下标位置到第二个索引下标位置（不包含第二个索引下标）
 
+// 不会改变原字符串
 
+var aa = str.slice(-12,-6);
 
+console.log(aa,'slice方法');
 
+
 
+// substring
 
+// 一个值 截取当前索引下标位置到最后的内容
 
+// 两个值 截取当前索引下标位置到第二个索引下标位置（不包含第二个索引下标）
 
+// 不会改变原字符串
 
+var bb = str.substring(3);
 
+console.log(bb,'substring方法')
 
+
 
+// substr 
+// 第一个值 截取下标的起始索引位置
 
+// 第二个值 截取的长度
 
+// 不会改变原字符串
 
+var cc = str.substr(3,12);
 
+console.log(cc,'substr方法')
 
+
 
+// replace替换方法
 
+// 用于指定字符串替换
 
+var dd = str.replace("name",'WWW');
 
+console.log(dd,'replace方法')
 
+console.log(str,'字符串1');
 
+
 
+// split 字符串转数组
 
+// 用逗号隔开字符串
 
+var ff = str.split(",");
 
+console.log(ff,"split方法")
 
+
 
+// chatAt 返回指定下标的字符
 
+var gg = str.charAt(16);
 
+console.log(gg,'chatAt方法')

+ 31 - 0
day10/js/2.数据类型.js
Datei anzeigen 

@@ -0,0 +1,31 @@
 
+// 基本数据类型
 
+// undefined number string boolean null 
+// 引用数据类型
 
+// Object
 
+// 堆内存和栈内存
 
+
 
+// 栈内存
 
+var a = 1;
 
+var b = "hahaha";
 
+var c = true;
 
+
 
+// 堆内存
 
+var ddd = {
 
+    name:"LiLi",
 
+    age:"11"
 
+}
 
+
 
+// 基本数据类型赋值
 
+var aa =20;
 
+var bb = aa;
 
+bb = 15;
 
+console.log(aa,'aa')
 
+
 
+// 引用数据类型 堆内存
 
+var mm = {
 
+    name: '我',
 
+    age: '11'
 
+};
 
+var nn = mm;
 
+nn.name = "你"
 
+console.log(mm.name)

+ 11 - 0
day11/html/1.Math对象.html
Datei anzeigen 

@@ -0,0 +1,11 @@
 
+<!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>
 
+    <script src="../js/1.Math对象.js"></script>
 
+</body>
 
+</html>

+ 80 - 0
day11/html/2.Bom.html
Datei anzeigen 

@@ -0,0 +1,80 @@
 
+<!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>
 
+    <!-- 
+        JavaScript：
 
+            ECMAScript 核心
 
+            BOM 浏览器对象模型
 
+            DOM 文档对象模型
 
+     -->
 
+     <!-- 
+        为什么HTML中要使用语义化？
 
+         1.快速的阅读代码
 
+         2.方便搜索引擎提取重要的信息
 
+      -->
 
+      <!-- 
+        驼峰命名法：第二个单词的首字母大写
 
+       -->
 
+       <div>
 
+        <button id="btn1">往下走</button>
 
+        <button id="btn3">清除</button>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <button id="btn2">往上走</button>
 
+       </div>
 
+    <script src="../js/2.Bom.js"></script>
 
+</body>
 
+</html>

+ 12 - 0
day11/html/3.window.html
Datei anzeigen 

@@ -0,0 +1,12 @@
 
+<!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 id="btn">执行</button>
 
+    <script src="../js/3.window.js"></script>
 
+</body>
 
+</html>

+ 15 - 0
day11/html/4.history对象.html
Datei anzeigen 

@@ -0,0 +1,15 @@
 
+<!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>
 
+    history页面
 
+    <a href="./test2.html">附页</a>
 
+    <button id="btn">返回上一页</button>
 
+    <button id="btn1">下一页</button>
 
+    <script src="../js/4.history对象.js"></script>
 
+</body>
 
+</html>

+ 11 - 0
day11/html/5.Location对象.html
Datei anzeigen 

@@ -0,0 +1,11 @@
 
+<!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>
 
+    <script src="../js/5.Location对象.js"></script>
 
+</body>
 
+</html>

+ 11 - 0
day11/html/6.Navigator对象.html
Datei anzeigen 

@@ -0,0 +1,11 @@
 
+<!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>
 
+    <script src="../js/6.Navigator对象.js"></script>
 
+</body>
 
+</html>

+ 26 - 0
day11/html/CollectDigits.html
Datei anzeigen 

@@ -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>
 
+    <script>
 
+      function CollectDigits(s) {
 
+        var news = null;
 
+        var result = "";
 
+        for (var i = 0; i < s.length; i++) {
 
+          news = s.charAt(i);
 
+          // NaN 非法数字
 
+          // isNaN 用于判断值是不是is NaN（非法数字）
 
+          if (!isNaN(news)) {
 
+            result += news;
 
+          }
 
+        }
 
+        return result;
 
+      }
 
+      console.log(CollectDigits("1abc23def4")); // 输出1234
 
+    </script>
 
+  </body>
 
+</html>

+ 47 - 0
day11/html/DayOfYear.html
Datei anzeigen 

@@ -0,0 +1,47 @@
 
+<!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>
 
+    <script>
 
+      function DayOfYear(data1) {
 
+        var year = data1.getFullYear();
 
+        var month = data1.getMonth();
 
+        var day = data1.getDate();
 
+        var months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
+        // 闰年 29
 
+        if (IsLeapYear(year)) {
 
+          months[1] = 29;
 
+        }
 
+        var dayOfYear = 0;
 
+        for (var i = 0; i < month - 1; i++) {
 
+          dayOfYear += months[i];
 
+        }
 
+        dayOfYear += day;
 
+        return dayOfYear;
 
+      }
 
+      // 判断是不是闰年
 
+      function IsLeapYear(year) {
 
+        if (year % 4 === 0) {
 
+          if (year % 100 === 0) {
 
+            if (year % 400 === 0) {
 
+              return true;
 
+            } else {
 
+              return false;
 
+            }
 
+          } else {
 
+            return true;
 
+          }
 
+        } else {
 
+          return false;
 
+        }
 
+      }
 
+      var data1 = new Date(2000,1,8);
 
+      var result = DayOfYear(data1);
 
+      console.log(result,'输出'); 
+    </script>
 
+  </body>
 
+</html>

+ 19 - 0
day11/html/test1.html
Datei anzeigen 

@@ -0,0 +1,19 @@
 
+<!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>
 
+    页面一
 
+    <a href="./4.history对象.html">进入history页面</a>
 
+    <button id="btn">go</button>
 
+    <script>
 
+        var btn = document.getElementById("btn");
 
+        btn.onclick = function() {
 
+            history.go(2);
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 18 - 0
day11/html/test2.html
Datei anzeigen 

@@ -0,0 +1,18 @@
 
+<!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 id="btn">返回</button>
 
+    <script>
 
+        var btn = document.getElementById("btn");
 
+        btn.onclick = function() {
 
+            history.go(-2);
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 44 - 0
day11/html/斐波那契.html
Datei anzeigen 

@@ -0,0 +1,44 @@
 
+<!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>
 
+    <script>
 
+      // 非递归方法
 
+      function fibonacci(n) {
 
+        if (n === 1 || n === 2) {
 
+          return 1;
 
+        } else {
 
+          let a = 1;
 
+          let b = 1;
 
+          let result;
 
+          for (let i = 3; i <= n; i++) {
 
+            result = a + b;
 
+            a = b;
 
+            b = result;
 
+          }
 
+          return result;
 
+        }
 
+      }
 
+
 
+      let N = 23; // 假设要求斐波纳契数列的第10项的值
 
+      let fibonacciN = fibonacci(N);
 
+      console.log(fibonacciN);
 
+      // 递归方法
 
+      function fibonacci(n) {
 
+        if (n === 1 || n === 2) {
 
+          return 1;
 
+        } else {
 
+          return fibonacci(n - 1) + fibonacci(n - 2);
 
+        }
 
+      }
 
+
 
+      var n = 10; // 假设要求第10项的值
 
+      var result = fibonacci(n);
 
+      console.log(result); // 输出斐波纳契数列的第10项的值
 
+    </script>
 
+  </body>
 
+</html>

+ 34 - 0
day11/html/素数.html
Datei anzeigen 

@@ -0,0 +1,34 @@
 
+<!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>
 
+    <script>
 
+      function isPrime(num) {
 
+        if (num < 2) {
 
+          return false;
 
+        }
 
+        for (let i = 2; i <= Math.sqrt(num); i++) {
 
+          if (num % i === 0) {
 
+            return false;
 
+          }
 
+        }
 
+        return true;
 
+      }
 
+
 
+      let count = 0;
 
+      for (let i = 100; i <= 1000; i++) {
 
+        if (isPrime(i)) {
 
+            document.writeln(i + "&nbsp;&nbsp;");
 
+          count++;
 
+          if (count % 6 === 0) {
 
+            document.writeln("<br>");
 
+          }
 
+        }
 
+      }
 
+    </script>
 
+  </body>
 
+</html>

+ 50 - 0
day11/html/随机数.html
Datei anzeigen 

@@ -0,0 +1,50 @@
 
+<!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>
 
+    <script>
 
+      // 全局变量
 
+      var totalGames = 0; // 总游戏次数
 
+      var wins = 0; // 获胜次数
 
+      // 生成1-9之间的随机数
 
+      function generateRandomNumber() {
 
+        return Math.floor(Math.random() * 9) + 1;
 
+      }
 
+      // 模拟一次游戏
 
+      function playGame() {
 
+        var numbers = [];
 
+        for (var i = 0; i < 3; i++) {
 
+          numbers.push(generateRandomNumber());
 
+        }
 
+        console.log("本次随机数：" + numbers.join(", "));
 
+
 
+        if (numbers.includes(8)) {
 
+          console.log("恭喜！你赢了一次！");
 
+          wins++;
 
+        } else {
 
+          console.log("很遗憾，这次没有中奖。");
 
+        }
 
+
 
+        totalGames++;
 
+      }
 
+      // 计算获胜率
 
+      function calculateWinningPercentage() {
 
+        if (totalGames === 0) {
 
+          return 0;
 
+        }
 
+        return (wins / totalGames) * 100;
 
+      }
 
+      // 运行游戏
 
+      for (var i = 0; i < 10; i++) {
 
+        playGame();
 
+      }
 
+      console.log("总游戏次数：" + totalGames);
 
+      console.log("获胜次数：" + wins);
 
+      console.log("获胜率：" + calculateWinningPercentage().toFixed(2) + "%");
 
+    </script>
 
+  </body>
 
+</html>

+ 18 - 0
day11/js/1.Math对象.js
Datei anzeigen 

@@ -0,0 +1,18 @@
 
+// document 文档的根节点
 
+// document.write() 页面输出
 
+// 变量 var a = 1;
 
+// 字面量 1 2 3 4 5 6 true 固定值
 
+document.write(Math.PI);//π 常量 一个固定的值
 
+document.write(Math.E);// 常量 一个固定的值
 
+console.log(Math.ceil(2.1));//向上取整
 
+console.log(Math.floor(2.4));//向下取整
 
+console.log(Math.abs(-2.43));//绝对值
 
+console.log(Math.round(2.5));//四舍五入
 
+console.log(Math.random()*10);//随机数
 
+console.log(Math.round(Math.random()*10));
 
+// Math.round(Math.random()*(y-x)+x) 生成x到y之间的随机整数
 
+console.log(Math.round(Math.random()*(20-10)+10));
 
+console.log(Math.pow(3,3));// x的y次方
 
+console.log(Math.sqrt(9));//返回x的平方根
 
+
 
+

+ 43 - 0
day11/js/2.Bom.js
Datei anzeigen 

@@ -0,0 +1,43 @@
 
+// 获取id命名的标签
 
+var btn1 = document.getElementById("btn1");
 
+var btn2 = document.getElementById("btn2");
 
+var a;
 
+// 点击事件
 
+btn1.onclick = function(){
 
+    // 定时器
 
+    a = setInterval(function(){
 
+        // scrollTo(x,y) 相对于窗口
 
+        // scrollBy(x,y) 相对于当前位置
 
+        // scrollBy(0,200);
 
+        // 滚动高度
 
+        // document.body.scrollTop 
+        // document.documentElement.scrollTop
 
+        // scrollBy(0,200)
 
+        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
 
+        // console.log(scrollTop)
 
+        if(scrollTop < 1799) {
 
+            scrollBy(0,200);
 
+        } else {
 
+            clearInterval(a);
 
+            window.alert("到底了");
 
+        }
 
+    },500)
 
+    // setInterval(function(){},时间)
 
+
 
+}
 
+// var btn3 = document.getElementById("btn3");
 
+// btn3.onclick = function() {
 
+//     // 清除定时器的方法 clearInterval()
 
+//     clearInterval(a);
 
+// }
 
+btn2.onclick = function() {
 
+    var b = setInterval(function(){
 
+        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 
+        if(scrollTop > 0) {
 
+            scrollBy(0,-200);
 
+        } else {
 
+            clearInterval(b);
 
+            alert("回到顶部了");
 
+        }
 
+    },1000)
 
+}

+ 24 - 0
day11/js/3.window.js
Datei anzeigen 

@@ -0,0 +1,24 @@
 
+// window对象方法
 
+// 1.scrollTo(x,y)
 
+// 2.scrollBy(x,y)
 
+// 3.alert() 警告框 window.alert
 
+// 4.prompt("默认提示内容",默认内容) 输入框
 
+// prompt("请输入年级",18);
 
+// 5.confirm() 确认框
 
+// confirm("你好么")
 
+// 定时器
 
+// setInterval(执行的方法,间隔的时间)
 
+// 清除定时器 clearInterval()
 
+// document.getElementById("id名字")
 
+// document.getElementById("btn")
 
+// setTimeOut 延时器
 
+// clearTimeout() 清除延时器
 
+var btn = document.getElementById("btn");
 
+// console.log(btn)
 
+btn.onclick = function() {
 
+    // console.log("打印")
 
+    setTimeout(function(){
 
+        console.log("打印")
 
+    },3000)
 
+    // clearTimeout()
 
+}

+ 11 - 0
day11/js/4.history对象.js
Datei anzeigen 

@@ -0,0 +1,11 @@
 
+var btn = document.getElementById("btn");
 
+btn.onclick = function() {
 
+    history.back();
 
+    // history.back() 返回history上一个url
 
+}
 
+var btn1 = document.getElementById("btn1");
 
+btn1.onclick = function() {
 
+    history.forward();
 
+    // history.forward() 进入history下一个url
 
+}
 
+// history.go(num) 想跳转哪个页面 就填对应层级数字

+ 9 - 0
day11/js/5.Location对象.js
Datei anzeigen 

@@ -0,0 +1,9 @@
 
+// hash 设置或返回从井号 (#) 开始的 URL（锚）
 
+// host 设置或返回主机名和当前 URL 的端口号
 
+// hostname 设置或返回当前 URL 的主机名
 
+// href 设置或返回完整的 URL
 
+// pathname 设置或返回当前 URL 的路径部分
 
+// port 设置或返回当前 URL 的端口号
 
+// protocol 设置或返回当前 URL 的协议
 
+// search 设置或返回从问号 (?) 开始的 URL（查询部分）
 
+// console.log(location.hash);

+ 11 - 0
day11/js/6.Navigator对象.js
Datei anzeigen 

@@ -0,0 +1,11 @@
 
+// appCodeName 返回浏览器的代码名
 
+// appName 返回浏览器的名称
 
+// appVersion 返回浏览器的平台和版本信息
 
+// browserLanguage 返回当前浏览器的语言
 
+// cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
 
+// cpuClass 返回浏览器系统的 CPU 等级
 
+// onLine 返回指明系统是否处于脱机模式的布尔值
 
+// platform 返回运行浏览器的操作系统平台
 
+// systemLanguage 返回 OS 使用的默认语言
 
+// userAgent 返回由客户机发送服务器的 user-agent 头部的值
 
+// userLanguage 返回 OS 的自然语言设置

+ 29 - 0
day12/html/1.获取元素节点.html
Datei anzeigen 

@@ -0,0 +1,29 @@
 
+<!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>
 
+    <!-- 
+        DOM 文档对象模型 Document Object Model
 
+     -->
 
+     <div id="partOne">第一部分</div>
 
+     <button class="btn">按钮</button>
 
+     <input type="text" placeholder="请输入内容">
 
+     <div id="box">这是一个盒子</div>
 
+     <ul class="list">
 
+        <li>3</li>
 
+        <li>3</li>
 
+        <li>3</li>
 
+        <li>3</li>
 
+     </ul>
 
+     <ol id="vase">
 
+        <li>32</li>
 
+        <li>32</li>
 
+        <li>32</li>
 
+     </ol>
 
+     <script src="../js/1.获取元素节点.js"></script>
 
+</body>
 
+</html>

+ 32 - 0
day12/html/2.小例子.html
Datei anzeigen 

@@ -0,0 +1,32 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .box {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+            position: absolute;
 
+        }
 
+        #btn {
 
+            margin-top: 240px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <button id="btn">改变颜色</button>
 
+    <ul class="list">
 
+        <li id="a">12</li>
 
+        <li id="b">34</li>
 
+        <li id="c">56</li>
 
+        <li id="d">78</li>
 
+    </ul>
 
+    <button class="changeBtn">改变列表颜色</button>
 
+    
+    <script src="../js/2.小例子.js"></script>
 
+</body>
 
+</html>

+ 12 - 0
day12/html/3.onload.html
Datei anzeigen 

@@ -0,0 +1,12 @@
 
+<!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>
 
+    <script src="../js/3.onload.js"></script>
 
+    <span id="main">这是一段文字</span>
 
+</body>
 
+</html>

+ 72 - 0
day12/html/4.选项卡.html
Datei anzeigen 

@@ -0,0 +1,72 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            list-style: none;
 
+            text-decoration: none;
 
+            box-sizing: border-box;
 
+        }
 
+        #list{
 
+            overflow: auto;
 
+        }
 
+        #list li {
 
+            float: left;
 
+            width: 120px;
 
+            height: 80px;
 
+            text-align: center;
 
+            line-height: 80px;
 
+            border: 1px solid #ccc;
 
+        }
 
+        .selected {
 
+            background-color: #f00;
 
+            color: #ff0;
 
+        }
 
+        .main {
 
+            /* width: 480px;
 
+            height: 200px;
 
+            background: #00f; */
 
+            /* 超出部分隐藏 占位 点击事件无效果 */
 
+            /* overflow: hidden; */
 
+        }
 
+        .active{
 
+            width: 480px;
 
+            height: 280px;
 
+            text-align: center;
 
+            line-height: 280px;
 
+            font-size: 40px;
 
+            border: 1px solid #ccc;
 
+            /* display:none;
 
+               隐藏 不占位 会对页面产生更改
 
+            */
 
+            display: none;
 
+        }
 
+        .choose {
 
+            /* 显示内容 */
 
+            display: block;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <ul id="list">
 
+            <li class="selected">用户管理</li>
 
+            <li>配置管理</li>
 
+            <li>角色管理</li>
 
+            <li>定时任务补偿</li>
 
+        </ul>
 
+        <div class="main">
 
+            <div class="choose active">用户管理</div>
 
+            <div class="active">配置管理</div>
 
+            <div class="active">角色管理</div>
 
+            <div class="active">定时任务补偿</div>
 
+        </div>
 
+    </div>
 
+    <script src="../js/4.选项卡.js"></script>
 
+</body>
 
+</html>

+ 99 - 0
day12/html/5.轮播图.html
Datei anzeigen 

@@ -0,0 +1,99 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            list-style: none;
 
+            text-decoration: none;
 
+            box-sizing: border-box;
 
+        }
 
+        #container {
 
+            width: 590px;
 
+            height: 470px;
 
+            margin: 100px auto;
 
+            position: relative;
 
+        }
 
+        #imgBox {
 
+            /* position: absolute;
 
+            top: 0; */
 
+        }
 
+        .selected {
 
+            display: none;
 
+        }
 
+        .choose {
 
+            display: block;
 
+        }
 
+        #list {
 
+            overflow: hidden;
 
+            position: absolute;
 
+            right: 10px;
 
+            bottom: 10px;
 
+        }
 
+        #list li {
 
+            float: left;
 
+            width: 20px;
 
+            height: 20px;
 
+            background: purple;
 
+            color: #fff;
 
+            font-size: 14px;
 
+            text-align: center;
 
+            line-height: 20px;
 
+            border-radius: 50%;
 
+            margin-right: 10px;
 
+        }
 
+        #list .active {
 
+            background: #f00;
 
+            color: #ff0;
 
+        }
 
+        #prev,#next {
 
+            width: 50px;
 
+            height: 50px;
 
+            background: rgb(0, 42, 255);
 
+            color: #66e21f;
 
+            font-size: 30px;
 
+            text-align: center;
 
+            line-height: 50px;
 
+            position: absolute;
 
+            top: 50%;
 
+            margin-top: -25px;
 
+            display: none;
 
+        }
 
+        #prev {
 
+            left: 0;
 
+        }
 
+        #next {
 
+            right: 0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <div id="imgBox">
 
+            <img src="../image/1.jpg" alt="" class="selected choose">
 
+            <img src="../image/2.jpg" alt="" class="selected">
 
+            <img src="../image/3.jpg" alt="" class="selected">
 
+            <img src="../image/4.jpg" alt="" class="selected">
 
+            <img src="../image/5.jpg" alt="" class="selected">
 
+        </div>
 
+        <ul id="list">
 
+            <li class="active">1</li>
 
+            <li>2</li>
 
+            <li>3</li>
 
+            <li>4</li>
 
+            <li>5</li>
 
+        </ul>
 
+        <div id="prev">
 
+            <span>&lt;</span>
 
+        </div>
 
+        <div id="next">
 
+            <span>&gt;</span>
 
+        </div>
 
+    </div>
 
+    <script src="../js/5.轮播图.js"></script>
 
+</body>
 
+</html>

+ 112 - 0
day12/html/6.滑入轮播图.html
Datei anzeigen 

@@ -0,0 +1,112 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            list-style: none;
 
+            text-decoration: none;
 
+            box-sizing: border-box;
 
+        }
 
+        #container {
 
+            width: 590px;
 
+            height: 470px;
 
+            margin: 100px auto;
 
+            overflow: hidden;
 
+            position: relative;
 
+        }
 
+        #imgBox {
 
+            width: 2950px;
 
+            height: 470px;
 
+            /* 过渡效果的css3样式属性
 
+                符合输出
 
+                property 规定以什么方式去过渡
 
+                duration 运动的时间（s/ms）
 
+                timing-function 运动的方式
 
+                    linear 匀速
 
+                delay 运动何时开始 
+            */
 
+            /* transition: property duration timing-function delay; */
 
+            position: absolute;
 
+            left: 0;
 
+            transition: left 2s linear;
 
+        }
 
+        /* 解决行内块元素空白间隙问题
 
+            1.让所有行内块元素中间无空格
 
+            2.float 浮动
 
+        */
 
+        #imgBox img {
 
+            float: left;
 
+        }
 
+        .list {
 
+            overflow: hidden;
 
+            position: absolute;
 
+            bottom: 10px;
 
+            right: 10px;
 
+        }
 
+        .list li {
 
+            float: left;
 
+            width: 20px;
 
+            height: 20px;
 
+            background: purple;
 
+            color: #fff;
 
+            border-radius: 50%;
 
+            text-align: center;
 
+            line-height: 20px;
 
+            font-size: 14px;
 
+            margin-left: 10px;
 
+        }
 
+        #prev,#next {
 
+            width: 50px;
 
+            height: 50px;
 
+            background: rgb(0, 42, 255);
 
+            color: #66e21f;
 
+            font-size: 30px;
 
+            text-align: center;
 
+            line-height: 50px;
 
+            position: absolute;
 
+            top: 50%;
 
+            margin-top: -25px;
 
+        }
 
+        #prev {
 
+            left: 0;
 
+        }
 
+        #next {
 
+            right: 0;
 
+        }
 
+        .list .selected {
 
+            background: #f00;
 
+            color: #ff0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <div id="imgBox">
 
+            <img src="../image/1.jpg" alt="">
 
+            <img src="../image/2.jpg" alt="">
 
+            <img src="../image/3.jpg" alt="">
 
+            <img src="../image/4.jpg" alt="">
 
+            <img src="../image/5.jpg" alt="">
 
+        </div>
 
+        <ul class="list">
 
+            <li class="selected">1</li>
 
+            <li>2</li>
 
+            <li>3</li>
 
+            <li>4</li>
 
+            <li>5</li>
 
+        </ul>
 
+        <div id="prev">
 
+            <span>&lt;</span>
 
+        </div>
 
+        <div id="next">
 
+            <span>&gt;</span>
 
+        </div>
 
+    </div>
 
+    <script src="../js/6.滑入轮播图.js"></script>
 
+</body>
 
+</html>

BIN
day12/image/1.jpg
Datei anzeigen


BIN
day12/image/2.jpg
Datei anzeigen


BIN
day12/image/3.jpg
Datei anzeigen


BIN
day12/image/4.jpg
Datei anzeigen


BIN
day12/image/5.jpg
Datei anzeigen


+ 17 - 0
day12/js/1.获取元素节点.js
Datei anzeigen 

@@ -0,0 +1,17 @@
 
+// 获取id命名的元素
 
+var partOne = document.getElementById("partOne");
 
+console.log(partOne);
 
+// 获取class命名的元素
 
+var btn = document.getElementsByClassName("btn");//获取数组
 
+console.log(btn);
 
+// 通过标签名称获取元素
 
+var inputs = document.getElementsByTagName("input");//获取数组
 
+console.log(inputs);
 
+// 通过css选择器获取（一个）元素
 
+var box = document.querySelector("#box");
 
+console.log(box);
 
+// 通过css选择器获取（多个）元素
 
+var lis = document.querySelectorAll(".list li");
 
+console.log(lis);
 
+var vase = document.querySelectorAll("#vase li");
 
+console.log(vase);

+ 20 - 0
day12/js/2.小例子.js
Datei anzeigen 

@@ -0,0 +1,20 @@
 
+var btn = document.getElementById("btn");
 
+var box = document.querySelector(".box");
 
+console.log(box);
 
+btn.onclick = function() {
 
+    box.style.background = 'red';
 
+    box.style.left = 200 + 'px';
 
+}
 
+// var a = document.getElementById("a");
 
+var b = document.getElementById("b");
 
+var c = document.getElementById("c");
 
+var d = document.getElementById("d");
 
+
 
+var a = document.querySelector(".list #a");
 
+var changeBtn = document.querySelector(".changeBtn");
 
+changeBtn.onclick = function() {
 
+    a.style.background = 'red';
 
+    b.style.background = 'yellow';
 
+    c.style.background = 'blue';
 
+    d.style.background = 'green';
 
+}

+ 4 - 0
day12/js/3.onload.js
Datei anzeigen 

@@ -0,0 +1,4 @@
 
+window.onload = function(){
 
+    document.getElementById("main").style.color = "green";
 
+}
 
+// 等所有的东西全部加载完毕，再去执行里面的内容

+ 18 - 0
day12/js/4.选项卡.js
Datei anzeigen 

@@ -0,0 +1,18 @@
 
+var btn = document.querySelectorAll("#list li");
 
+var content = document.getElementsByClassName("active");
 
+// this => window
 
+for(var i=0; i<btn.length; i++) {
 
+    // btn.length = 4
 
+    // btn下的每一个下标都为对应的i
 
+    btn[i].index = i;
 
+    btn[i].onclick = function() {
 
+        for(var j=0; j < content.length;j++){
 
+            // className 改 class （类名）
 
+            btn[j].className = '';
 
+            content[j].className = 'active';
 
+        }
 
+        // this => btn[i]
 
+        this.className = 'selected';
 
+        content[this.index].className = "choose active";
 
+    }
 
+}

+ 65 - 0
day12/js/5.轮播图.js
Datei anzeigen 

@@ -0,0 +1,65 @@
 
+var picture = document.getElementsByClassName("selected");
 
+var point = document.getElementsByTagName("li");
 
+var prev = document.getElementById("prev");
 
+var next = document.getElementById("next");
 
+var container = document.getElementById("container");
 
+// 图片索引
 
+var isNow = 0;
 
+// 抽取方法
 
+var autoPlay = function(ind) {
 
+    for(var i=0;i<point.length;i++) {
 
+        point[i].className = '';
 
+        picture[i].className = 'selected'
 
+    }
 
+    point[ind].className = 'active';
 
+    picture[ind].className = 'selected choose';
 
+}
 
+
 
+// point操作
 
+for(var i=0;i<point.length;i++) {
 
+    point[i].index = i;
 
+    point[i].onclick = function() {
 
+        // this=>point[i]
 
+        isNow = this.index;
 
+        autoPlay(isNow);
 
+    }
 
+}
 
+
 
+// 上一页
 
+prev.onclick = function() {
 
+    isNow--;
 
+    if(isNow < 0) {
 
+        isNow = picture.length - 1;
 
+    }
 
+    autoPlay(isNow);
 
+}
 
+
 
+// 下一页
 
+next.onclick = function() {
 
+    isNow++;
 
+    if(isNow > picture.length -1) {
 
+        isNow = 0;
 
+    }
 
+    autoPlay(isNow);
 
+}
 
+
 
+// 自动播放
 
+var timer = setInterval(function(){
 
+    next.onclick();
 
+},1000)
 
+
 
+// 鼠标划过
 
+container.onmousemove = function() {
 
+    prev.style.display = 'block';
 
+    next.style.display = 'block';
 
+    clearInterval(timer);
 
+}
 
+
 
+// 鼠标划出
 
+container.onmouseout = function() {
 
+    prev.style.display = 'none';
 
+    next.style.display = 'none';
 
+    timer = setInterval(function(){
 
+        next.onclick();
 
+    },1000)
 
+}

+ 47 - 0
day12/js/6.滑入轮播图.js
Datei anzeigen 

@@ -0,0 +1,47 @@
 
+var btn = document.querySelectorAll('.list li');
 
+console.log(btn);
 
+var picture = document.getElementsByTagName("img");
 
+var imgBox = document.getElementById("imgBox");
 
+var prev = document.getElementById("prev");
 
+var next = document.getElementById("next");
 
+var isNow = 0;
 
+// this=>window
 
+// 点击小圆点时
 
+for(var i=0;i<btn.length;i++) {
 
+    btn[i].index = i;
 
+    btn[i].onclick = function() {
 
+        for(var j=0;j<btn.length;j++) {
 
+            btn[j].className = '';
 
+        }
 
+        // this=>btn[i]
 
+        this.className = 'selected';
 
+        isNow = this.index;
 
+        imgBox.style.left = -590 * this.index + 'px';
 
+    }
 
+}
 
+
 
+// 下一张
 
+next.onclick = function() {
 
+    isNow++;
 
+    if(isNow > picture.length - 1) {
 
+        isNow = 0;
 
+    }
 
+    for(var i=0;i<btn.length;i++) {
 
+        btn[i].className = '';
 
+    }
 
+    btn[isNow].className = 'selected';
 
+    imgBox.style.left = -590 * isNow + 'px';
 
+}
 
+
 
+// 上一张
 
+prev.onclick = function() {
 
+    isNow--;
 
+    if(isNow < 0) {
 
+        isNow = picture.length -1;
 
+    }
 
+    for(var i=0;i<btn.length;i++) {
 
+        btn[i].className = '';
 
+    }
 
+    btn[isNow].className = 'selected';
 
+    imgBox.style.left = -590 * isNow + 'px';
 
+}

+ 76 - 0
day13/html/1.淡入淡出轮播图.html
Datei anzeigen 

@@ -0,0 +1,76 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            list-style: none;
 
+            text-decoration: none;
 
+            box-sizing: border-box;
 
+        }
 
+        #container {
 
+            width: 590px;
 
+            height: 470px;
 
+            margin: 100px auto;
 
+            position: relative;
 
+        }
 
+        #imgBox img{
 
+            /* opacity 透明度
 
+                占位
 
+                点击事件仍会触发
 
+            */
 
+            opacity: 0;
 
+            transition: opacity 1s linear;
 
+            position: absolute;
 
+        }
 
+        #imgBox .active {
 
+            opacity: 1;
 
+        }
 
+        .list {
 
+            overflow: hidden;
 
+            position: absolute;
 
+            bottom: 10px;
 
+            right: 10px;
 
+        }
 
+        .list li {
 
+            float: left;
 
+            width: 20px;
 
+            height: 20px;
 
+            background: #00f;
 
+            color: #fff;
 
+            font-size: 14px;
 
+            text-align: center;
 
+            line-height: 20px;
 
+            border-radius: 50%;
 
+            margin-right: 10px;
 
+        }
 
+        .list .selected {
 
+            background: #ff0;
 
+            color: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <div id="imgBox">
 
+            <img class="active" src="../image/1.jpg" alt="">
 
+            <img src="../image/2.jpg" alt="">
 
+            <img src="../image/3.jpg" alt="">
 
+            <img src="../image/4.jpg" alt="">
 
+            <img src="../image/5.jpg" alt="">
 
+        </div>
 
+        <ul class="list">
 
+            <li class="selected">1</li>
 
+            <li>2</li>
 
+            <li>3</li>
 
+            <li>4</li>
 
+            <li>5</li>
 
+        </ul>
 
+    </div>
 
+    <script src="../js/1.淡入淡出轮播图.js"></script>
 
+</body>
 
+</html>

+ 25 - 0
day13/html/2.获取元素宽度.html
Datei anzeigen 

@@ -0,0 +1,25 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        .box {
 
+            width: 400px;
 
+            height: 300px;
 
+            margin-top: 20px;
 
+            margin-left: 40px;
 
+            background: #00f;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <script src="../js/2.获取元素宽度.js"></script>
 
+</body>
 
+</html>

+ 29 - 0
day13/html/3.小例子.html
Datei anzeigen 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .box {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+            transition: width 1s linear;
 
+        }
 
+        .box1 {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+            transition: width 2s linear;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <button id="btn1">放大</button>
 
+    <button id="btn2">缩小</button>
 
+    <div class="box1"></div>
 
+    <script src="../js/3.小例子.js"></script>
 
+</body>
 
+</html>

+ 27 - 0
day13/html/4.事件.html
Datei anzeigen 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .box {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+        }
 
+        .box1 {
 
+            width: 100px;
 
+            height: 100px;
 
+            background: #00f;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="box1"></div>
 
+    </div>
 
+    <input type="text" id="inp" placeholder="请输入内容">
 
+    <script src="../js/4.事件.js"></script>
 
+</body>
 
+</html>

+ 24 - 0
day13/html/5.拖拽.html
Datei anzeigen 

@@ -0,0 +1,24 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        #box {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: aqua;
 
+            position: absolute;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+    <script src="../js/5.拖拽.js"></script>
 
+</body>
 
+</html>

+ 74 - 0
day13/html/6.放大镜.html
Datei anzeigen 

@@ -0,0 +1,74 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        #container {
 
+            /* overflow: auto; */
 
+            position: relative;
 
+        }
 
+        #small {
 
+            width: 400px;
 
+            height: 400px;
 
+            position: relative;
 
+            /* float: left; */
 
+        }
 
+        #drag {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: rgba(0, 0, 0, .3);
 
+            display: none;
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+        }
 
+        #big {
 
+            /* float: left; */
 
+            position: absolute;
 
+            top: 0;
 
+            left: 400px;
 
+            width: 400px;
 
+            height: 400px;
 
+            overflow: hidden;
 
+            display: none;
 
+        }
 
+        #bigImg {
 
+            position: absolute;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <div id="small">
 
+            <img src="../image/6.jpg" alt="">
 
+            <div id="drag"></div>
 
+        </div>
 
+        <div id="big">
 
+            <img src="../image/7.jpg" alt="" id="bigImg">
 
+        </div>
 
+    </div>
 
+    <script src="../js/6.放大镜.js"></script>
 
+    <!-- 
+        排版:遮罩隐藏 大盒子隐藏
 
+        获取操作元素=> 小盒子、遮罩层、大盒子、大图片；
 
+        鼠标移入 ：遮罩显示 大盒子显示
 
+        鼠标移出: 遮罩隐藏 大盒子隐藏
 
+        鼠标移动：
 
+            1.先求出鼠标在遮罩层距离盒子的距离（鼠标是在遮罩层中心点）；
 
+            2.遮罩层移动赋值；
 
+            3.处理遮罩层超出距离；
 
+            4.先处理遮罩层左侧和上侧的超出问题
 
+            5.在求出遮罩层在小盒子所移动的最大距离
 
+            6.在处理遮罩层右侧和下方的超出问题
 
+            7.求比例 遮罩层元素移动距离 / 遮罩层所能移动的最大距离
 
+            8.再求出大图可以移动的最大距离
 
+            9.给大图设置位置：-大图可移动距离 * 移动比例 + 'px'
 
+     -->
 
+</body>
 
+</html>

BIN
day13/image/1.jpg
Datei anzeigen


BIN
day13/image/2.jpg
Datei anzeigen


BIN
day13/image/3.jpg
Datei anzeigen


BIN
day13/image/4.jpg
Datei anzeigen


BIN
day13/image/5.jpg
Datei anzeigen


BIN
day13/image/6.jpg
Datei anzeigen


BIN
day13/image/7.jpg
Datei anzeigen


+ 19 - 0
day13/js/1.淡入淡出轮播图.js
Datei anzeigen 

@@ -0,0 +1,19 @@
 
+// var active = document.querySelector(".active");
 
+// active.onclick = function() {
 
+//     console.log("111")
 
+// }
 
+
 
+var lis = document.querySelectorAll(".list li");
 
+var imgs = document.getElementsByTagName("img");
 
+// var isNow = 0;
 
+for(var i=0;i<lis.length;i++) {
 
+    lis[i].index = i;
 
+    lis[i].onclick = function() {
 
+        for(var j=0;j<lis.length;j++) {
 
+            lis[j].className = '';
 
+            imgs[j].className = '';
 
+        }
 
+        this.className = 'selected';
 
+        imgs[this.index].className = 'active';
 
+    }
 
+}

+ 13 - 0
day13/js/2.获取元素宽度.js
Datei anzeigen 

@@ -0,0 +1,13 @@
 
+var box = document.querySelector(".box");
 
+console.log(box);
 
+console.log(box.offsetWidth);
 
+// offsetWidth 获取元素宽度
 
+console.log(box.offsetHeight);
 
+console.log(box.offsetTop);
 
+console.log(box.offsetLeft);
 
+// offsetHeight 获取元素高度
 
+// offsetTop 获取元素距离上级距离
 
+// offsetLeft 获取元素距离左侧距离
 
+// 获取滚动条滚动高度
 
+// document.body.scrollTop
 
+// document.documentElement.scrollTop

+ 29 - 0
day13/js/3.小例子.js
Datei anzeigen 

@@ -0,0 +1,29 @@
 
+var box = document.querySelector(".box");
 
+var btn1 = document.getElementById("btn1");
 
+var btn2 = document.getElementById("btn2");
 
+
 
+btn1.onclick = function() {
 
+    var timer1 = setInterval(function(){
 
+        if (box.offsetWidth >= 250) {
 
+            clearInterval(timer1);
 
+        } else {
 
+            box.style.width = box.offsetWidth + 10 + 'px'
 
+        }
 
+    },1000)
 
+}
 
+
 
+box.onclick = function() {
 
+    console.log(box.offsetWidth,'宽度')
 
+
 
+}
 
+
 
+btn2.onclick = function() {
 
+    var timer2 = setInterval(function(){
 
+        if(box.offsetWidth <= 200) {
 
+            clearInterval(timer2);
 
+            console.log(box.offsetWidth)   
+        } else {
 
+            box.style.width = box.offsetWidth - 10 + 'px';
 
+        }
 
+    },1000)
 
+}

+ 38 - 0
day13/js/4.事件.js
Datei anzeigen 

@@ -0,0 +1,38 @@
 
+var box = document.querySelector(".box");
 
+var box1 = document.querySelector(".box1");
 
+var input = document.querySelector("#inp")
 
+// 点击事件 onclick
 
+// 双击事件 ondblclick
 
+box.ondblclick = function() {
 
+    console.log("双击事件");
 
+}
 
+box.onmousedown = function() {
 
+    console.log("按下鼠标时触发事件");
 
+}
 
+box.onmouseup = function() {
 
+    console.log("鼠标按下松开时所触发的事件");
 
+}
 
+box1.onmouseover = function() {
 
+    console.log("当鼠标移动到某对象范围的上方时触发此事件");
 
+}
 
+box.onmousemove = function() {
 
+    console.log("鼠标移动时候触发");
 
+}
 
+box.onmouseout = function() {
 
+    console.log("鼠标移出时触发");
 
+}
 
+// 每一个function中都有其事件对象
 
+input.onkeydown = function(event) {
 
+    console.log(event.keyCode,"触发");
 
+    if(event.keyCode == '13') {
 
+        console.log("当前按键时回车键");
 
+    }
 
+}
 
+
 
+input.onkeyup = function() {
 
+    console.log("键盘抬起事件");
 
+}
 
+
 
+input.onkeypress = function() {
 
+    console.log("键盘上的某个键被按下并且释放时触发此事件");
 
+}

+ 14 - 0
day13/js/5.拖拽.js
Datei anzeigen 

@@ -0,0 +1,14 @@
 
+var box = document.getElementById("box");
 
+box.onmousedown = function(event) {
 
+    // e.clientX	事件发生时，鼠标在客户端区域的X坐标，客户端区域是指页面可视区域
 
+    // e.clientY	事件发生时，鼠标在客户端区域的Y坐标
 
+    var left1 = event.clientX - box.offsetLeft;
 
+    var top1 = event.clientY - box.offsetTop;
 
+    box.onmousemove = function(e) {
 
+        box.style.left = e.clientX - left1 + 'px';
 
+        box.style.top = e.clientY - top1 + 'px';
 
+    }
 
+}
 
+box.onmouseup = function() {
 
+    box.onmousemove = null;
 
+}

+ 44 - 0
day13/js/6.放大镜.js
Datei anzeigen 

@@ -0,0 +1,44 @@
 
+var small = document.getElementById("small");
 
+var drag = document.getElementById("drag");
 
+var big = document.getElementById("big");
 
+var bigImg = document.getElementById("bigImg");
 
+
 
+small.onmouseover = function() {
 
+    drag.style.display = 'block';
 
+    big.style.display = 'block';
 
+}
 
+
 
+small.onmouseout = function() {
 
+    drag.style.display = 'none';
 
+    big.style.display = 'none';
 
+}
 
+
 
+small.onmousemove = function(e) {
 
+    var smallLeft = e.clientX - drag.offsetWidth / 2;
 
+    var smallTop = e.clientY - drag.offsetHeight / 2;
 
+    drag.style.left = smallLeft + 'px';
 
+    drag.style.top = smallTop + 'px';
 
+    if(drag.offsetLeft <= 0) {
 
+        drag.style.left = 0;
 
+    }
 
+    if(drag.offsetTop <= 0) {
 
+        drag.style.top = 0;
 
+    }
 
+    // 遮罩层最大移动距离
 
+    var left1 = small.offsetWidth - drag.offsetWidth;
 
+    var top1 = small.offsetHeight - drag.offsetHeight;
 
+    if(drag.offsetLeft > left1) {
 
+        drag.style.left = left1 + 'px';
 
+    }
 
+    if(drag.offsetTop > top1) {
 
+        drag.style.top = top1 + 'px';
 
+    }
 
+    var x = drag.offsetLeft / left1;
 
+    var y = drag.offsetTop / top1;
 
+    // 大图可移动距离
 
+    var bigLeft = bigImg.offsetWidth - big.offsetWidth;
 
+    var bigTop = bigImg.offsetHeight - big.offsetHeight;
 
+
 
+    bigImg.style.left = -bigLeft * x + 'px';
 
+    bigImg.style.top = -bigTop * y + 'px';
 
+}

+ 14 - 0
day14/html/1.节点.html
Datei anzeigen 

@@ -0,0 +1,14 @@
 
+<!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>
 
+    <div id="box"></div>
 
+    <!-- <input type="text" value="1" id="main"> -->
 
+    <p id="main">内容内容内容</p>
 
+    <script src="../js/1.节点.js"></script>
 
+</body>
 
+</html>

+ 60 - 0
day14/html/2.节点遍历.html
Datei anzeigen 

@@ -0,0 +1,60 @@
 
+<!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>
 
+    <!-- <script src="../js/2.节点遍历.js"></script> -->
 
+    <p id="main">这是一个p标签</p>
 
+    <div class="box">这是一个盒子</div>
 
+    <h2>
 
+      我的你的
 
+      <br />
 
+      你的我的
 
+      <br />
 
+      1111
 
+    </h2>
 
+    <h3>呜呜呜</h3>
 
+    <ul id="list">
 
+      <li>1</li>
 
+      <li>2</li>
 
+      <li>3</li>
 
+      <li>4</li>
 
+    </ul>
 
+    <script>
 
+      var main = document.getElementById("main");
 
+      var box = document.querySelector(".box");
 
+      var h2 = document.querySelector("h2");
 
+      var list = document.getElementById("list");
 
+        console.log(box.nextSibling,'1')
 
+      // firstChild 第一个子节点
 
+      // lastChild 最后一个子节点
 
+      // previousSibling 上一个兄弟节点名称
 
+      // nextSibling 下一个兄弟节点名称
 
+      // nextElementSibling 下一个元素节点
 
+      // previousElementSibling 上一个元素节点 如果该节点为第一个节点 则获取值为null
 
+      // lastElementChild
 
+      // firstElementChild
 
+
 
+      //遍历
 
+      function fn2(ele) {
 
+        do {
 
+          ele = ele.previousSibling;
 
+        } while (ele.nodeType != 1);
 
+        return ele;
 
+      }
 
+
 
+      function fn1(ele) {
 
+        var a1 = ele.lastChild;
 
+        if (a1.nodeType != 1) {
 
+         return ele = fn2(a1);
 
+        } else {
 
+          return ele;
 
+        }
 
+      }
 
+      console.log(fn1(list));
 
+    </script>
 
+  </body>
 
+</html>

+ 42 - 0
day14/html/3.垂直导航.html
Datei anzeigen 

@@ -0,0 +1,42 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            list-style: none;
 
+        }
 
+        h2 {
 
+            width: 300px;
 
+            height: 60px;
 
+            line-height: 60px;
 
+            background: #000;
 
+            color: #fff;
 
+        }
 
+        ul {
 
+            display: none;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <h2>管理区</h2>
 
+        <ul>
 
+            <li>111</li>
 
+            <li>111</li>
 
+            <li>111</li>
 
+        </ul>
 
+        <h2>交流区</h2>
 
+        <ul>
 
+            <li>222</li>
 
+            <li>222</li>
 
+            <li>222</li>
 
+        </ul>
 
+    </div>
 
+    <script src="../js/3.垂直导航.js"></script>
 
+</body>
 
+</html>

+ 23 - 0
day14/html/4.添加节点.html
Datei anzeigen 

@@ -0,0 +1,23 @@
 
+<!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>
 
+    <div id="box">
 
+        <p id="first">12345</p>
 
+        <p id="one">67890</p>
 
+        <ol id="list">
 
+            <li>1</li>
 
+            <li>2</li>
 
+            <li>3</li>
 
+        </ol>
 
+    </div>
 
+    <!-- <p id="other">
 
+        <span>12345</span>
 
+    </p> -->
 
+    <script src="../js/4.添加节点.js"></script>
 
+</body>
 
+</html>

+ 33 - 0
day14/html/5.事件冒泡.html
Datei anzeigen 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box1 {
 
+            width: 500px;
 
+            height: 500px;
 
+            background: #00f;
 
+        }
 
+        #box2 {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: #0f0;
 
+        }
 
+        #box3 {
 
+            width: 100px;
 
+            height: 100px;
 
+            background: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1">
 
+        <div id="box2">
 
+            <div id="box3"></div>
 
+        </div>
 
+    </div>
 
+    <script src="../js/5.事件冒泡.js"></script>
 
+</body>
 
+</html>

+ 12 - 0
day14/html/6.事件默认行为.html
Datei anzeigen 

@@ -0,0 +1,12 @@
 
+<!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>
 
+    <a href="https://www.baidu.com">跳转</a>
 
+    <script src="../js/6.事件默认行为.js"></script>
 
+</body>
 
+</html>

+ 26 - 0
day14/html/7.事件源.html
Datei anzeigen 

@@ -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>
 
+    <style>
 
+        #box1 {
 
+            width: 400px;
 
+            height: 400px;
 
+            background: #00f;
 
+        }
 
+        #box2 {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #000;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1">
 
+        <div id="box2"></div>
 
+    </div>
 
+    <script src="../js/7.事件源.js"></script>
 
+</body>
 
+</html>

+ 39 - 0
day14/html/8.事件流.html
Datei anzeigen 

@@ -0,0 +1,39 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box1 {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: #ff0;
 
+        }
 
+        #box2 {
 
+            width: 150px;
 
+            height: 150px;
 
+            background: #f00;
 
+        }
 
+        #box3 {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: #00f;
 
+        }
 
+        #box4 {
 
+            width: 150px;
 
+            height: 150px;
 
+            background: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1">
 
+        <div id="box2"></div>
 
+    </div>
 
+    <div id="box3">
 
+        <div id="box4"></div>
 
+    </div>
 
+    <script src="../js/8.事件流.js"></script>
 
+</body>
 
+</html>

BIN
day14/images/事件.png
Datei anzeigen


BIN
day14/images/图片1.png
Datei anzeigen


+ 9 - 0
day14/js/1.节点.js
Datei anzeigen 

@@ -0,0 +1,9 @@
 
+var box = document.getElementById("box");
 
+var p = document.querySelector("#main");
 
+
 
+console.log(box.nodeName)
 
+console.log(p.nodeType)
 
+// innerHTML 文本内容
 
+// nodeName 节点名字
 
+// nodeType 节点类型
 
+box.innerHTML = '我的我的我的我的我的我的';

+ 0 - 0
day14/js/2.节点遍历.js
Datei anzeigen


+ 12 - 0
day14/js/3.垂直导航.js
Datei anzeigen 

@@ -0,0 +1,12 @@
 
+var h2 = document.getElementsByTagName("h2");
 
+for(var i=0;i<h2.length;i++) {
 
+    h2[i].onclick = function() {
 
+        var uls = this.nextElementSibling;
 
+        console.log(uls)
 
+        if(uls.style.display == 'block') {
 
+            uls.style.display = 'none';
 
+        } else {
 
+            uls.style.display = 'block'
 
+        }
 
+    }
 
+}

+ 50 - 0
day14/js/4.添加节点.js
Datei anzeigen 

@@ -0,0 +1,50 @@
 
+var box = document.getElementById("box");
 
+var one = document.getElementById("one");
 
+var list = document.getElementById("list");
 
+console.log(box.nodeName);
 
+console.log(box.nodeType);
 
+console.log(box.childNodes[1].innerHTML);
 
+// 文本内容
 
+// innerHTML 包含html标签
 
+// innerText 不包含html标签
 
+// childNodes[num] 子节点
 
+// 节点值
 
+// nodeValue
 
+// var other = document.getElementById("other");
 
+// alert(other.innerHTML)
 
+var first = document.getElementById("first");
 
+// 创建元素 createElement
 
+var a = document.createElement("span");
 
+console.log(a);
 
+a.innerHTML = '新的元素';
 
+console.log(a);
 
+// box.insertBefore(a,b);
 
+// 插入
 
+// insertBefore(参数1，参数2)；
 
+// 参数1 要插入的当前元素
 
+// 参数2 项参数2中添加参数一的内容
 
+first.insertBefore(a,first[0])
 
+var ul = document.createElement("ul");
 
+var li = document.createElement("li");
 
+li.innerHTML = '列表1';
 
+console.log(ul,'ul');
 
+console.log(li,'li');
 
+// 添加 appendChild
 
+ul.appendChild(li);
 
+console.log(ul,'添加');
 
+box.appendChild(ul);
 
+// var news = document.createElement('b');
 
+// news.innerHTML = '字体';
 
+// box.insertBefore(news,box[0]);
 
+//删除 removeChild
 
+// box.removeChild(ul);
 
+var h5 = document.createElement("h5");
 
+h5.innerHTML = '这是一个标题';
 
+// 替换节点 replaceChild（新节点,旧节点);
 
+// box.replaceChild(h5,first);
 
+// 删除整个节点 remove()
 
+// box.remove()
 
+// console.log(list.childNodes[0])
 
+var li1 = document.querySelectorAll("#list li")[0]
 
+console.log(li1)
 
+list.insertBefore(h5,list[4]);

+ 45 - 0
day14/js/5.事件冒泡.js
Datei anzeigen 

@@ -0,0 +1,45 @@
 
+var box1 = document.getElementById("box1");
 
+var box2 = document.getElementById("box2");
 
+var box3 = document.getElementById("box3");
 
+
 
+// 事件捕获 由外向内触发操作 
+// 事件冒泡 由内向外触发操作
 
+// box1.onclick = function(event) {
 
+//     console.log("第一个盒子");
 
+//     event.stopPropagation();
 
+// }
 
+
 
+// box2.onclick = function(event) {
 
+//     console.log("第二个盒子");
 
+//     event.stopPropagation();
 
+// }
 
+
 
+// box3.onclick = function(event) {
 
+//     console.log("第三个盒子");
 
+//     // IE浏览器阻止事件冒泡方法
 
+//     event.cancelBubble = true;
 
+// }
 
+
 
+// 阻止事件冒泡
 
+// 1.event.stopPropagation();
 
+//2.event.cancelBubble = true;
 
+
 
+
 
+// addEventListener 添加监听事件
 
+// 1.要执行的事件 字符串格式
 
+// 2.执行的函数方法
 
+// 3.触发类型 false(事件冒泡) true（事件捕获）
 
+box1.addEventListener("click",function(event){
 
+    console.log("第一个盒子");
 
+    event.stopPropagation();
 
+},false);
 
+
 
+box2.addEventListener("click",function(event){
 
+    console.log("第二个盒子");
 
+    event.stopPropagation();
 
+},false);
 
+
 
+box3.addEventListener("click",function(event){
 
+    console.log("第三个盒子");
 
+    event.cancelBubble = true;
 
+},false);

+ 8 - 0
day14/js/6.事件默认行为.js
Datei anzeigen 

@@ -0,0 +1,8 @@
 
+var a = document.querySelector("a");
 
+a.onclick = function(event) {
 
+    console.log("123");
 
+    // 取消事件的默认行为
 
+    event.preventDefault();
 
+    // 适用于IE浏览器
 
+    // event.returnValue = false;
 
+}

+ 12 - 0
day14/js/7.事件源.js
Datei anzeigen 

@@ -0,0 +1,12 @@
 
+// 事件源 事件的源头
 
+var box1 = document.getElementById("box1");
 
+var box2 = document.getElementById("box2");
 
+
 
+box1.onclick = function(event){
 
+    console.log(event.target,'box1');
 
+}
 
+
 
+box2.onclick = function(event){
 
+    console.log(event.target,'box2');
 
+    event.stopPropagation();
 
+}

+ 29 - 0
day14/js/8.事件流.js
Datei anzeigen 

@@ -0,0 +1,29 @@
 
+var box1 = document.getElementById("box1");
 
+var box2 = document.getElementById("box2");
 
+var box3 = document.getElementById("box3");
 
+var box4 = document.getElementById("box4");
 
+
 
+
 
+// W3C规定的(万维网联盟)
 
+//DOM事件流：事件捕获阶段 目标阶段 事件冒泡阶段
 
+// 先捕获 后冒泡
 
+// 事件捕获
 
+box1.addEventListener('click',function(){
 
+    console.log(this,'box1');
 
+},true)
 
+
 
+box2.addEventListener('click',function(){
 
+    console.log(this,'box2');
 
+},true)
 
+
 
+
 
+// 事件冒泡
 
+box3.addEventListener('click',function(){
 
+    console.log(this,'box3');
 
+},false)
 
+
 
+box4.addEventListener('click',function(){
 
+    console.log(this,'box4');
 
+},false)
 
+
 
+// removeEventListener（参数1，参数2，参数3）

+ 27 - 0
day15/html/1.事件委托.html
Datei anzeigen 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #list {
 
+            width: 100px;
 
+            height: 300px;
 
+            background: #00f;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        事件委托的主要作用：用来减少内存消耗，不用处理多次循环绑定
 
+     -->
 
+     <ul id="list">
 
+        <li>1111</li>
 
+        <li>2222</li>
 
+        <li>3333</li>
 
+     </ul>
 
+     <button id="btn">添加</button>
 
+    <script src="../js/1.事件委托.js"></script>
 
+</body>
 
+</html>

+ 19 - 0
day15/html/2.this指向.html
Datei anzeigen 

@@ -0,0 +1,19 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+    <script src="../js/2.this指向.js"></script>
 
+</body>
 
+</html>

+ 11 - 0
day15/html/3.改变this指向的方法.html
Datei anzeigen 

@@ -0,0 +1,11 @@
 
+<!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>
 
+    <script src="../js/3.改变this指向的方法.js"></script>
 
+</body>
 
+</html>

+ 11 - 0
day15/html/4.原型、原型链、构造函数.html
Datei anzeigen 

@@ -0,0 +1,11 @@
 
+<!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>
 
+    <script src="../js/4.原型、原型链、构造函数.js"></script>
 
+</body>
 
+</html>

+ 11 - 0
day15/html/5.屏幕宽高.html
Datei anzeigen 

@@ -0,0 +1,11 @@
 
+<!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>
 
+    <script src="../js/5.屏幕宽高.js"></script>
 
+</body>
 
+</html>

+ 16 - 0
day15/html/6.下落的树叶.html
Datei anzeigen 

@@ -0,0 +1,16 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        img {
 
+            position: absolute;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <script src="../js/6.下落的树叶.js"></script>
 
+</body>
 
+</html>

BIN
day15/img/1.png
Datei anzeigen


BIN
day15/img/2.png
Datei anzeigen


BIN
day15/img/3.png
Datei anzeigen


BIN
day15/img/4.png
Datei anzeigen


+ 23 - 0
day15/js/1.事件委托.js
Datei anzeigen 

@@ -0,0 +1,23 @@
 
+var list = document.getElementById("list");
 
+var btn = document.getElementById("btn");
 
+var lis = document.getElementsByTagName("li");
 
+
 
+// for(var i=0;i<lis.length;i++) {
 
+//     lis[i].onclick = function() {
 
+//         console.log(this.innerHTML)
 
+//     }
 
+// }
 
+
 
+list.onclick = function(event) {
 
+    // console.log(event.target)
 
+    if(event.target.tagName == 'LI') {
 
+        console.log(event.target.innerHTML)
 
+    }
 
+}
 
+
 
+
 
+btn.onclick = function() {
 
+    var newLi = document.createElement("li");
 
+    newLi.innerHTML = Math.round(Math.random()*9 + 1);//随机获取1-10的整数
 
+    list.appendChild(newLi);
 
+}

+ 34 - 0
day15/js/2.this指向.js
Datei anzeigen 

@@ -0,0 +1,34 @@
 
+var box = document.getElementById("box");
 
+
 
+// 点击事件 当前元素中引用谁 this就指向谁
 
+// box.onclick = function() {
 
+//     console.log(this)
 
+// }
 
+
 
+
 
+// 在定时器中 this指向全局变量 window
 
+// box.onclick = function() {
 
+//     setInterval(function(){
 
+//         console.log(this);
 
+//     },1000)
 
+// }
 
+
 
+
 
+// 在对象中 this指向当前对象的本身
 
+// var obj = {
 
+//     name: 'LiLi',
 
+//     sex: '女',
 
+//     age: function() {
 
+//         console.log(this);
 
+//     }
 
+// }
 
+
 
+// obj.age();
 
+
 
+
 
+// 在函数里 this指向window
 
+function fn1() {
 
+    console.log(this);
 
+}
 
+
 
+fn1();

Einige Dateien werden nicht angezeigt, da zu viele Dateien in diesem Diff geändert wurden.