1. 創(chuàng)建typer.html，使用window對象間隔調(diào)用函數(shù)實現(xiàn)如圖1所示的文字打印效果，主要要求：
- 瀏覽器打開頁面后，一個字一個字地動態(tài)輸出文本“西華大學(xué)計算機與軟件工程學(xué)院堅持全面育人的原則，以培養(yǎng)具有良好文化素養(yǎng)、扎實專業(yè)基礎(chǔ)和具有實踐能力的復(fù)合型應(yīng)用人才為目標(biāo)，重視學(xué)生實踐和創(chuàng)新能力的培養(yǎng)。”；
- 設(shè)計如圖1所示邊框圓角、文本陰影和文本溢出效果。
友情提示：先在HTML上設(shè)置一個接收文本的塊級元素，JS中使用一個變量保存文本字符串，使用定時器每次讀取字符串中的一個字符，追加到HTML元素的文本內(nèi)容末尾直至讀取結(jié)束。
2. 為register.html編寫外部CSS樣式和JavaScript腳本文件：
補充register.css樣式，實現(xiàn)如下功能：
- 設(shè)置“注冊信息”紅、綠二重文本陰影，使用rgba設(shè)置陰影具有一定透明度；
- 姓名和密碼輸入框中顯示背景圖像；
- 單選按鈕和復(fù)選按鈕被選中時，其后的輔助文本動態(tài)變化為紅色字體；
- 鼠標(biāo)經(jīng)過底部導(dǎo)航鏈接時，奇數(shù)的導(dǎo)航元素縮放1.2旋轉(zhuǎn)-15°，偶數(shù)的導(dǎo)航元素縮放1.2傾斜30°，呈現(xiàn)如圖3所示2D變換。
補充register.js腳本，實現(xiàn)如下功能：
- 當(dāng)用戶填寫非空白用戶名、學(xué)號和密碼后，將輸入域后的星號變?yōu)榛疑?，如果用戶清除輸入域?nèi)容，則再將星號變?yōu)榧t色，見圖3；
- 當(dāng)用戶單擊“注冊”按鈕時，讀取用戶的姓名、學(xué)號、性別、住址和愛好信息，然后使用確認(rèn)消息對話框顯示這些信息，并提示用戶是否繼續(xù)提交，見圖4；
如果繼續(xù)，則對表單數(shù)據(jù)做如下檢驗、處理和提示，見圖5：
- 檢驗用戶名不能為空，清除用戶名兩端多余空格，最后向服務(wù)器提交去掉空格后的用戶名；
- 密碼必須為8位，且兩次輸入密碼相同；
- 電話號碼必須為11位數(shù)字；
- 郵件地址中必須包含且只包含一個“@”符號，并且“@”不能是地址第一和最后一個字符。
注意：不得修改register.html中元素的標(biāo)簽及其屬性（例外：可以修改標(biāo)簽的事件屬性來綁定事件處理函數(shù)）。
3. 建立兩個頁面之間的數(shù)據(jù)傳輸，實現(xiàn)如下功能：
(1) 當(dāng)register.html頁面的檢驗通過時，頁面跳轉(zhuǎn)到typer.html，并將姓名和工號顯示在動態(tài)輸出文本下方，如圖6所示。
提示：通過localStorage傳遞數(shù)據(jù)。在第2題檢測完輸入并合理后，通過location.href定位數(shù)據(jù)傳輸頁面并使用window.localStorage.setItem存儲數(shù)據(jù)。在跳轉(zhuǎn)后的頁面通過getItem獲取數(shù)據(jù)并顯示。
注意：要訪問一個localStorage對象，頁面必須來自同一個域名（子域名無效），使用同一種協(xié)議，在同一個端口上。也可以試著使用其它數(shù)據(jù)傳輸方法。
attention：不要直接拿過去交了，蚌埠住了，老有兄弟這樣干，不怕被查嗎？（達(dá)咩達(dá)咩，修改修改，你們至少把第一個背景顏色去掉吧，我也交的是這個，懂得都懂哦，不然全部零分就g了?。。。。。?/span>
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">學(xué) 號：</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">確認(rèn)密碼：</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.注冊信息樣式設(shè)計*/
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;/*文本和輸入域均設(shè)置垂直居中對齊*/
}
.item-inp{
width: 40%;
box-sizing:border-box;/*否則設(shè)置了背景圖像的輸入域因padding-left而變寬*/
display: inline-block;
vertical-align: middle;
margin-right:0.5em;
}
input,select{
border: 1px solid #ccc;/*統(tǒng)一邊框，否則用戶名和密碼輸入框會因為設(shè)置背景圖像而出現(xiàn)黑色立體邊框*/
outline: 1px solid #CCC; /*統(tǒng)一輪廓，消除chrome瀏覽器中輸入域獲得焦點時出現(xiàn)黑色立體邊框*/
}
/*2.帶有背景圖像的輸入域樣式設(shè)計*/
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.設(shè)置被選中的單選按鈕和復(fù)選框后的文字的顏色*/
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;
}
/*設(shè)置導(dǎo)航鏈接的樣式*/
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.設(shè)置導(dǎo)航鏈接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){
//方法一：通過節(jié)點關(guān)系
var star = obj.nextElementSibling; // 獲取星號元素
if (obj.value != '') {
star.style.color = 'gray'; // 輸入域非空白，將星號變?yōu)榛疑? } else {
star.style.color = 'red'; // 輸入域為空白，將星號變?yōu)榧t色
}
}
function validate(){
// var allinfos = "";
/*獲得用戶填寫信息，在確認(rèn)消息對話框中進(jìn)行顯示，并詢問用戶是否繼續(xù)提交*/
/*校驗用戶輸入信息，合格則提交并跳轉(zhuǎn)到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位純數(shù)字的正則表達(dá)式
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位數(shù)字
if (!pattern.test(tel)) {
alert("手機號碼必須為11位數(shù)字");
}
//郵箱
var email = document.getElementsByName('user_email')[0].value;
var pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!pattern.test(email)) {
alert("郵箱格式不正確");
}
confirm("姓名：" + userName + "\n學(xué)號：" + userId+"\n性別："+gender
+"\n住址："+userAddress + "\n愛好：" + selectedValues
+"\n\n請核對以上信息是否正確"+"\n\n是否繼續(xù)提交？");
// 假設(shè)姓名存儲在變量name中，學(xué)號存儲在變量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>西華大學(xué)計算機與軟件工程學(xué)院</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 = "西華大學(xué)計算機與軟件工程學(xué)院堅持全面育人的原則，以培養(yǎng)具有良好文化素養(yǎng)、扎實專業(yè)基礎(chǔ)和具有實踐能力的復(fù)合型應(yīng)用人才為目標(biāo)，重視學(xué)生實踐和創(chuàng)新能力的培養(yǎng)。";
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中讀取姓名和學(xué)號
var name = localStorage.getItem('userName');
var studentId = localStorage.getItem('userId');
// 輸出hello + 姓名和學(xué)號
document.write('hello , ' + studentId + ' ' + name);
</script>
</html>更多的檢查你們自己來看嘍！?。?/p>
感謝爪子！關(guān)注爪子！點贊！收藏！文章來源：http://www.zghlxwxcb.cn/news/detail-761922.html
大學(xué)生不容易兄弟們，看看已經(jīng)“汗流浹背”的牢底吧文章來源地址http://www.zghlxwxcb.cn/news/detail-761922.html
到了這里，關(guān)于Web前端動態(tài)交互（某校實驗作業(yè)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
