首页 > 其他分享> 文章详细

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

2022-01-14 23:01:37 阅读：158 来源： 互联网

标签：14 value JS className querySelector 2022 var message document

写在前头

在我决定走前端时，大概是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>

标签：14,value,JS,className,querySelector,2022,var,message,document
来源： https://blog.csdn.net/qq_50892584/article/details/122503909

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9