0
0

Web前端动态交互（某校实验作业）

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

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

  3. 设计如图1所示边框圆角、文本阴影和文本溢出效果。

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

  1. 为register.html编写外部CSS样式和JavaScript脚本文件：

补充register.css样式，实现如下功能：

  1. 设置“注册信息”红、绿二重文本阴影，使用rgba设置阴影具有一定透明度；
  2. 姓名和密码输入框中显示背景图像；
  3. 单选按钮和复选按钮被选中时，其后的辅助文本动态变化为红色字体；
  4. 鼠标经过底部导航链接时，奇数的导航元素缩放1.2旋转-15°，偶数的导航元素缩放1.2倾斜30°，呈现如图3所示2D变换。

补充register.js脚本，实现如下功能：

  1. 当用户填写非空白用户名、学号和密码后，将输入域后的星号变为灰色，如果用户清除输入域内容，则再将星号变为红色，见图3；
  2. 当用户单击“注册”按钮时，读取用户的姓名、学号、性别、住址和爱好信息，然后使用确认消息对话框显示这些信息，并提示用户是否继续提交，见图4；

如果继续，则对表单数据做如下检验、处理和提示，见图5：

  1. 检验用户名不能为空，清除用户名两端多余空格，最后向服务器提交去掉空格后的用户名；
  2. 密码必须为8位，且两次输入密码相同；
  3. 电话号码必须为11位数字；
  4. 邮件地址中必须包含且只包含一个“@”符号，并且“@”不能是地址第一和最后一个字符。

注意：不得修改register****.****html中元素的标签及其属性（例外：可以修改标签的事件属性来绑定事件处理函数）。

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

(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:[email protected]">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://blog.csdn.net/weixin_74197037/article/details/134982189
版权归原作者 爱吃鸡爪zi 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Web前端动态交互（某校实验作业）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

机器人技术在安全领域的重要作用

安全学习记录——网络篇（一）

图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

单元测试数据库回滚问题

这才是单元测试，之前我们都错了

【C语言基础】：字符函数和字符串函数

ChatGPT-Next-Web SSRF漏洞+XSS漏洞复现(CVE-2023-49785)

文章导航