前端学习-第二阶段-day10

澜痕

于 2020-12-28 22:24:18 发布

阅读量90

点赞数

分类专栏：前端学习日记

本文链接：https://blog.csdn.net/qq_34723035/article/details/111876279

版权

前端学习日记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

今日练习

1.滚动监听

滑到相应区域时，改变右侧所对应的标签格式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        div {
            height: 1000px;
        }

        ul {
            position: fixed;
            right: 50px;
            top: 100px;
            border: 1px solid black;
            width: 100px;
            text-align: center;
        }

        ul li {
            height: 30px;
            border-bottom: 1px solid cadetblue;
        }

        ul li .active {
            color: red
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#div1" class="active">新闻一</a></li>
        <li><a href="#div2">新闻二</a></li>
        <li><a href="#div3">新闻三</a></li>
        <li><a href="#div4">新闻四</a></li>
    </ul>

    <div style="background: rosybrown" id="div1"></div>
    <div style="background: #99CCFF" id="div2"></div>
    <div style="background: #ffffcc" id="div3"></div>
    <div style="background: salmon" id="div4"></div>


</body>
<script>
    var oA = document.getElementsByTagName("a");
    var oDiv = document.getElementsByTagName("div");
    window.onscroll = function () {
        var hei = document.documentElement.scrollTop;
        for (var i = 0; i < oDiv.length; i++) {
            if (hei >= oDiv[i].offsetTop) {
                for (var k = 0; k < oDiv.length; k++) {
                    oA[k].className = '';
                }
                oA[i].className = 'active';
            }
        }
    }
</script>

</html>

2.邮箱注册

要求：6~18个字符，可使用字母、数字、下划线，需要以字母开头，才会提示可以注册

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            margin: 80px auto;
        }

        input {
            padding-left: 10px;
            width: 420px;
            height: 45px;
            font-size: 18px;
            outline: none;
            border: 1px solid #cccccc;
        }

        p {
            white-space: nowrap;
            font-size: 14px;
            color: #999;
        }

        .active {
            color: red;
        }

        .active1 {
            color: #3b78dd;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" name="" id="" placeholder="请输入邮箱">
        <p>6~18个字符，可使用字母、数字、下划线，需要以字母开头</p>
    </div>
    <script>
        var oIn = document.getElementsByTagName("input")[0];
        var oP = document.getElementsByTagName("p")[0];
        oIn.onfocus = function () {
            oIn.style.border = "1px solid #3b78dd"
        }
        oIn.focus();
        oIn.onblur = function () {
            oIn.style.border = "1px solid #cccccc"
        }
        oIn.onchange = change;

        function change() {
           
                var c = oIn.value;
                function isValid(c) {
                    return /^\w+$/.test(c);
                }
                var c = isValid(c);


                var a = oIn.value.charCodeAt(0);
                if (oIn.value.length < 6 || oIn.value.length > 18) {
                    oP.innerHTML = "长度应为6~18个字符";
                    oP.className = "active";
                } else if (a < 65 || a > 90 && a < 97 || a > 122) {
                    oP.innerHTML = "必须以字母开头";
                    oP.className = "active";
                } else if (c != true) {
                    oP.innerHTML = "必须以数字，字母，下划线_组成";
                    oP.className = "active";
                }
                else {
                    oP.innerHTML = "恭喜该邮箱可以注册";
                    oP.className = "active1";
                }
            

        }
    </script>
</body>

</html>

澜痕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习-第二阶段-day10

今日练习1.滚动监听滑到相应区域时，改变右侧所对应的标签格式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; list-
复制链接

扫一扫