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

互联网 2022/1/14 23:05:28

写在前头 在我决定走前端时,大概是21年暑假,那时参加了学校的ACM集训,在坚持了一个暑假期间,我也认识到自己不是“小镇做题家” 。当然也没那做题的脑子。 之前都是一直偶尔兴趣来了学学前端。 大一折腾了很多其他的玩意(钱,嘻嘻嘻),也赚到没几个硬币。现在大二开始…

写在前头

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

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

春招倒计时

image.png

每日小结

有效学习时间

8h

学习内容

今天复习了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>

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[2022/1/14 CSS复习,JS等等运用]http://www.zyiz.net/tech/detail-285227.html

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程