Web前端动态交互（某校实验作业）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Web前端动态交互（某校实验作业）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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" >姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</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">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</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">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</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">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</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">身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高：</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">体&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;重：</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>

更多的检查你们自己来看喽！！！

感谢爪子！关注爪子！点赞！收藏！

大学生不容易兄弟们，看看已经“汗流浃背”的牢底吧文章来源地址https://www.toymoban.com/news/detail-761922.html

到了这里，关于Web前端动态交互（某校实验作业）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！