Web前端动态交互

送江入海

于 2024-06-11 09:14:41 发布

阅读量818

点赞数 22

分类专栏： Web前端文章标签：前端

本文链接：https://blog.csdn.net/m0_74427084/article/details/139586794

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 创建typer.html，使用window对象间隔调用函数实现如图1所示的文字打印效果，主要要求：

浏览器打开页面后，一个字一个字地动态输出文本“西华大学计算机与软件工程学院坚持全面育人的原则，以培养具有良好文化素养、扎实专业基础和具有实践能力的复合型应用人才为目标，重视学生实践和创新能力的培养。”；
设计如图1所示边框圆角、文本阴影和文本溢出效果。

友情提示：先在HTML上设置一个接收文本的块级元素，JS中使用一个变量保存文本字符串，使用定时器每次读取字符串中的一个字符，追加到HTML元素的文本内容末尾直至读取结束。

图1 动态输出文本

图2 文本溢出效果

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 注册界面展示

图4 确认消息对话框显示

图5 校验结果展示

3. 建立两个页面之间的数据传输，实现如下功能：

(1) 当register.html页面的检验通过时，页面跳转到typer.html，并将姓名和工号显示在动态输出文本下方，如图6所示。

图6 页面跳转及数据传输

提示：通过localStorage传递数据。在第2题检测完输入并合理后，通过location.href定位数据传输页面并使用window.localStorage.setItem存储数据。在跳转后的页面通过getItem获取数据并显示。

注意：要访问一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。也可以试着使用其它数据传输方法。

实验解答：

第一题

<!DOCTYPE html>

<html>

<head>

<style>

#text-container {

margin:auto;

border: 1px dashed #ccc;

color:#03F;

font-family: SimHei;

text-shadow: -2px -2px 3px #000000;

border-radius: 15px;

padding: 10px;

box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);

width: 900px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

font-family: Arial, sans-serif;

font-size: 26px;

}

</style>

</head>

<body onload="displayData()">

<div id="text-container"></div>

</body>

<script>

var textElement = document.getElementById('text-container');

var text = "西华大学计算机与软件工程学院坚持全面育人的原则，以培养具有良好文化素养、扎实专业基础和具有实践能力的复合型应用人才为目标，重视学生实践和创新能力的培养。";

var index = 0;

function printText() {

if (index < text.length) {

textElement.innerText += text.charAt(index);

index++;

setTimeout(printText, 100);

document.writr

}

}

printText();

function displayData() {

}

</script>

</html>

第二题

@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.注册信息样式设计*/

       /*color: transparent;*/

       /*border: 1px solid red;*//*设置边框便于布局测试*/

       text-shadow: 0.1em 0.1em 0.2em rgba(255,0,0,0.5), 

                             -0.1em -0.1em 0.2em rgba(255,255,0,0.5);

}

#title:target{/*返回顶部时改变title字体颜色*/

       color:red;

}



.info-item{

       margin: 10px;

       padding: 3px;

       /*border: 1px solid green;*/

       border-radius: 10px/6px;

       background-color: rgba(204,204,204,0.4);

}

.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.带有背景图像的输入域样式设计*/

/*.info-item:nth-child(1) input{*/

input#user_name{

       background: url(../images/name.gif) no-repeat;

       background-color: white;/*设置背景图像后，默认的背景色将会是父元素的背景色（如果存在，否则背景色透明）*/

       padding-left: 20px;/*使得content输入区在背景图像右边*/

      

}

/*.info-item input[type="password"] {*/

input.user_pwd{

       background: url(../images/password.gif) no-repeat;

       background-color: white;

       padding-left: 20px;

}



/*3.设置被选中的单选按钮和复选框后的文字的颜色*/

input:checked+span,input:checked+label {/*设置被选中的单选按钮和复选框后的文字的颜色*/

       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变换*/

li:nth-child(odd):hover {

       transition: transform 1s ease-in-out;

       transform: scale(1.2) rotate(-15deg);

}

li:nth-child(even):hover {

       transition: transform 1s ease-in-out;

       transform: scale(1.2) skew(30deg);

}



.star{color:#F00;}

1. JS脚本文件（注意调整字体和格式）

function changeStatus(obj){

                     //方法一：通过节点关系

                     if(obj.value!=null&&obj.value.trim()!="")

                            obj.nextSibling.style.color="#333";

                     else

                            obj.nextSibling.style.color="#F00";

              }

              function validate(){

                     var allinfos = "";

                     var user_name=document.forms[0].user_name.value.trim();//

                     allinfos+="姓名："+user_name+"\n";

                     var user_id=document.forms[0].user_id.value.trim();//

                     allinfos+="学号："+user_id+"\n";

                     var user_sex = document.regForm.user_sex.value.trim();

                     allinfos+="性别："+user_sex+"\n";

                     var user_address = document.regForm.user_address;

                     allinfos+="住址："+user_address.options[user_address.selectedIndex].innerText+"\n";

                     var user_hobby = document.regForm.user_hobby;

                     allinfos+="爱好：";

                     for (var i = 0; i < user_hobby.length; i++) {

               if (user_hobby[i].checked) {

                            allinfos+=user_hobby[i].value+ "、";

                        }

                     }

                     allinfos = allinfos.substring(0,allinfos.length-1);

                     var resp = window.confirm(allinfos+"\n\n请核对以上信息是否正确？\n\n单击'确定'继续，否则取消");

                     if(resp==false) return;

                     var user_pwd1=document.forms[0].user_pwd1.value.trim();

                     var user_pwd2=document.forms[0].user_pwd2.value.trim();

                     var user_tel=document.forms[0].user_tel.value.trim();

                     var user_email=document.forms[0].user_email.value.trim();

                      document.forms[0].user_name.value = user_name;

                      if(user_name.length<=0)

                            alert("用户名不能为空！"); 

                      else if(user_pwd1.length<8)

                            alert("密码长度必须为8位！"); 

                      else if(user_pwd2=="")

                            alert("请输入确认密码！");

                      else if(user_pwd1!=user_pwd2)

                            alert("两次密码不一致！");

                      else  if(user_tel.length!=11)

                            alert("手机号必须为11位！");

                      else  if(isNaN(user_tel))

                            alert("手机号必须为数字！");

                      else if(user_email.indexOf("@")<1||user_email.indexOf("@")==user_email.length-1||user_email.indexOf("@")!=user_email.lastIndexOf("@"))

                        alert("邮件格式不正确！");

                      else 

                        document.forms[0].submit();

              }

function checkNum(num){//检测电话号码的每一位是否是数字字符，方法二

                     var isNum = true;

                     for(i=0;i<num.length;i++)

                     {

                            if(num.charAt(i)-'0' <0 && num.charAt(i)-'0' >9)

                            {

                                   isNum = flase;

                                   break;

                            }

                     }

                     return isNum;

              }// JavaScript Document

1. 3. 第三题

register.js增加部分:

function validate(){



     if (confirmation) {

        var isValid = validateForm();

        if (isValid) {

             alert('数据已提交！');

        }

   /*校验用户输入信息，合格则提交并跳转到typer.html*/  

    localStorage.setItem('userName', userName);

    localStorage.setItem('userId', userId);

    window.location.href = 'typer.html';

    return false;      

}

Typer.html：

<!DOCTYPE html>

<html>

<head>

<style>

#text-container {

margin:auto;

border: 1px dashed #ccc;

color:#03F;

font-family: SimHei;

text-shadow: -2px -2px 3px #000000;

border-radius: 15px;

padding: 10px;

box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);

width: 900px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

font-size: 26px;

}

#additional-text{

margin:auto;

font-family: Arial, sans-serif;

padding: 20px;

width: 900px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

font-size: 15px;

}

</style>

</head>

<body>

<div>

<div id="text-container"></div>

<div id="additional-text"></div>

</div>

</body>

<script>

var textElement = document.getElementById('text-container');

var additionalTextElement = document.getElementById('additional-text');

var text = "西华大学计算机与软件工程学院坚持全面育人的原则，以培养具有良好文化素养、扎实专业基础和具有实践能力的复合型应用人才为目标，重视学生实践和创新能力的培养。";

var index = 0;

function printText() {

if (index < text.length) {

textElement.innerText += text.charAt(index);

index++;

setTimeout(printText, 100);

document.writr

 }

}

printText();

function dataPrint() {

var userName = localStorage.getItem('userName');

var userId = localStorage.getItem('userId');

var output = document.getElementById('additional-text');

output.innerHTML = 'Hello！      '+'姓名：'+' '+  userName  + '  ，学号：' + userId;

}

dataPrint();

</script>

</html>

送江入海

关注

22
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Web前端动态交互

(1) 当register.html页面的检验通过时，页面跳转到typer.html，并将姓名和工号显示在动态输出文本下方，如图6所示。当用户单击“注册”按钮时，读取用户的姓名、学号、性别、住址和爱好信息，然后使用确认消息对话框显示这些信息，并提示用户是否继续提交，见图。对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。检验用户名不能为空，清除用户名两端多余空格，最后向服务器提交去掉空格后的用户名；如果继续，则对表单数据做如下检验、处理和提示，见图。题检测完输入并合理后，通过。
复制链接

扫一扫

专栏目录