1. 创建typer.html，使用window对象间隔调用函数实现如图1所示的文字打印效果，主要要求：
- 浏览器打开页面后，一个字一个字地动态输出文本“西华大学计算机与软件工程学院坚持全面育人的原则，以培养具有良好文化素养、扎实专业基础和具有实践能力的复合型应用人才为目标，重视学生实践和创新能力的培养。”；
- 设计如图1所示边框圆角、文本阴影和文本溢出效果。
友情提示：先在HTML上设置一个接收文本的块级元素，JS中使用一个变量保存文本字符串，使用定时器每次读取字符串中的一个字符，追加到HTML元素的文本内容末尾直至读取结束。
2. 为register.html编写外部CSS样式和JavaScript脚本文件：
补充register.css样式，实现如下功能：
- 设置“注册信息”红、绿二重文本阴影，使用rgba设置阴影具有一定透明度；
- 姓名和密码输入框中显示背景图像；
- 单选按钮和复选按钮被选中时，其后的辅助文本动态变化为红色字体；
- 鼠标经过底部导航链接时，奇数的导航元素缩放1.2旋转-15°，偶数的导航元素缩放1.2倾斜30°，呈现如图3所示2D变换。
补充register.js脚本，实现如下功能：
- 当用户填写非空白用户名、学号和密码后，将输入域后的星号变为灰色，如果用户清除输入域内容，则再将星号变为红色，见图3；
- 当用户单击“注册”按钮时，读取用户的姓名、学号、性别、住址和爱好信息，然后使用确认消息对话框显示这些信息，并提示用户是否继续提交，见图4；
如果继续，则对表单数据做如下检验、处理和提示，见图5：
- 检验用户名不能为空，清除用户名两端多余空格，最后向服务器提交去掉空格后的用户名；
- 密码必须为8位，且两次输入密码相同；
- 电话号码必须为11位数字；
- 邮件地址中必须包含且只包含一个“@”符号，并且“@”不能是地址第一和最后一个字符。
注意：不得修改register.html中元素的标签及其属性（例外：可以修改标签的事件属性来绑定事件处理函数）。
3. 建立两个页面之间的数据传输，实现如下功能：
(1) 当register.html页面的检验通过时，页面跳转到typer.html，并将姓名和工号显示在动态输出文本下方，如图6所示。
提示：通过localStorage传递数据。在第2题检测完输入并合理后，通过location.href定位数据传输页面并使用window.localStorage.setItem存储数据。在跳转后的页面通过getItem获取数据并显示。
注意：要访问一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。也可以试着使用其它数据传输方法。
attention：不要直接拿过去交了，蚌埠住了，老有兄弟这样干，不怕被查吗？（达咩达咩，修改修改，你们至少把第一个背景颜色去掉吧，我也交的是这个，懂得都懂哦，不然全部零分就g了！！！！！）
register.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新员工入职报到</title>
<link href="style/register.css" rel="stylesheet" type="text/css">
<script src="js/register.js"></script>
</head>
<body>
<div id="wrapper">
<h3 id="title" align="center">新 员 工 注 册 信 息</h3>
<hr noshade size="1" width="99%">
<form action="" name="regForm" id="regForm" autocomplete="on" method="get">
<div class="info-item"><span class="item-name" >姓 名：</span>
<input type="text" class="item-inp user_name" name="user_name" id="user_name" maxlength="10" autofocus required onChange="changeStatus(this)"/><span class="star"> *</span>
</div>
<div class="info-item"><span class="item-name">学 号：</span>
<input type="text" class="item-inp" name="user_id" id="index" required onChange="changeStatus(this)"/><span class="star"> *</span>
</div>
<div class="info-item"><span class="item-name">密 码：</span>
<input type="password" class="item-inp user_pwd" name="user_pwd1" placeholder="请输入8位密码" required onChange="changeStatus(this)"/><span class="star"> *</span>
</div>
<div class="info-item"><span class="item-name">确认密码：</span>
<input type="password" class="item-inp user_pwd" name="user_pwd2" placeholder="请输入相同的密码" required onChange="changeStatus(this)"/><span class="star"> *</span>
</div>
<div class="info-item"><span class="item-name">性 别：</span>
<div class="item-inp"><input type="radio" name="user_sex" value="男"/><label><span>男</span></label>
<input type="radio" id="user_sex" name="user_sex" value="女" /><label for="user_sex">女</label>
</div>
</div>
<div class="info-item"><span class="item-name">身 高：</span>
<input type="number" class="item-inp" name="user_height" min="150" max="190" value="175" step="5" /> CM
</div>
<div class="info-item"><span class="item-name">体 重：</span>
<input type="range" class="item-inp" name="user_weight" min="45" max="90" value="55" step="2" /> KG
</div>
<div class="info-item"><span class="item-name">电话号码：</span>
<input type="tel" class="item-inp" name="user_tel" pattern="\d{11}" placeholder="请输入11手机号码"/>
</div>
<div class="info-item"><span class="item-name">E-mail：</span>
<input type="email" class="item-inp" name="user_email"/>
</div>
<div class="info-item"><span class="item-name">家庭住址：</span>
<select class="item-inp" name="user_address" >
<option value="0" >北京</option>
<option value="1" >上海</option>
<option value="2" >广州</option>
<option value="3" >深圳</option>
<option value="4" selected>成都</option>
</select>
</div>
<div class="info-item"><span class="item-name">我的爱好：</span>
<input type="checkbox" name="user_habit" value="唱歌"/><span>唱歌</span>
<input type="checkbox" name="user_habit" value="篮球" checked><span>篮球</span>
<input type="checkbox" name="user_habit" value="旅游"><span>旅游</span>
<input type="checkbox" name="user_habit" value="电影"><span>电影</span>
</div>
<div class="info-item"><span class="item-name">个人评价：</span>
<textarea name="info" rows="5" cols="50">本人性格热情开朗,待人友好,为人诚实谦虚...</textarea>
</div>
<input type="hidden" name="user_secret" value="7"/>
<div class="info-item" style="text-align:center;">
<input type="button" class="item-bt" value="注册" onClick="validate()" style="margin-right:100px;"/> <input type="reset" class="item-bt" value="重置" />
</div>
<hr noshade size="1" width="99%">
<ul class="info-item">
<li class="Odd"><a href="tel:10086">电话</a></li>
<li class="even"><a href="sms:10086">短信</a></li>
<li class="Odd"><a href="mailto:10086@sina.com">E-mail</a></li>
<li class="even"><a href="#title">返回顶部</a></li>
</ul>
</form>
</div>
</body>
</html>
register.css
@charset "utf-8";
/* CSS Document */
*{
font-size:13px;
}
a {
text-decoration: none;
}
a:link {
color: blue;
}
a:visited {
color: gray;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
#wrapper {
width: 95%;
min-width: 400px;
max-width: 700px;
margin: 10px auto;
padding-top:5px;
border: 1px solid #ccc;
background-color: #eee;
letter-spacing: 0.2em;
}
#title {
text-align: center;
font-size: 1.5em;
font-weight: bolder;
margin: 10px;
/*1.注册信息样式设计*/
text-shadow: rgba(233, 9, 9, 0.3) -5px -5px ,rgb(48, 210, 48,0.6) 5px 5px ;
}
.info-item{
margin: 10px;
padding: 3px;
/*border: 1px solid green;*/
border-radius: 10px/6px;
}
.info-item:nth-of-type(2n){
background-color: rgba(204,179,71,0.2);
}
.info-item:nth-of-type(2n+1){
background-color: rgba(147,192,117,0.2);
}
.item-name {
width: 32%;
display: inline-block;
text-align: right;
vertical-align: middle;/*文本和输入域均设置垂直居中对齐*/
}
.item-inp{
width: 40%;
box-sizing:border-box;/*否则设置了背景图像的输入域因padding-left而变宽*/
display: inline-block;
vertical-align: middle;
margin-right:0.5em;
}
input,select{
border: 1px solid #ccc;/*统一边框，否则用户名和密码输入框会因为设置背景图像而出现黑色立体边框*/
outline: 1px solid #CCC; /*统一轮廓，消除chrome浏览器中输入域获得焦点时出现黑色立体边框*/
}
/*2.带有背景图像的输入域样式设计*/
input.user_name{
background: url(../images/name.gif) no-repeat;
background-color: rgb(33, 196, 90);
padding-left: 20px;
}
/*.info-item:nth-child(1) input{*/
/*.info-item input[type="password"] {*/
input.user_pwd{
background: url(../images/password.gif) no-repeat;
background-color: white;
padding-left: 20px;
}
/*3.设置被选中的单选按钮和复选框后的文字的颜色*/
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
color: red;
}
input[type=checkbox]:checked + span {
color: red;
}
textarea{
width:60%;
vertical-align:middle;
}
/*设置导航链接的样式*/
ul, li {
box-sizing: border-box;
border-radius: 10px/6px;
background-color: rgba(204,204,204,0.4);
}
ul {
list-style: none;
text-align:center;
}
li {
width: 22%;
display:inline-block;
}
/*4.设置导航链接2D变换*/
.info-item li.Odd:hover {
transform: scale(1.2) rotate(-15deg);
}
.info-item li.even:hover {
transform: scale(1.2) skew(30deg);
}
.star{color:#F00;}register.js
function changeStatus(obj){
//方法一：通过节点关系
var star = obj.nextElementSibling; // 获取星号元素
if (obj.value != '') {
star.style.color = 'gray'; // 输入域非空白，将星号变为灰色
} else {
star.style.color = 'red'; // 输入域为空白，将星号变为红色
}
}
function validate(){
// var allinfos = "";
/*获得用户填写信息，在确认消息对话框中进行显示，并询问用户是否继续提交*/
/*校验用户输入信息，合格则提交并跳转到typer.html*/
var userName = document.getElementById("user_name").value.trim();
if(userName.length == 0){
alert("name is null!");
}
var userId = document.getElementById("index").value.trim();
if(userId.length == 0){
alert("indexId is null!");
}
//性别
var selectedOption = document.querySelector('input[name="user_sex"]:checked').value;
var gender;
switch(selectedOption){
case "男":
gender = "男";
break;
case "女":
gender = "女";
break;
default:
gender = "未填写";
break;
}
var selectElement = document.getElementsByName('user_address')[0];
var selectedOption = selectElement.value;
var userAddress;
switch(selectedOption) {
case "0":
userAddress = "北京";
break;
case "1":
userAddress = "上海";
break;
case "2":
userAddress = "广州";
break;
case "3":
userAddress = "深圳";
break;
case "4":
userAddress = "成都";
break;
default:
userAddress = "未知地址";
break;
}
var checkboxElements = document.querySelectorAll('input[name="user_habit"]:checked');
var selectedValues = [];
for (var i = 0; i < checkboxElements.length; i++) {
selectedValues.push(checkboxElements[i].value);
}
//密码
// 生成一个8位纯数字的正则表达式
var pwd = document.getElementsByName('user_pwd1')[0].value;
if(pwd.length < 8){
alert("密码长度必须为8位!");
}
var confirm_password = document.getElementsByName("user_pwd2")[0].value;
if (pwd !== confirm_password) {
alert("两次输入的密码不一致");
} else {
alert("两次输入的密码一致");
}
//手机号
var tel = document.getElementsByName('user_tel')[0].value;
var pattern = /^\d{11}$/; // 11位数字
if (!pattern.test(tel)) {
alert("手机号码必须为11位数字");
}
//邮箱
var email = document.getElementsByName('user_email')[0].value;
var pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!pattern.test(email)) {
alert("邮箱格式不正确");
}
confirm("姓名：" + userName + "\n学号：" + userId+"\n性别："+gender
+"\n住址："+userAddress + "\n爱好：" + selectedValues
+"\n\n请核对以上信息是否正确"+"\n\n是否继续提交？");
// 假设姓名存储在变量name中，学号存储在变量studentId中
localStorage.setItem('userName', userName);
localStorage.setItem('userId', userId);
regForm.submit();
location.href = 'typer.html';
}// JavaScript Document
typer.html
<!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>
<style>
#text-container {
border: 2px solid #ccc;
border-radius: 10px;
padding: 10px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
/* overflow: visible; */
width:95%;
color: blue;
font-size: 35px;
text-shadow: -5px -8px gray;
text-shadow: 6px -8px rgb(238, 186, 186);
/* 第二个效果*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div id="text-container"></div>
</body>
<script>
var text = "西华大学计算机与软件工程学院坚持全面育人的原则，以培养具有良好文化素养、扎实专业基础和具有实践能力的复合型应用人才为目标，重视学生实践和创新能力的培养。";
var container = document.getElementById('text-container');
var index = 0;
function typeText() {
container.textContent += text[index];
index++;
if (index < text.length) {
setTimeout(typeText, 50);
}
}
typeText();
// 从localStorage中读取姓名和学号
var name = localStorage.getItem('userName');
var studentId = localStorage.getItem('userId');
// 输出hello + 姓名和学号
document.write('hello , ' + studentId + ' ' + name);
</script>
</html>更多的检查你们自己来看喽！！！
感谢爪子！关注爪子！点赞！收藏！
大学生不容易兄弟们，看看已经“汗流浃背”的牢底吧
803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
