更新

11 - 自定义视频播放器/index.html

@@ -16,7 +16,7 @@
       <div class="progress">
         <div class="progress__filled"></div>
       </div>
-      <button class="player__button toggle" title="Toggle Play">►</button>
+      <button class="player__button toggle" title="toggle Play">►</button>
       <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
       <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
       <button data-skip="-10" class="player__button">« 10s</button>
@@ -27,4 +27,4 @@
   <script src="scripts.js"></script>
 </body>
 
-</html>
+</html>

11 - 自定义视频播放器/scripts.js

@@ -1,11 +1,12 @@
 // 获取所有的页面元素
-let video = document.querySelector('.viewer');
-let progress = document.querySelector('.progress');
-let toggle = document.querySelector('.toggle');
-let player__slider = document.querySelectorAll('.player__slider');
-let skip = document.querySelectorAll('[data-skip]');
-let filled = document.querySelector('.progress__filled');
-let progressBar = document.querySelector('.progress');
+const player = document.querySelector('.player');
+const video = player.querySelector('.viewer');
+const progress = player.querySelector('.progress');
+const progressBar = player.querySelector('.progress__filled');
+const toggle = player.querySelector('.toggle');
+const skipButtons = player.querySelectorAll('[data-skip]');
+const ranges = player.querySelectorAll('.player__slider');
+
 
 // 实现函数
 function videoplay(e){
@@ -32,37 +33,37 @@ function handleSkip(e){
     video.currentTime += skiptime;
 }
 
-function handlefilled(e){    
-    let pice = (e.offsetX / progressBar.offsetWidth) * video.duration;
-    // let pice = (e.offsetX / progressBar.clientWidth) * video.duration;
+function handleprogressBar(e){
+    let pice = (e.offsetX / progress.offsetWidth) * video.duration;
+    // let pice = (e.offsetX / progress.clientWidth) * video.duration;
     video.currentTime = pice;
 }
-function filledUpdate(){
+function progressBarUpdate(){
     let portion = parseFloat(video.currentTime / video.duration) * 100;
-    filled.style.flexBasis = `${portion}%`;
+    progressBar.style.flexBasis = `${portion}%`;
 }
 
 // 事件监听
 video.addEventListener('click',videoplay);
 // video.addEventListener('click',handleToggle);
 video.addEventListener('play',handleToggle);
 video.addEventListener('pause',handleToggle);
-video.addEventListener('timeupdate',filledUpdate);
+video.addEventListener('timeupdate',progressBarUpdate);
 
 
 toggle.addEventListener('click',videoplay);
 toggle.addEventListener('click',handleToggle);
 
 let mouseflag = false;
-player__slider.forEach(item => item.addEventListener('click',handlePlayerSlider));
-player__slider.forEach(item => item.addEventListener('mousedown',() => mouseflag = true));
-player__slider.forEach(item => item.addEventListener('mouseup',() => mouseflag = false));
-player__slider.forEach(item => item.addEventListener('mousemove',(e) => mouseflag && handlePlayerSlider(e)));
+ranges.forEach(item => item.addEventListener('click',handlePlayerSlider));
+ranges.forEach(item => item.addEventListener('mousedown',() => mouseflag = true));
+ranges.forEach(item => item.addEventListener('mouseup',() => mouseflag = false));
+ranges.forEach(item => item.addEventListener('mousemove',(e) => mouseflag && handlePlayerSlider(e)));
 
-skip.forEach(item => item.addEventListener('click',handleSkip));
+skipButtons.forEach(item => item.addEventListener('click',handleSkip));
 
-let filledflag = false;
-progressBar.addEventListener('click',handlefilled);
-progressBar.addEventListener('mousemove',(e) => filledflag && handlefilled(e));
-progressBar.addEventListener('mousedown',() => filledflag = true);
-progressBar.addEventListener('mouseup',() => filledflag = false);
+let progressBarflag = false;
+progress.addEventListener('click',handleprogressBar);
+progress.addEventListener('mousemove',(e) => progressBarflag && handleprogressBar(e));
+progress.addEventListener('mousedown',() => progressBarflag = true);
+progress.addEventListener('mouseup',() => progressBarflag = false);

12 - 键盘输入序列的验证指南/README.md

@@ -131,24 +131,8 @@ if (pressed.join('').includes(secretCode)) {
 
 [Github Source Code](https://github.com/liyuechun/JavaScript30-liyuechun)
 
->社群品牌：[从零到壹全栈部落](http://www.kongyixueyuan.com)
->
->定位：寻找共好，共同学习，持续输出全栈技术社群
->
->业界荣誉：IT界的逻辑思维
->
->文化：输出是最好的学习方式
->
->官方公众号：全栈部落
->
->社群发起人：[春哥(从零到壹创始人，交流微信：liyc1215)](http://weibo.com/mobiledevelopment)
->
->技术交流社区：[全栈部落BBS](http://bbs.kongyixueyuan.com)
->
->全栈部落完整系列教程：[全栈部落完整电子书学习笔记](http://fullstack.kongyixueyuan.com)
-
-|关注全栈部落官方公众号，每晚十点接收系列原创技术推送|
-|:---------:|
-|![](http://orhm8wuhd.bkt.clouddn.com/quanzhanbuluo.png)|
+|全栈部落|区块链部落|
+|:---------:|:------:|
+|![](http://orhm8wuhd.bkt.clouddn.com/quanzhanbuluo100.jpeg)|![](http://orhm8wuhd.bkt.clouddn.com/qukuailian100.jpg)|
 
 

12 - 键盘输入序列的验证指南/index-FINISHED.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Key Detection</title>
+  <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
+</head>
+
+<body>
+
+  <div style="font-size:20px;color:green">请输入:liyc</div>
+
+  <div style="font-size:40px;color:red" class="input_word_pre"></div>
+  <div style="font-size:40px;color:blue" class="input_word_af"></div>
+  <script>
+    const pressed = [];
+    const secretCode = 'liyc';
+    const input_word_pre = document.querySelector('.input_word_pre');
+    const input_word_af = document.querySelector('.input_word_af');
+
+    window.addEventListener('keyup', (e) => {
+      const regex = new RegExp('[A-z]', 'gi');
+      if (e.key.length === 1 && e.key.match(regex)) {
+        pressed.push(e.key);
+        input_word_pre.innerText = pressed.join('');
+        pressed.splice(0, pressed.length - secretCode.length);
+        input_word_af.innerText = pressed.join('');
+        if (pressed.join('').includes(secretCode)) {
+          console.log('DING DING!');
+          cornify_add();
+          // alert(secretCode);
+        }
+      }
+    });
+  </script>
+</body>
+
+</html>

12 - 键盘输入序列的验证指南/index-START.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Key Detection</title>
+  <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
+</head>
+
+<body>
+  <script>
+  </script>
+</body>
+
+</html>

13 - 图片随屏幕滚动而滑入滑出的效果/index.html

@@ -29,7 +29,7 @@ <h1>Slide in on Scroll</h1>
       libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas
       laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
 
-    <!-- <img src="http://unsplash.it/400/400" class="align-left slide-in"> -->
+    <img src="http://unsplash.it/400/400" class="align-left slide-in">
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur
       est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni
@@ -65,15 +65,16 @@ <h1>Slide in on Scroll</h1>
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero
       placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero
-      perferendis, deserunt et incidunt eveniet <img src="http://unsplash.it/200/200" class="align-right slide-in"> temporibus
-      doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt
+      perferendis, deserunt et incidunt eveniet  temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt
       laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos
       distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus
       atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus
       aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam
       est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui
       rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis</p>
 
+      <!-- <img src="http://unsplash.it/200/200" class="align-right slide-in"> -->
+
 
     <p>laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit
       ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic
@@ -136,7 +137,7 @@ <h1>Slide in on Scroll</h1>
   </div>
 
   <script>
-    
+
     const sliderImages = document.querySelectorAll('.slide-in');
 
     function checkSlide(e) {
@@ -216,28 +217,28 @@ <h1>Slide in on Scroll</h1>
 
     .align-right {
       float: right;
-      margin-left: 20px; 
+      margin-left: 20px;
     }
 
     .slide-in {
-       /* opacity: 0;  */
-       transition: all .5s; 
+       /*opacity: 0;*/
+       transition: all .5s;
     }
 
     .align-left.slide-in {
-        transform: translateX(-30%) scale(0.95);  
+        transform: translateX(-30%) scale(0.95);
     }
 
     .align-right.slide-in {
-        transform: translateX(30%) scale(0.95);  
+        transform: translateX(30%) scale(0.95);
     }
 
     .slide-in.active {
-       /* opacity: 1;  */
-       transform: translateX(0%) scale(1); 
+       opacity: 1;
+       transform: translateX(0%) scale(1);
     }
   </style>
 
 </body>
 
-</html>
+</html>

15 - LocalStorage/README.md

@@ -6,7 +6,7 @@
 
 
 ## 效果图
-![](http://om1c35wrq.bkt.clouddn.com/day15-0.gif)
+![](http://om1c35wrq.bkt.clouddn.com/day15-0.gif)****
 
 
 第十五天主要是练习`LocalStorage`（本地存储）以及时间委托的使用，使用场景是一个简单的`todo list`的应用，实现基本的添加`item`，切换完成状态，将所有`todo`项存储在`localstorage`中，保证刷新浏览器后数据不丢失。