JavaScript小案例——登入页面 2（简单改进版）

题目：

制作一个简单用户登入页面，使能够输入账号信息和登入等页面要求，并且通过js实现基本交互功能。(本例是对上一个发布的页面案例进行改进和完善，许多地方不再赘述）

案例分析：

见下面代码分析。

1.页面布局

<div class="back">
        <h2>欢迎登入</h2>
        <!-- 账号输入框 -->
        <div class="box">
            <label for="">
                <input type="text" name="账号" placeholder="用户名" id="user1">
            </label>

        </div>
        <!-- 密码输入框 -->
        <div class="box">
            <label for="">
                <img src="images/闭眼.png" alt="" id="eye">                 
            </label>
            <input type="password" name="" id="pwd" placeholder="密码">
        </div>
        <div class="but">登入，注册按钮
            <div class="button"><button type="submit" onclick="val()">登入</button></div>
            <div class="button"> <button type="submint">注册</button></div>
        </div>
        <!-- 记住密码，自动登入选项 -->
        <div>
            <label>
                <input type="checkbox" id="password"><span style="font-size: 12px;" >记住密码</span>
            </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label>
                <input type="checkbox"><span style="font-size: 12px;">自动登录</span>
        </div>
    </div>

2.css样式

 <style>
        * {
            margin: 0;
            padding: 0;
            /* background-image:url("/js/images/背景图.jpg") ; */
        }

        .back {
            /* 使登入框页面居中 */
            width: 500px;
            padding: 40px;
            position: