HTML+CSS实训——Day08——把以前做的静态界面增加跳转

Sol-itude

已于 2023-06-01 17:11:09 修改

阅读量142

点赞数 1

分类专栏：前端实训课文章标签： css html javascript

于 2023-06-01 15:29:59 首次发布

本文链接：https://blog.csdn.net/qq_42887663/article/details/130982323

版权

前端实训课专栏收录该内容

15 篇文章 0 订阅

订阅专栏

仓库链接:https://github.com/MengFanjun020906/HTML_SX

前言

之前把发现页做的都能跳转了，那今天我们做tab-bar和登陆界面的一些javascript功能。

user.html

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

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="./css/user.css" />
    <title></title>
    <script>
        // 获取uid
        var uid = localStorage.getItem("uid");
        console.log(uid)
        // 登录条件判断 
        // null 在if判断中为false
        // !取反   !false = true
        if (!uid) {
            location.href = "./login.html";
        }
    </script>
</head>


    <div class="info">
        <img class="avatar" src="img/user/101.jpg" alt="">
        <span class="uname">猴子大王</span>
    </div>
    <div class="out">
        <button onclick="out()">退出登录</button>
    </div>
    <div class="tab-bar">
        <div class="item">
            <i class="fa fa-globe" onclick="goToFind()"></i>
            <span>发现</span>
        </div>
        <div class="item">
            <i class="fa fa-video-camera"></i>
            <span>视频</span>
        </div>
        <div class="item">
            <i class="fa fa-music"></i>
            <span>我的</span>
        </div>
        <div class="item">
            <i class="fa fa-users"></i>
            <span>云村</span>
        </div>
        <div class="item active">
            <i class="fa fa-user"></i>
            <span>账号</span>
        </div>
    </div>

    <script>
        var goToFind = function () {
            window.location.href = "find.html";
        }

        var out = function () {
            // 清除uid
            localStorage.removeItem("uid");
            location.href = "./login.html";
        }
    </script>
    </body>

</html>

user.css

.info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
  }
  
  .info .avatar {
    width: 160px;
    height: 160px;
    border-radius: 80px;
  }
  
  .info .uname {
    font-size: 18px;
    margin-top: 20px;
  }
  
  .tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    height: 80px;
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-evenly;
}

.tab-bar>.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tab-bar>.item>i {
    font-size: 30px;
}

.tab-bar>.item>span {
    margin-top: 6px;
    font-size: 14px;
}

.tab-bar>.active {
    color: red;
}
.out{
    margin-top: 20px;
    text-align: center;
}

find.html

我们在这里只需要修改tab-bar的一些，给他增加一个onclick的功能

            <div class="item active">
                <i class="fa fa-globe"></i>
                <span>发现</span>
            </div>
            <div class="item">
                <i class="fa fa-video-camera"></i>
                <span>视频</span>
            </div>
            <div class="item">
                <i class="fa fa-music"></i>
                <span>我的</span>
            </div>
            <div class="item">
                <i class="fa fa-users"></i>
                <span>云村</span>
            </div>
            <div class="item">
                <i class="fa fa-user" onclick="goToUser()"></i>
                <span>账号</span>
            </div>

login.html

增加了密码的功能，密码不正确是不能登录的

        var users = [{
                "uid": 1,
                "phone": "123",
                "upwd": "123",
                "avatar": "img/user/101.jpg"
            },
            {
                "uid": 2,
                "phone": "13501234568",
                "upwd": "123456",
                "avatar": "img/user/102.jpg"
            },
            {
                "uid": 3,
                "phone": "13501234569",
                "upwd": "123456",
                "avatar": "img/user/103.jpg"
            },
            {
                "uid": 4,
                "phone": "13501234560",
                "upwd": "123456",
                "avatar": "img/user/104.jpg"
            }
        ]
        var login = function () {
            var uname = document.querySelector("#uname");
            var upwd = document.querySelector("#upwd");
            console.log(uname.value, upwd.value)
            var user = users.find(function (item) {
                return item.phone == uname.value && item.upwd == upwd.value;
            })
            console.log(user)
            // undefined 在if判断之中会自动转为false
            if (user) {
                location.href = "user.html"
                // 保存登录信息
                localStorage.setItem('uid', user.uid)
            }
        }

        var goToFind = function () {
            window.location.href = "find.html";
        }