学习分享｜原生三件套的网页效果 | Grtsinry43的前端札记 | 大三技术成长实录 & 学习笔记

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

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

首先是因为之前那个副硬盘位的西数盘经常掉盘（损失惨重），问了一下居然是兼容性问题（？这个好久没遇到或者听说过了），赶在硬盘涨价的时机含泪购入三星硬盘，因为测试原因单硬盘使用了一段时间，被迫用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.动态排序表格

var onCheckOneListsClick =(e)=> {
        if (e.target.tagName !== 'INPUT') {
            return;
        }
        var checkNumber = 0;
        for (let i = 0; i < checkOneLists.length; i++) {
            checkOneLists[i].checked && checkNumber++;
        }
        checkAll.checked = checkNumber === checkOneLists.length;
    }

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

 var handleThsClickFn = function (th, index) {
        if (index === 0) return;
        th.addEventListener('click', function () {
            var arr = Array.prototype.slice.call(rows).sort(function (a, b) {
                if (index === 2 || index === 4){
                    return a.getElementsByTagName('td')[index].innerHTML.localeCompare(b.getElementsByTagName('td')[index].innerHTML,'zh');
                }
                return a.getElementsByTagName('td')[index].innerHTML - b.getElementsByTagName('td')[index].innerHTML;
            })
            for (let i = 0; i < arr.length; i++) {
                tbody.appendChild(arr[i]);
            }
        });
    }

4.三级联动效果

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

5.积分抽奖效果

更多是学习一种思路

var runGame = function () {
        var random = Math.floor(Math.random() * 6000 + 3000)
        timer = setInterval(function () {
            random -= 200
            if (random < 200) {
                clearInterval(timer)
                timer = null
                openDialog()
                return
            }
            currentIndex = ++index % prizeList.length
            prizeList.forEach(function (node) {
                node.classList.remove('active')
            })
            prizeList[currentIndex].classList.add('active')
        }, 50)
    }

6.轮播图

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

function next() {
    var newIndex = curIndex + 1;
    var onend;
    if (newIndex === doms.carouselList.children.length - 1) {
        onend = function () {
            console.log(1)
            doms.carouselList.style.marginLeft = '0px';
            curIndex = 0;
        }
    }
    moveTo(newIndex, onend);
}

function prev() {
    console.log(curIndex);
    var newIndex = curIndex - 1;
    if (newIndex < 0) {
        var maxIndex = doms.carouselList.children.length - 1;
        doms.carouselList.style.marginLeft = -maxIndex * containerWidth + 'px';
        newIndex = maxIndex - 1;
    }
    moveTo(newIndex);
}

7.图片瀑布流

这个比较好玩，看源码讲

8.五子棋游戏

这个比较好玩，看源码讲