学校作业写的花里胡哨的,能来到这里的,一定是看了我的作业点了网址,或者是随缘来的吧。
其实做这个是顺便复习一下css的弹性框、animate属性、@keyframes,以及学习HTML5的新标签。
以下代码均使用IntelliJ IDEA完成
<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 Pleasesummary>
<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> 女<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的写法可以在简洁点之类的,不过暂时先不改了。毕竟是一个作业,顺便用来记录我的学习过程!