前端三件套基础实践_练手代码

最新推荐文章于 2024-07-25 09:24:40 发布

safjkbakskdj

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量465

点赞数 1

文章标签：前端 java 开发语言

本文链接：https://blog.csdn.net/safjkbakskdj/article/details/127285122

版权

那么如题所说，本片博客记录的就是我根据之前学习过的前端三件套的基础所写出的代码和一些实现的功能，由于是初学，好多内容还有待改进和优化，各位有建议欢迎指出。那废话不多说，直接上成果

成品图

代码实现

涉及的文件和代码大概就是如下所示

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="login.css">
    <title>login</title>
</head>

<body>
    <div class="top">
        <div class="boxt" id="t1">活动1</div>
        <div class="boxt" id="t2">活动2</div>
        <div class="boxt" id="t3">活动3</div>
        <div class="boxt" id="t4">活动4</div>
        <div class="boxt" id="t5">活动5</div>
    </div>
    <div class="main">
        <div class="title">
            <h1>login</h1>
        </div>
        <div class="log">
            <div class="box">
                <label for="tex">账号</label><br>
                <input type="text" class="text" id="tex" value="请输入您的账号和密码">
            </div>
            <div class="box">
                <label for="psd">密码</label><br>
                <input type="password" class="text" id="psd">
            </div>
        </div>
        <a href="#">忘记密码？</a>
        <div class="btnbox">
            <input type="butten" value="登录" id="log" class="btn">
            <input type="butten" value="注册" id="sign" class="btn">
        </div>
    </div>
   
</body>

<script>
    var tex = document.getElementById('tex');
    var psd = document.getElementById('psd');
    var sign = document.getElementById('sign');
    var log = document.getElementById('log');
    var flag_1 = 0;flag_2 = 0;
    
    tex.onfocus = function () {
        if(tex.value === '请输入您的账号和密码') {
            tex.value = '';
            tex.style.color = 'black';
        }
    }
    tex.onblur = function () {
        if(tex.value === ''){
            tex.value = '请输入您的账号和密码';
            tex.style.color = '#ccc';
        }
    }
    psd.onfocus = function() {
        this.style.color = 'black'
    }
    psd.onblur = function(){
        this.style.color = '#ccc'
    }
    sign.onclick = function () {
        window.location.href="sign/sign.html";
    }  
    log.onclick = function () {
        if (tex==''||psd==''){
            alert("您的账号或密码错误");
        }else{
            alert("您输入的账号或密码错误");
        }
    }
</script>
</html>

login.css

* {
    padding: 0;
    margin: 0;
}
body {
    background-image: url(images/yasuo.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50%,50%;
}

.top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: skyblue;
}

.boxt {
    float: left;
    width: 20%;
    height: 50px;
    color: gold;
    padding-top: 20px;
    font-size: larger;
    text-align: center;
    border-bottom: gold solid 1px;
    background-color: #333;
}

.boxt:hover {
    background-color: brown;
    color: white;
}

.main {
    width: 500px;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    margin: auto;
    margin-top: 100px;
    position: relative;
    border-radius: 20px 20px 20px 20px;
    
}
.title {
    text-align: center;
    margin-top: 50px;
    color: aqua;
}
.log {
    width: 300px;
    margin: auto;
    position: absolute;
    top: 25%;
    left: 50%;
    margin-left: -150px; 
}
label {
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    color: #ccc;
}
.text {
    width: 300px;
    height: 38px;
    font-size: larger;
    color: #ccc;
    border: none;
    border-radius:5px 5px 5px 5px;
    outline: none;
}
h2 {
    color: white;
}
.btnbox {
    position: absolute;
    bottom: 25px;
    left: 50%;
    margin-left: -81px;
    border-radius: 10px 10px 10px 10px;
}
.btn {
    position: relative;
    font-size:larger;
    width: 75px;
    text-align: center;
    outline: none;
}
.btn:hover {
    cursor: pointer;
}
a {
    position: absolute;
    bottom: 55px;
    left: 50%;
    margin-left: -40px;
    color: aquamarine;
    text-decoration: none;
}

那么以上两个是主登录界面的代码，就是有亚索背景那个。暂时的功能实现有：上方选项栏，鼠标悬停时会变色，并且在表单中每个输入栏输入时其中文字自动消失，如果无内容切失去聚焦时，文字自动补回。登录后的界面由于暂时不会使用接口，所以是登录不了的，无论输入什么都会提示错误。注册按钮按下后可以切换到注册界面，如成品图2，那么以上就是登录界面的内容。再来看下注册界面的代码和功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="sign.css">
    <title>sign</title>
</head>

<body>
    <div class="top">
        <div class="boxt" id="t1">活动1</div>
        <div class="boxt" id="t2">活动2</div>
        <div class="boxt" id="t3">活动3</div>
        <div class="boxt" id="t4">活动4</div>
        <div class="boxt" id="t5">活动5</div>
    </div>
    <div class="main">
        <div class="title">注册</div>
        <div class="textbox">
            <div class="text">
                <i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp昵称</i>
                <input type="text" class="tex" id="nickname" value="请输入您的昵称">
                <br>
                <i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp账号</i>
                <input type="text" class="tex" id='account' value="请输入账号">
                <br>
                <i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp密码</i>
                <input type="password" class="tex" id="psd">
                <br>
                <i>确认密码</i>
                <input type="password" class="tex" id="ack">
            </div>
        </div>
        <div class="btn">
            <input type="butten" id="sign" value="注册">
        </div>
    </div>
    <div class="adv" id="adv">
        <img src="images/wrong.png" alt="" id="del">
        <div class="content">传奇（是兄弟就来砍我）</div>
    </div>
    
</body>

<script>
    var nickname = document.getElementById('nickname');
    var account = document.getElementById('account');
    var psd = document.getElementById('psd');
    var ack = document.getElementById('ack');
    var del = document.getElementById('del');
    var adv = document.getElementById('adv')
    var sign = document.getElementById('sign');
    del.onclick = function () {
        adv.style.display = "none";
    }
    nickname.onfocus = function () {
        if(this.value === '请输入您的昵称') {
            this.value = '';
            this.style.color = 'black';
        }
    }
    nickname.onblur = function () {
        if(this.value === ''){
            this.value = '请输入您的昵称';
            this.style.color = '#ccc';
        }
    }

    account.onfocus = function () {
        if(this.value === '请输入账号') {
            this.value = '';
            this.style.color = 'black';
        }
    }
    nickname.onblur = function () {
        if(this.value==''){
            alert("昵称不能为空");
        }
    }
    account.onblur = function () {
        if(this.value==''){
            alert("账号不能为空");
        }
    }
    psd.onblur = function () {
        if(this.value==''){
            alert("密码不能为空");
        }
    }
    ack.onblur = function () {
        if(psd.value!=ack.value){
            alert("两次密码不一致，请重新输入")
        }
    }
    sign.onclick = function () {
        if(nickname.value==''||account.value ==''||psd.value==''||ack.value==''){
            alert("您输入的信息不完整，无法注册");
        }else{
            alert("注册成功，欢迎加入");
        }
    }
    
</script>
</html>

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: skyblue;
    background: fixed;
    background-repeat: no-repeat;
}
.top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: skyblue;
}

.boxt {
    float: left;
    width: 20%;
    height: 50px;
    color: gold;
    padding-top: 20px;
    font-size: larger;
    text-align: center;
    border-bottom: gold solid 1px;
    background-color: #333;
}
.main {
    position: relative;
    width: 500px;
    height: 400px;
    margin: auto;
    margin-top: 150px;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border-radius: 10px;
}
.title {
    margin-top: 15px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 33px;
    text-align: center;
}
.textbox {
    width: 300px;
    margin: auto;
    margin-top: 50px;
}
.boxt:hover {
    background-color: brown;
    color: white;
}

i {
    font-size: larger;
}
.tex {
    color: #ccc;
    width: 200px;
    outline: none;
    border-radius: 5px;
}
.adv {
    background-color: skyblue;
    width: 1519.2px;
    margin: auto;
    text-align: center;
    font-size: 55px;
    position: fixed;
    bottom: 0;
}
#del {
    float: left;
}
#sign {
    position: absolute;
    bottom: 50px;
    left: 50%;
    text-align: center;
    width: 75px;
    font-size: large;
    margin: auto;
    margin-left: -40px;
    border-radius: 5px;
    outline: none;
}
.nickname i {
    color: #ccc;
}

和注册界面相同的就不说了，登录界面必须每项都要输入，一旦表单失去聚焦时其中没有值，就会返回该值不能为空。相较于登录界面，注册界面加了一个广告，在下边那一条（不要注重内容，看形势就好），点击广告左上角的红x按钮可以关闭广告。两个密码必须完全相同才能完成注册，成功后会弹出提示注册成功。

那主要内容大概就这么多，嗯，没了。

ps：本来注册完成后是可以返回主界面的，但是有时候有bug，所以该功能移除了，需要返回只能在浏览器左上角点回到上一界面。后续会继续学习接口，到时候应该就能实现在注册界面注册完成后再返回到登录界面并且成功登录，到时候再更新，有问题欢迎评论区交流呀~