一个简单的注册网站...真是花里胡哨的

最新推荐文章于 2023-12-08 16:52:14 发布

heiqisang

最新推荐文章于 2023-12-08 16:52:14 发布

阅读量424

点赞数 2

文章标签： html5 css javascript

本文链接：https://blog.csdn.net/heiqisang/article/details/114764257

版权

学校作业写的花里胡哨的，能来到这里的，一定是看了我的作业点了网址，或者是随缘来的吧。
其实做这个是顺便复习一下css的弹性框、animate属性、@keyframes，以及学习HTML5的新标签。

以下代码均使用IntelliJ IDEA完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个普通的注册页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            outline: none;
            font-family: "Agency FB", fantasy
        }
		/*mark部分需要用自己写css覆盖原有属性，因为太难看了...*/
        mark {
            color: whitesmoke !important;
            background-color: black !important
        }

        body, html {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%
        }

        html {
            display: flex;
            justify-content: center;
            background-color: black;
            color: whitesmoke;
            user-select: none;
        }
		/*取消列表样式*/
        ul, li, ol {
            list-style: none;!important;
        }
		/*阻止浏览器自动填充input框的时候改变其样式*/
        input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
            -webkit-text-fill-color: #ededed !important;
            -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
            background-color: transparent;
            background-image: none;
            transition: background-color 50000s ease-in-out 0s;
        }

        header {
            color: black;
            background-color: black;
            width: 100%;
            height: 20px;
        }

        main {
            display: flex;
            flex-direction: row;
            background-color: rgba(255, 255, 255, 0.1);
            width: 100%;
            flex-grow: 1;
        }

        main > nav {
            flex-grow: 1;
            animation: linear changeBackground 2s infinite alternate;
        }

        main > article {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 4;
        }

        @keyframes changeBackground {
            0% {
                background-color: rgba(255, 255, 255, 0.1)
            }
            100% {
                background-color: rgba(0, 0, 0, 1)
            }
        }

        @keyframes box_shadow_change {
            0% {
                box-shadow: 0 0 1px whitesmoke
            }
            50% {
                box-shadow: 0 0 15px whitesmoke
            }
            100% {
                box-shadow: 0 0 30px whitesmoke
            }
        }

        #register_frame {
            display: flex;
            padding: 10px;
            background-color: black;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            border-radius: 10px;
            border: whitesmoke 4px solid;
            animation: linear box_shadow_change infinite alternate 2s;
        }

        #register_form {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        #register_form > span {
            font-family: 幼圆;
            font-weight: bolder;
            display: flex;
            justify-content: center;
            margin-bottom: 5px;
        }

        #register_form > span > input {
            color: whitesmoke;
            border: whitesmoke solid 2px;
            border-radius: 4px;
            background-color: black;
            font-size: 20px;
            padding-left: 10px;
            padding-right: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        #register_frame #title {
            font-size: 40px;
        }

        main > aside {
            animation: linear changeBackground 2s infinite alternate;
            flex-grow: 1;
        }

        footer {
            display: flex;
            width: 100%;
            height: 20px;
            background-color: black;
        }

        #schoolName {
            flex-grow: 6
        }

        #progress {
            flex-grow: 1;
            text-align: right;
            padding-right: 10px
        }
    </style>
</head>
<body>
<header>
    <div>
        <mark id="simple_site_name">一个简单的注册网站</mark>
    </div>
</header>
<main>
    <nav></nav>
    <article>
        <div id="register_frame">
            <details>
                <summary id="title">Register Please</summary>
                <span>
                    <form id="register_form" action="javascript:void(0)">
                        <span>用户名</span><span><input type="text" required placeholder="ニックネーム"></span>
                        <span>密码</span><span><input type="password" required placeholder="パスワード"></span>
                        <span>性别</span><span>男<input type="radio" value="男" name="sex" required>&nbsp;女<input
                            type="radio" value="女" name="sex" required></span>
                        <span>邮箱</span><span><input type="email" required placeholder="メール"></span>
                        <span><input type="reset" value="リセット"><input type="submit" value="登録する"></span>
                    </form>
                </span>
            </details>
        </div>
    </article>
    <aside></aside>
</main>
<footer>
    <div id="schoolName">
        <mark>heiqisang 所有信息填写完登录有惊喜</mark>
    </div>
    <div id="progress">
        <mark id="progress_mark">0%</mark>
        <meter id="meter" min="0" max="100" low="30" high="85" optimum="90" value="0"></meter>
        </meter></div>
</footer>
<script>
    window.onload = function () {
        let meter = document.getElementById("meter");
        let progress_mark = document.getElementById("progress_mark");
        let register_form = document.getElementById("register_form");
        let simple_site_name = document.getElementById("simple_site_name");
        let simple_site_name_value = ["一个简单的注册网站", "簡単な登録サイト", "a simple regist site", "www.heiqisang.jp"];
        let count = 0;
        // 网页左上角的变化
        setInterval(function () {
            count++;
            if (count >= simple_site_name_value.length) {
                count = 0;
            }
            let innerText_simple = simple_site_name_value[count];
            simple_site_name.innerText = innerText_simple;
        }, 2500);

        // 点击注册按钮之后的事件
        register_form.onsubmit = function () {
            if (meter.value == 0) {
                alert("登录成功，正在跳转到CSDN");
                let interval = setInterval(function () {
                    if (meter.value < 100) {
                        meter.value += 2;
                        progress_mark.innerHTML = meter.value + "%";
                    }
                    if (meter.value >= 100) {
                        location.href = "https://blog.csdn.net/heiqisang/article/details/114764257";
                        clearInterval(interval);
                    }
                }, 100);
            } else if (meter.value != 0) {
                return false;
            }
        }
    }
</script>
</body>
</html>

我知道这个代码一定还有更好的改进手法，比如css的写法可以在简洁点之类的，不过暂时先不改了。毕竟是一个作业，顺便用来记录我的学习过程！

heiqisang

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
一个简单的注册网站...真是花里胡哨的

一个简单的注册网站…真是花里胡哨的    学校作业写的花里胡哨的，能来到这里的，一定是看了我的作业点了网址，或者是随缘来的吧。    其实做这个是顺便复习一下css的弹性框、animate属性、@keyframes，以及学习HTML5的新标签。以下代码均使用IntelliJ IDEA完成<!DOCTYPE html><html lang="en"><head> &lt
复制链接

扫一扫