Domů Procházet Nápověda
Přihlásit se
lovecoding
/
VIP26
9
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Procházet zdrojové kódy

fix:day19

e před 1 rokem
rodič
1ef2956dd9
revize
603abf4d74
8 změnil soubory, kde provedl 205 přidání a 1 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 1 1
      day18/js/1.照片墙.js
  2. binární
      day19/222.mp4
  3. 23 0
      day19/html/1.简介.html
  4. 22 0
      day19/html/2.标签.html
  5. 62 0
      day19/html/3.输入类型.html
  6. 73 0
      day19/html/4.多媒体标签.html
  7. 24 0
      day19/html/5.属性.html
  8. binární
      day19/周杰伦-花海.mp3

+ 1 - 1
day18/js/1.照片墙.js
Zobrazit soubor 

@@ -20,5 +20,5 @@ for(var i=0;i<allImg.length;i++) {
 
     allImg[i].style.top = row * gapY + (row - 1) * 120 + 'px';
 
     allImg[i].style.left = col * gapX + (col -1) * 120 + 'px';
 
     allImg[i].style.transform = 'rotate(' + Math.random()*45 + 'deg)'
 
-    allImg[i].style.transitionDelay = (23 -i) * 100 + 'ms';
 
+    allImg[i].style.transitionDelay = (23 - i) * 100 + 'ms';
 
 }

binární
day19/222.mp4
Zobrazit soubor


+ 23 - 0
day19/html/1.简介.html
Zobrazit soubor 

@@ -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>
 
+        !DOCTYPE 声明文档规范 html5
 
+        <!-- 
+        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
+        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
+
 
+    
+  -->
 
+<!-- <html xmlns="http://www.w3.org/1999/xhtml">
 
+    xml文档规范
 
+</html> -->
 
+  <!-- DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析
 
+  这个⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript 脚本的解析  -->
 
+</body>
 
+</html>

+ 22 - 0
day19/html/2.标签.html
Zobrazit soubor 

@@ -0,0 +1,22 @@
 
+<!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>
 
+    <!-- <header> 定义 section 或 page 的页眉 （页面顶部，文档的头部区域）
 
+    <nav> 定义导航链接
 
+    <article> 定义文章
 
+    <section> 定义 section（文档中的一块文档中的区段）
 
+    <aside> 定义页面内容之外的内容（侧边栏）
 
+    <footer> 定义 section 或 page 的页脚（页面底部） -->
 
+        <header></header>
 
+        <nav></nav>
 
+        <article></article>
 
+        <section></section>
 
+        <aside></aside>
 
+        <footer></footer>
 
+</body>
 
+</html>

+ 62 - 0
day19/html/3.输入类型.html
Zobrazit soubor 

@@ -0,0 +1,62 @@
 
+<!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>
 
+    <form action="">
 
+        <!-- text文本 -->
 
+        <input type="text">
 
+        <br>
 
+        <!-- email 邮箱 校验 -->
 
+        <input type="email">
 
+        <br>
 
+        <!-- color 调色 -->
 
+        <input type="color" value="#ff0000">
 
+        <br>
 
+        <!-- 提交按钮 -->
 
+        <input type="submit">
 
+        <!-- date 日期 -->
 
+        <input type="date" value="2012-01-01">
 
+        <br>
 
+        <!-- time事件 -->
 
+        <input type="time">
 
+        <br>
 
+        <!-- search 搜索 出现清除按钮 -->
 
+        <input type="search">
 
+        <br>
 
+        <!-- range 划块类型 
+            slot 定义划块距离
 
+        -->
 
+        <input type="range">
 
+        <br>
 
+        <input type="range" slot="20">
 
+        <br>
 
+        <!-- number 数字 max最大值 min 最小值 
+            step 定义数值 min + step
 
+        -->
 
+        <input type="number" max="10" min="3" step="3">
 
+        <br>
 
+        <!-- tel 手机号
 
+            maxlength可以输入的最大值
 
+        -->
 
+        <input type="tel" maxlength="11">
 
+        <br>
 
+        <!-- file上传文件
 
+            accept 上传文件类型
 
+        -->
 
+        <input type="file" accept="image/jpg,image/png">
 
+        <select name="" id="">
 
+            <option value="11">11</option>
 
+            <option value="22">22</option>
 
+        </select>
 
+        <input type="text" list="list1">
 
+        <datalist id="list1">
 
+            <option value="我的">1</option>
 
+            <option value="你的">2</option>
 
+        </datalist>
 
+    </form>
 
+</body>
 
+</html>

+ 73 - 0
day19/html/4.多媒体标签.html
Zobrazit soubor 

@@ -0,0 +1,73 @@
 
+<!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>
 
+    <!-- 音频   视频    
+        audio   video
 
+        属性：
 
+            1.src 传入音频路径
 
+            2.controls 显示控制面板
 
+            3.loop 循环播放
 
+            4.dom.currentTime 获取当前播放的时间 (以秒计)
 
+            5.playbackRate	
+            设置或返回音频/视频播放的速度
 
+            注意：
 
+                1. 设置播放的速度,1--16最大16倍速;
 
+            6.dom.duration 总时长秒数
 
+            7.dom.ended	返回音频/视频的播放是否已结束(结束返回true 没结束返回false);
 
+            8.muted	设置或返回音频/视频是否静音
 
+            9.paused返回音频/视频是否暂停 暂停 true 播放 false
 
+            10.volume设置或返回音频/视频的音量 0~1
 
+
 
+        方法：
 
+            1.load()	重新加载音频/视频元素
 
+            2.play()	开始播放音频/视频
 
+            3.pause()	暂停当前播放的音频/视频
 
+        事件：
 
+        canplaythrough	音频/视频缓冲完成 当资源加载完毕 再触发这个事件          
+        timeupdate	(播放进度改变的时候触发);  正在播放的事件
 
+        ended	     当目前的播放列表已结束时 当播放结束的是
 
+    -->
 
+    <video src="../222.mp4" controls></video>
 
+    <audio src="../周杰伦-花海.mp3" controls="controls"></audio>
 
+    <button class="btn1">播放</button>
 
+    <button class="btn2">暂停</button>
 
+    <button class="btn3">重新加载</button>
 
+    <script>
 
+        var audio1 = document.querySelector("audio");
 
+        var btn1 = document.querySelector(".btn1");
 
+        var btn2 = document.querySelector(".btn2");
 
+        var btn3 = document.querySelector(".btn3");
 
+        audio1.addEventListener("canplaythrough",function() {
 
+            console.log("加载完成");
 
+        })
 
+        audio1.addEventListener("timeupdate",function() {
 
+            console.log("播放");
 
+        })
 
+        audio1.addEventListener("ended",function() {
 
+            console.log("结束");
 
+        })
 
+        // console.log(audio1);
 
+        // setInterval(function(){
 
+            
+        // console.log(audio1.paused)
 
+        //     // console.log(audio1.ended)
 
+        // },1000)
 
+        // audio1.playbackRate =2;
 
+        // audio1.volume = 0.8;
 
+        btn1.onclick = function() {
 
+            audio1.play();
 
+        }
 
+        btn2.onclick = function() {
 
+            audio1.pause();
 
+        }
 
+        btn3.onclick = function() {
 
+            audio1.load();
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 24 - 0
day19/html/5.属性.html
Zobrazit soubor 

@@ -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>
 
+</head>
 
+<body>
 
+    <ul>
 
+        <li class="lis">333</li>
 
+        <li class="lis">333</li>
 
+        <li class="lis">333</li>
 
+    </ul>
 
+    <script>
 
+        // 通过css选择器获取所有标签
 
+        var lis =document.querySelectorAll("li");
 
+        console.log(lis)
 
+        // 通过css选择器获取标签
 
+        var ul =document.querySelector("ul");
 
+        console.log(ul)
 
+
 
+    </script>
 
+</body>
 
+</html>

binární
day19/周杰伦-花海.mp3
Zobrazit soubor