diff --git "a/05. \350\205\276\350\256\257\350\247\206\351\242\221\351\207\215\347\243\205\346\216\250\350\215\220\346\250\241\345\235\227/data.js" "b/05. \350\205\276\350\256\257\350\247\206\351\242\221\351\207\215\347\243\205\346\216\250\350\215\220\346\250\241\345\235\227/data.js"
index 474458d6fd6a2acbab9a8b1bb16778544431e481..9adfb63b76e598b5464e05b4afb3756f52e45c50 100755
--- "a/05. \350\205\276\350\256\257\350\247\206\351\242\221\351\207\215\347\243\205\346\216\250\350\215\220\346\250\241\345\235\227/data.js"
+++ "b/05. \350\205\276\350\256\257\350\247\206\351\242\221\351\207\215\347\243\205\346\216\250\350\215\220\346\250\241\345\235\227/data.js"
@@ -15,7 +15,7 @@ var data = [
title: "穿越火线",
desc: "鹿晗吴磊电竞逐梦",
img: "https://puui.qpic.cn/media_img/lena/PICjkg0v5_580_1680/0",
- bg: "rgb(0,0,0);"
+ bg: "rgb(0,0,0)"
},
{
title: "青春环游记",
diff --git "a/06. \345\233\276\347\211\207\346\224\276\345\244\247\351\225\234/index.js" "b/06. \345\233\276\347\211\207\346\224\276\345\244\247\351\225\234/index.js"
index 26f02e1f7c03357a30d8dcdd68f12545606a007d..76152913210ef10089f41856e3f5d263f5097e61 100644
--- "a/06. \345\233\276\347\211\207\346\224\276\345\244\247\351\225\234/index.js"
+++ "b/06. \345\233\276\347\211\207\346\224\276\345\244\247\351\225\234/index.js"
@@ -42,25 +42,25 @@ var mask = $('.mask');
// b. 绑定事件
// 两大类事件类型， 点击， 鼠标移入移出
// 1. 点击事件, 事件委托
-smallImg.onclick = function (e) {
- // 判断我点击的元素是li元素
- if (e.target.tagName == 'LI') {
- // 让所有li元素取消border
- var lis = $$('li');
- for (var i = 0; i < lis.length; i++) {
- lis[i].style.border = 'none';
- }
- // 让选中的li元素添加border
- e.target.style.border = '2px solid #000';
-
- // 点击缩略图后，原图和大图也需要跟着变换，
- // 点的是第几个元素, 获取元素索引
- // [1,2,3].indexOf(3) == 2
- var index = [].indexOf.call(lis, e.target);
- midImg.style.backgroundImage = 'url(./images/' + imgs.middle[index] + ')';
- largeImg.style.backgroundImage = 'url(./images/' + imgs.large[index] + ')';
- }
-}
+// smallImg.onclick = function (e) {
+// // 判断我点击的元素是li元素
+// if (e.target.tagName == 'LI') {
+// // 让所有li元素取消border
+// var lis = $$('li');
+// for (var i = 0; i < lis.length; i++) {
+// lis[i].style.border = 'none';
+// }
+// // 让选中的li元素添加border
+// e.target.style.border = '2px solid #000';
+
+// // 点击缩略图后，原图和大图也需要跟着变换，
+// // 点的是第几个元素, 获取元素索引
+// // [1,2,3].indexOf(3) == 2
+// var index = [].indexOf.call(lis, e.target);
+// midImg.style.backgroundImage = 'url(./images/' + imgs.middle[index] + ')';
+// largeImg.style.backgroundImage = 'url(./images/' + imgs.large[index] + ')';
+// }
+// }
// 2.移动，移出事件
// 1. 移动事件
@@ -120,6 +120,28 @@ function initPage() {
// 绑定事件
function bindEvent() {
+ // 1. 点击事件, 事件委托
+ smallImg.onclick = function (e) {
+ // 判断我点击的元素是li元素
+ if (e.target.tagName == 'LI') {
+ // 让所有li元素取消border
+ var lis = $$('li');
+ for (var i = 0; i < lis.length; i++) {
+ lis[i].style.border = 'none';
+ }
+ // 让选中的li元素添加border
+ e.target.style.border = '2px solid #000';
+
+ // 点击缩略图后，原图和大图也需要跟着变换，
+ // 点的是第几个元素, 获取元素索引
+ // [1,2,3].indexOf(3) == 2
+ var index = [].indexOf.call(lis, e.target);
+ midImg.style.backgroundImage = 'url(./images/' + imgs.middle[index] + ')';
+ largeImg.style.backgroundImage = 'url(./images/' + imgs.large[index] + ')';
+ }
+ }
+
+ // 1. 移动事件
midImg.onmousemove = function (e) {
// 让遮罩层和大图展示
mask.style.opacity = 1;
@@ -171,4 +193,4 @@ function main() {
bindEvent();
}
-main();
+main();
diff --git "a/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/images/bg.gif" "b/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/images/bg.gif"
deleted file mode 100755
index f9a235f05f79e1513d92b29e988d137feeb2fe82..0000000000000000000000000000000000000000
Binary files "a/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/images/bg.gif" and /dev/null differ
diff --git "a/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/index.html" "b/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/index.html"
index 684aaa7bc52101353e2821f7bd0f62a38dd57df9..dbecff6705b73072076db2bdb6a5fd392f280ff7 100755
--- "a/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/index.html"
+++ "b/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/index.html"
@@ -28,6 +28,12 @@
+ 
+ 
+ 
+ 
+ 
+ 
时
diff --git "a/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/js/index.js" "b/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/js/index.js"
index cb766d3ecd4e4cc15f29adba93d8d92caf8bebff..3949374728834f392d49135527039ec53f559b49 100755
--- "a/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/js/index.js"
+++ "b/08. JS\345\200\222\350\256\241\346\227\266\345\256\236\347\216\260\347\211\271\346\225\210/js/index.js"
@@ -1,26 +1,56 @@
-var changeTimeNumber = function (node, timer) {
- setInterval(function () {
- /* 获取第一个子节点，准备进行添加操作 */
- /* 规定执行动画时间, */
- /* 调整显示位置 */
- const firstChild = node.querySelector('li:first-child')
- node.style.transition = 'all .5s linear'
- node.style.marginTop = '-120px'
- /* 定义动画执行完成时间 */
- node.addEventListener('transitionend', function () {
- /* 改变动画的执行transition属性 为空 */
- node.style.transition = 'none'
- /* 定义marginTop值为0 */
- node.style.marginTop = '0px';
- /* 追加第一个元素准备进行第二次动画 */
- node.appendChild(firstChild)
- })
- }, timer)
+var container = document.querySelector('.container');
+var $ = (selector, parent = container) => parent.querySelector(selector);
+
+var changeTimeNumber = function (node, seconds, prevNodes) {
+ /* 定义动画执行完成时的处理逻辑 */
+ node.addEventListener('transitionend', function () {
+ /* 改变动画的执行 transition 属性为空 */
+ node.style.transition = 'none';
+ /* 定义 marginTop 值为 0 */
+ node.style.marginTop = 0;
+ /* 追加第一个元素准备进行第二次动画 */
+ var firstChild = $('li:first-of-type', node);
+ node.appendChild(firstChild)
+ });
+ /* 定义动画执行逻辑 */
+ var timer = setInterval(function () {
+ if(comeToZero(node)) {
+ if(allComeToZero(prevNodes)) {
+ // 如果当前时间位以及所有前置时间位全是0，则停止倒计时
+ clearInterval(timer);
+ console.warn('倒计时结束');
+ return;
+ }
+ }
+ countDown(node);
+ }, seconds * 1000);
+};
+
+function countDown(node) {
+ node.style.transition = 'all 0.5s linear';
+ node.style.marginTop = '-120px';
+}
+
+function comeToZero(node) {
+ var targetImg = $('li:first-of-type > img', node);
+ var imgSrc = targetImg.getAttribute('src');
+ return imgSrc.endsWith('0.png');
}
-changeTimeNumber(document.querySelector('.time-item:nth-of-type(8) ul'), 1000)
-changeTimeNumber(document.querySelector('.time-item:nth-of-type(7) ul'), 10000)
-changeTimeNumber(document.querySelector('.time-item:nth-of-type(5) ul'), 60000)
-changeTimeNumber(document.querySelector('.time-item:nth-of-type(4) ul'), 600000)
-changeTimeNumber(document.querySelector('.time-item:nth-of-type(2) ul'), 3600000)
-changeTimeNumber(document.querySelector('.time-item:nth-of-type(1) ul'), 10800000)
+function allComeToZero(doms) {
+ return doms.every(comeToZero);
+}
+
+var hourX = $('.time-item:nth-of-type(1) ul');
+var hourI = $('.time-item:nth-of-type(2) ul');
+var minuteX = $('.time-item:nth-of-type(4) ul');
+var minuteI = $('.time-item:nth-of-type(5) ul');
+var secondX = $('.time-item:nth-of-type(7) ul');
+var secondI = $('.time-item:nth-of-type(8) ul');
+
+changeTimeNumber(secondI, 1, [hourX, hourI, minuteX, minuteI, secondX]);
+changeTimeNumber(secondX, 10, [hourX, hourI, minuteX, minuteI]);
+changeTimeNumber(minuteI, 60, [hourX, hourI, minuteX]);
+changeTimeNumber(minuteX, 600, [hourX, hourI]);
+changeTimeNumber(hourI, 3600, [hourX]);
+changeTimeNumber(hourX, 86400, [hourX]);
\ No newline at end of file
diff --git "a/11. \345\210\206\351\241\265\346\217\222\344\273\266/\350\257\276\345\240\202\344\273\243\347\240\201/js/index.js" "b/11. \345\210\206\351\241\265\346\217\222\344\273\266/\350\257\276\345\240\202\344\273\243\347\240\201/js/index.js"
index b4cd2f21b4ac1423f0f13c04296d5c62d77c3fb0..882048d17f2cd7b4b8a82e70a38570f888d04cd7 100644
--- "a/11. \345\210\206\351\241\265\346\217\222\344\273\266/\350\257\276\345\240\202\344\273\243\347\240\201/js/index.js"
+++ "b/11. \345\210\206\351\241\265\346\217\222\344\273\266/\350\257\276\345\240\202\344\273\243\347\240\201/js/index.js"
@@ -58,13 +58,15 @@ function createPager(page, pageNumber, mostNumber, container) {
// （2）中间的数字
// 首先我们需要计算一头一尾
var min = Math.floor(page - mostNumber / 2);
+ var max = Math.floor(page + mostNumber / 2);
if (min < 1) {
min = 1;
- }
-
- var max = min + mostNumber - 1;
- if (max > pageNumber) {
+ max = mostNumber;
+ max = Math.min(max, pageNumber);
+ } else if(max > pageNumber){
max = pageNumber;
+ min = max - mostNumber + 1;
+ min = Math.max(1, min);
}
// 接下来我们就需要通过循环来生成分页项目
@@ -96,4 +98,4 @@ function createPager(page, pageNumber, mostNumber, container) {
// 以后将生成好的整个分页组件挂到容器上面即可
container.appendChild(divPager);
-}
+}
diff --git "a/12. \344\272\224\345\255\220\346\243\213\346\270\270\346\210\217/js/index.js" "b/12. \344\272\224\345\255\220\346\243\213\346\270\270\346\210\217/js/index.js"
index 6d30ad2c994577546e47f43c5c4f6c61abeee9b2..3df4fb0daaad64c9b9856005a97f8b8d72c539d1 100644
--- "a/12. \344\272\224\345\255\220\346\243\213\346\270\270\346\210\217/js/index.js"
+++ "b/12. \344\272\224\345\255\220\346\243\213\346\270\270\346\210\217/js/index.js"
@@ -54,6 +54,18 @@ function bindEvent(){
// 绘制棋子
chessMove(chessPoint);
+
+ // 平局判定
+ if(chessArr.length === 196) {
+ alert('平局！请重新开始。');
+ setTimeout(() => {
+ // 进行一些初始化操作
+ chessArr = []; // 重置棋子的数组
+ initChessboard(); // 重新绘制棋盘
+ isGameOver = false;
+ }, 0);
+ return;
+ }
}
} else {
@@ -230,4 +242,4 @@ function main(){
// 2. 绑定对应的事件
bindEvent();
}
-main();
+main();
diff --git "a/\347\273\217\345\205\270\346\241\210\344\276\213\347\233\256\345\275\225.md" "b/\347\273\217\345\205\270\346\241\210\344\276\213\347\233\256\345\275\225.md"
index 6615ac376e260fb2e01be73cabc7dabbd895b447..e920ed3dbe35f776c8d0f09f585eaa8cb42ba9d2 100644
--- "a/\347\273\217\345\205\270\346\241\210\344\276\213\347\233\256\345\275\225.md"
+++ "b/\347\273\217\345\205\270\346\241\210\344\276\213\347\233\256\345\275\225.md"
@@ -8,7 +8,7 @@
5. 腾讯视频重磅推荐模块 丁永志
-6. 级联下拉菜单 丁永志
+6. 图片放大镜 丁永志
7. 积分抽奖效果 韩刚
@@ -16,9 +16,9 @@
9. 轮播图 袁进
-10. 图片瀑布流 袁进
+10. 图片瀑布流 谢杰
-11. 分页插件 袁进
+11. 分页插件 谢杰
12. 五子棋游戏 谢杰