这是学习前端基础，用原生三件套尤其是js实现效果一些学习过程的记录，首先是静态的小米商城，之后实现了一些效果，比如表格、轮播图、瀑布流等，都是为了提升自己原生js的dom操作能力

<!--more-->

话题开始之前是一些没有用的内容：

首先是因为之前那个副硬盘位的西数盘经常掉盘（损失惨重），问了一下居然是兼容性问题（？这个好久没遇到或者听说过了），赶在硬盘涨价的时机含泪购入三星硬盘，因为测试原因单硬盘使用了一段时间，被迫用Windows一段时间还是感觉挺好用的嘛（docker/nginx/mysql等除外，用了wsl2），再加上我搞了个二手4k屏，N卡+Linux开源驱动太卡，闭源驱动没法雷电口输出，裂开，所以至今只能被迫Windows，后面给大家分享一点好用的工具。

更新：win太难用了，又回去了（）

然后还有从假期开始之前我就开始搞算法，所以假期很多时间也用来学和写算法题了，留给我写JS的时间并不多，不过还好我写算法用的Java（能和JS有几分相像？），总体也学到挺多。

至于我为什么要学前端三件套呢，这个是因为我现在没有全栈开发能力，Java的swing写点什么简直是天方夜谭，极其痛苦，所以这个假期还有这学期大部分时间我都会用来学习前端开发，当然是广义上的前端，先从网页开始，也接触并且计划了以后学习Qt，electron，Android（Jetpack Compose），Flutter

一、从基础开始

首先当然是从样式入手，这方面我能拿得出手的也就是描摹了一个小米商城主页，纯静态界面，然后这里面主要就是为了回顾马上就要忘记的语法，然后还有养成开发的习惯：比如以组件为单位进行开发，css分文件，规定统一的样式方便应用，几种选择器的使用，复合组件的写法，利用伪元素来实现分隔符等等

大概就是一个这样的效果（还有实际的网页文件演示）

二、照葫芦画瓢

首先因为我学习能力有限，进度比较缓慢，还没有学习到框架，之前只是用过接触过但没有系统学习，所以这里的内容都是用原生JS实现的，更多想要去熟悉这门语言，我觉得可能这样对于以后学习框架能更容易一些

1.文字滚动效果

这里是学习到了，第一是为了防止代码污染而使用了立即执行函数，第二是用js实现动画本质上就是连续缓慢变化的画面

2.展开菜单效果

这里主要还是动画的实现

3.动态排序表格

JS
1var onCheckOneListsClick =(e)=> {
2        if (e.target.tagName !== 'INPUT') {
3            return;
4        }
5        var checkNumber = 0;
6        for (let i = 0; i < checkOneLists.length; i++) {
7            checkOneLists[i].checked && checkNumber++;
8        }
9        checkAll.checked = checkNumber === checkOneLists.length;
10    }

这个是添加事件，指定触发对象，还有一个字符的比较

JS
1 var handleThsClickFn = function (th, index) {
2        if (index === 0) return;
3        th.addEventListener('click', function () {
4            var arr = Array.prototype.slice.call(rows).sort(function (a, b) {
5                if (index === 2 || index === 4){
6                    return a.getElementsByTagName('td')[index].innerHTML.localeCompare(b.getElementsByTagName('td')[index].innerHTML,'zh');
7                }
8                return a.getElementsByTagName('td')[index].innerHTML - b.getElementsByTagName('td')[index].innerHTML;
9            })
10            for (let i = 0; i < arr.length; i++) {
11                tbody.appendChild(arr[i]);
12            }
13        });
14    }

4.三级联动效果

这个就是常规js动态生成元素

5.积分抽奖效果

更多是学习一种思路

JS
1var runGame = function () {
2        var random = Math.floor(Math.random() * 6000 + 3000)
3        timer = setInterval(function () {
4            random -= 200
5            if (random < 200) {
6                clearInterval(timer)
7                timer = null
8                openDialog()
9                return
10            }
11            currentIndex = ++index % prizeList.length
12            prizeList.forEach(function (node) {
13                node.classList.remove('active')
14            })
15            prizeList[currentIndex].classList.add('active')
16        }, 50)
17    }

6.轮播图

这个就是实现无缝轮播，关键就是几行代码

JS
1function next() {
2    var newIndex = curIndex + 1;
3    var onend;
4    if (newIndex === doms.carouselList.children.length - 1) {
5        onend = function () {
6            console.log(1)
7            doms.carouselList.style.marginLeft = '0px';
8            curIndex = 0;
9        }
10    }
11    moveTo(newIndex, onend);
12}
13
14function prev() {
15    console.log(curIndex);
16    var newIndex = curIndex - 1;
17    if (newIndex < 0) {
18        var maxIndex = doms.carouselList.children.length - 1;
19        doms.carouselList.style.marginLeft = -maxIndex * containerWidth + 'px';
20        newIndex = maxIndex - 1;
21    }
22    moveTo(newIndex);
23}

7.图片瀑布流

这个比较好玩，看源码讲

8.五子棋游戏

这个比较好玩，看源码讲