html+css+js实现一个简易备忘录

最新推荐文章于 2024-05-12 17:59:56 发布

白菜汤里的胡萝卜

最新推荐文章于 2024-05-12 17:59:56 发布

阅读量546

点赞数 11

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_43304758/article/details/135562764

版权

本文详细描述了一个包含HTML、CSS和JavaScript的网页项目，实现了用户登录、注册功能，展示了实时时间更新以及可添加和删除的备忘录列表，涉及表单验证和基本前端交互。

摘要由CSDN通过智能技术生成

网页设计与网站建设作业html+css+js

网页查看

在这里插入图片描述

实现要求

用户可以登录注册
点击注册后提示注册成功
用户名或密码错误提示错误
登录成功提示欢迎页面和自动跳转
跳转后显示当前时间，每秒刷新
备忘录可以添加删除且内容不能为空

代码

<!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">
    <title></title>
    <link href="./main.css" rel="stylesheet">
</head>

<body>
    <div class="wrap" id="wrap">
        <!-- 登录 -->
        <form class="login-form" id="login-form">
            <label>用户名:</label>
            <input type="text" class="login-username" id="login-username">
            <label>密码：</label>
            <input type="password" class="login-password" id="login-password">
            <button onclick="return login()">登录</button>
            <button onclick="return showRegister()">注册</button>
            <button onclick="reset()">重置</button>
        </form>
        <!-- 注册  -->
        <form class="register hide" action="" id="register">
            <h3>注册用户</h3>
            <label>用户名：</label>
            <input type="text" class="register-username" name="register-username" id="register-username">
            <label>密码：</label>
            <input type="password" class="register-password" name="'register-password" id="register-password">
            <button onclick="return register('msg')">注册</button>
            <p id="msg"></p>
        </form>
        <div class="container">
            <!-- 时间 -->
            <div id="showtime" style="width: 100%;text-align:center;"></div>
            <!-- 备忘录 -->
            <div class="memorandum hide" id="memorandum">
                <input type="text" id="title" placeholder="请输入标题">
                <textarea rows="5" id="content"></textarea>
                <div class="btns">
                    <button onclick="add()">确认</button>
                    <button onclick="resetCont()">重置</button>
                </div>

                <table border="1">
                    <tr>
                        <th>创建时间</th>
                        <th>标题</th>
                        <th>内容</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <td>2019-07-23 19:12:33</td>
                        <td>1</td>
                        <td>备忘录1</td>
                        <td>
                            <a href="javascript:(0);">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>2021-11-24 22:12:33</td>
                        <td>2</td>
                        <td>备忘录2</td>
                        <td>
                            <a href="javascript:(0);">删除</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <script>
        var reg_form = document.getElementById('register')
        var flag = false;
        var current = '';

        // 点击注册
        function showRegister() {
            if (flag) {
                flag = false;
                reg_form.className = 'hide register';
            } else {
                reg_form.className = 'register';
                flag = true
            }
            return false;
        }

        // 重置
        function reset() {
            document.getElementById("login-username").value = '';
            document.getElementById("login-password").value = '';
        }

        // 登录
        function login() {
            reg_form.className = 'hide register';
            /*创建表单对象*/
            var data = new Object;

            /*获取输入框数据*/
            data.login_username = document.getElementById("login-username").value;
            data.login_password = document.getElementById("login-password").value;
            if (localStorage.getItem('user')) {
                let username = JSON.parse(localStorage.getItem('user')).register_username;
                let password = JSON.parse(localStorage.getItem('user')).register_password;
                if (username !== data.login_username || password !== data.login_password) {
                    alert('用户名或密码错误！')
                    return false;
                }
            } else {
                alert('未注册')
                return false
            }

            var login_form = document.getElementById('login-form')
            login_form.className = 'hide'
            var showtime = document.getElementById('showtime')

            var second = 3;
            setInterval(function refer() {
                if (second === 0) {
                    getTime()
                    return false
                }
                showtime.innerHTML = `<h3>欢迎你，${data.login_username}</h3><br>
            <p>还剩${second}秒自动跳转</p>`
                second--;

            }, 1000); //启动1秒定时

            return false
        }

        // 注册
        function register(id) {
            /*创建表单对象*/
            var data = new Object;
            /*获取输入框数据*/
            data.register_username = document.getElementById("register-username").value;
            data.register_password = document.getElementById("register-password").value;

            /*判断账号*/
            if (data.register_username == '') {

                document.getElementById(id).innerHTML = "用户名不能为空";
                return false;
            }

            /*判断密码*/
            if (data.register_password == '') {
                document.getElementById(id).innerHTML = "密码不能为空";
                return false;
            }


            /*提交数据*/
            var str = JSON.stringify(data);
            // 本地浏览器缓存
            localStorage.setItem('user', str);
            alert("注册成功!");
            reg_form.className = 'hide register';

            return false;
        }

        // 获取当前时间
        function getTime() {
            var t = null;
            var h, m, s, y, mt, day;
            var showtime = document.getElementById('showtime')
            t = setTimeout(time(t), 1000); //開始运行

            // 显示备忘录模块
            var memorandum = document.getElementById('memorandum')
            memorandum.className = 'memorandum'
        }

        // 获取时间函数
        function time(t) {
            clearTimeout(t); //清除定时器
            dt = new Date();
            y = dt.getFullYear();
            mt = dt.getMonth() + 1;
            if (mt < 10) mt = '0' + mt
            day = dt.getDate();
            if (day < 10) day = '0' + day
            h = dt.getHours(); //获取时
            m = dt.getMinutes(); //获取分
            if (m < 10) m = '0' + m
            s = dt.getSeconds(); //获取秒
            if (s < 10) s = '0' + s
            showtime.innerHTML = `<h1>${h} : ${m} : ${s}</h1>`;
            current = `${y}-${mt}-${day} ${h}:${m}:${s}`
        }

        // 设置每列索引
        function setIndex() {
            var tr_dom = document.querySelectorAll('table tr')
            tr_dom.forEach((item, i) => {
                if (item.children[3].children[0]) {
                    item.children[3].children[0].onclick = function () {
                        // 删除备忘录
                        item.remove()
                    }
                }
            })
        }

        setIndex()

        // 添加备忘录
        function add() {
            var title = document.querySelector('#title').value
            var cont = document.querySelector('#content').value
            var t = document.querySelector("table tbody");
            var tr = document.createElement("tr");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            var td4 = document.createElement("td");

            if (title === '') {
                alert('标题不能为空')
                return false;
            } else if (cont === '') {
                alert('内容不能为空')
                return false;
            }

            td1.innerHTML = current;
            td2.innerHTML = title;
            td3.innerHTML = cont;
            td4.innerHTML = `<a href="javascript:(0);" >删除</a>`;
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            t.append(tr);
            setIndex()
        }

        // 重置备忘录
        function resetCont() {
            document.querySelector('#title').value = ''
            document.querySelector('#content').value = ''
        }
    </script>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}

button {
    cursor: pointer;
    padding: 5px;
}

input {
    height: 25px;
}

.show {
    display: block !important;
}

.hide {
    display: none !important;
}

#msg {
    height: 30px;
    color: red;
    width: 100%;
    text-align: center;
}

.register {
    width: 200px;
    margin: 200px auto;
    background-color: #8ebc8e;
    padding: 21px 124px;
}

.register h3 {
    margin-bottom: 30px;
    text-align: center;
}

.register label {
    width: 100%;
}

.register input {
    width: 100%;
    margin: 15px 0;
}

.register button {
    display: block;
    margin: 10px auto;
}

.container {
    height: 100vh;
    width: 100%;
}

.memorandum {
    text-align: center;
    width: 400px;
    margin: 50px auto;
    display: grid;
}

.memorandum #title {
    margin: 20px 0;
}

.memorandum #content {
    margin: 0 0 20px;
}

.memorandum .btns {
    margin-bottom: 20px;
}

.memorandum table td:nth-child(3) {
    max-width: 130px;
    height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}