2022/1/14 CSS复习，JS等等运用

2023-10-03 20:43:58

写在前头

在我决定走前端时，大概是21年暑假，那时参加了学校的ACM集训，在坚持了一个暑假期间，我也认识到自己不是“小镇做题家” 。当然也没那做题的脑子。之前都是一直偶尔兴趣来了学学前端。

大一折腾了很多其他的玩意(钱，嘻嘻嘻)，也赚到没几个硬币。现在大二开始好好准备春招。每天公众号打卡，没人看也无所谓。

春招倒计时

每日小结

有效学习时间

学习内容

今天复习了css部分视频知识，有用户界面处理，利用vertical-align实现图片文字垂直居中对齐，图片底侧空白缝隙解决方案，文本溢出，巧妙运用等等。JS有循环精灵图，显示隐藏文本，通过className更改元素样式，仿新浪注册页面。

目前水平

HTML,CSS：看了某马的html，css网课，全敲完了一遍。菜鸟教程也看了一遍。

JavaScript：还在上着某马的课

预计这周将会把过去的html，css捡回来。

粗糙笔记

代码粗糙笔记 – 知道自己每天学了啥就行，哈哈哈。
链接：https://gitmind.cn/app/doc/3655168824
密码：2498

// 循环精灵图
<script>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>

// 显示隐藏文本框内容
 <input type="text" value="手机">
    <script>
        var text = document.querySelector('input');
        text.onfocus = function() {
            if (this.value === '手机') {
                this.value = '';
            }
            this.style.color = '#333';
        }

        text.onblur = function() {
            if (this.value === '') {
                this.value = '手机';
            }
            this.style.color = '#333';
        }
    </script>

// 17-通过className更改元素样式
<body>
    <div class="first">文本</div>
    <script>
        var test = document.querySelector('div');
        test.onclick = function() {
            this.className = 'first change';
        }
    </script>
</body>

// 仿新浪注册页面
<script>
        // 首先判断的事件是表单失去焦点 onblur
        // 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
        // 因为里面变化样式较多，我们采取className修改样式
        // 1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2. 注册事件 失去焦点
        ipt.onblur = function() {
            // 根据表单里面值的长度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        }
    </script>

码农公寓