Web前端研发实习--学习笔记（6）

最新推荐文章于 2023-07-27 14:05:10 发布
最新推荐文章于 2023-07-27 14:05:10 发布
阅读量152 收藏
点赞数
分类专栏： web研发笔记 文章标签： javascript html5 vue.js
本文链接：https://blog.csdn.net/qq_48026875/article/details/120811848
版权

目录

JavaScript实战三——员工注册页面

注册页面

信息页面

JavaScript实战三——员工注册页面

功能如下：

合理布局；

样式自行发挥，重置按钮重置输入框；

实现注册功能，页面通过正确方式提交至信息页；

信息页面包含一个表格；

信息页面能够读取注册页面提交的数据，正确回显数据。

注册页面

<!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>information</title>
    <style>
        *{
            margin: 0;
        }
        .mainbox{
            background-color:white;
            margin: 8px;
            border:solid 2px;
            min-height: 800px;
            text-align: center;
        }
        .list{
            margin:0px auto;
            height: 600px;
        }
        .header{
            background-color:orange;
            text-align:left;
            height: 20px;
            line-height: 20px;
            padding: 5px;
        }
        table{
            margin: 100px auto;
        }
        tr{
            height: 50px;
            padding: 5px;
        }
        .footer{
            height: 100px;
            margin:20px auto;
        }
        .btn{
            height: 60px;
            margin:20px auto;
        }
        .register{
            width :150px;
            background-color: orange;
        }
        .reset{
            width: 150px;
            background-color: orange;
        }
        input{
            padding-left: 4px;
        }
        .tleft{
            text-align: right;
            font-weight: bolder;
            font-size: 15px;
        }
        .tright{
            text-align: left;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var button1=document.getElementById("reset"); 
            var button2=document.getElementById("register")
            button1.onclick=function(){
                document.getElementById("text0").value="";
                document.getElementById("text1").value="";
                document.getElementById("text2").value="";
                document.getElementById("text3").value="";
                document.getElementById("text4").value="";
                document.getElementById("text5").value="";
                document.getElementById("text6").value="";
                document.getElementById("text7").value="";
            }
      
            register.onclick=function(){
            var uname = document.getElementById("text0");
            var upwd1 = document.getElementById("text1");
            var upwd2 = document.getElementById("text2");
            var uidnum = document.getElementById("text4");
            var utel = document.getElementById("text5");
            var check = document.getElementById("checking");
            if (uname.value == "") {
                alert("错误：用户名不能为空！");
                uname.focus();
                return false;
            }
            reg0 = /^[0-9a-zA-Z|_]{6,20}$/;
            if (!reg0.test(uname.value)) {
                alert("错误：用户名必须只包含字母、数字,下划线！且需要6-20位");
                uname.focus();
                return false;
            }

            if (upwd1.value == "" || upwd1.value != upwd2.value) {
                alert("错误：请检查并确认您输入的密码是否一致！");
                upwd1.focus();
                return false;
            }
            if (check.checked == false) {
                alert("错误：请检查并确认您是否勾选！");
                check.focus();
                return false;
            }
            else {
                window.sessionStorage.setItem("userName", uname.value);
                window.sessionStorage.setItem("uName", document.getElementById("text3").value);
                var obj=document.getElementsByName("gender");
                for(var i=0; i<obj.length; i ++){
                    if(obj[i].checked){
                        window.sessionStorage.setItem("UserSex", obj[i].value);
                    }
                }
                window.sessionStorage.setItem("iDnum", uidnum.value);
                window.sessionStorage.setItem("telNum", utel.value);
                window.sessionStorage.setItem("eMail", document.getElementById("text6").value);
                window.sessionStorage.setItem("creditNum", document.getElementById("text7").value);
                window.sessionStorage.setItem("openBank", document.getElementById("text8").value);
            }
 
        }
    }
    </script>
</head>
<body>
    <div class="mainbox">
        <div class="header">
            账户信息
        </div>
        <form method="get" action="./information.html" autocomplete="on" >       
        <div class="list">    
            <table>
                <tr>
                    <td class="tleft"><label>* 用户名:</label></td>
                    <td class="tright"><input type="text" placeholder="用户名2-4个，设置成功后不可修改" id="text0"><span id="unameSpan"></span></td>
                </tr>
                <tr>
                    <td class="tleft"><label>* 登录密码:</label></td>
                    <td class="tright"><input type="password" placeholder="6-20位字母，数字或字符" id="text1"></td>
                </tr>
                <tr>
                    <td class="tleft"><label>* 确认密码:</label></td>
                    <td class="tright"><input type="password" placeholder="再次输入您的登录密码" id="text2"></td>
                </tr>
                <tr>
                    <td class="tleft"><label>* 姓   名:</label></td>
                    <td class="tright"><input type="text" placeholder="请输入姓名" id="text3"></td>
                </tr>
                <tr>
                    <td class="tleft"><label>* 性   别:</label></td>
                    <td class="tright" style="text-align: left;">
                        <input type="radio" name="gender" value="男" checked="checked">男
                        <input type="radio" name="gender" value="女">女
                    </td>
                </tr>
                <tr>
                    <td class="tleft"><label>* 证件号码:</label></td>
                    <td class="tright"><input type="text" placeholder="请输入您的身份证件号" id="text4"></td>
                </tr>
                <tr>
                    <td class="tleft"><label>* 手机号码:</label></td>
                    <td class="tright"><input type="text" placeholder="请输入您的手机号码" id="text5"></td>
                </tr>
                <tr>
                    <td class="tleft"><label>邮   箱:</label></td>
                    <td class="tright"><input type="text" placeholder="请正确填写邮箱地址" id="text6"></td>
                </tr>
                <tr>
                    <td class="tleft"><label>* 银行卡号:</label></td>
                    <td class="tright"><input type="text" placeholder="请输入银行卡号" id="text7"></td>
                </tr>
                <tr>
                    <td class="tleft"><label>* 开户行:</label></td>
                    <td class="tright">
                        <input type="text" list="bank" placeholder="中国银行" id="text8">
                        <datalist class="bank" id="bank">
                            <option>中国银行</option>
                            <option>中国建设银行</option>
                            <option>中国交通银行</option>
                            <option>中国工商银行</option>
                        </datalist>
                    </td>
                </tr>
                <tr>
                    <td class="tleft"></td>
                    <td class="tright">
                        <input type="checkbox" name="clause" value="agree" class="clause" id="checking"> 我已阅读并同意服务条款
                    </td>
                </tr>
                <tr>
                    <td class="tleft"><input type="submit" class="register" id="register" value="注册" ></td>
                    <td class="tright"><input type="button" class="reset" id="reset" value="重置"></td>
                </tr>
            </table>
            </div>
        </form> 
    </div>
</body>
</html>

信息页面

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<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>information</title>
    <style>
        *{
            margin: 0px;
        }
        table tr td{
            border:solid 2px black;
        }
        table{
            margin: 100px auto;
            width: 1000px; 
            min-height: 25px; 
            line-height: 50px; 
            text-align: center; 
            border-color:#b6ff00; 
            border-collapse: collapse;
        }
        tr td{
            height: 50px;
            border-collapse: collapse;
        }
        .tleft{
            text-align: center;
            font-weight: bolder;
            font-size: 15px;
        }
        .tright{
            width: 400px;
            text-align: center;
        }
        .inner {
            text-align: center;
            height: 30px;
            width: 200px;
            margin: 10px;
        }
    </style>
    <script type="text/javascript">
        function show(){
            document.getElementById("user").innerHTML = window.sessionStorage.getItem("userName");
            document.getElementById("anam").innerHTML = window.sessionStorage.getItem("uName");
            document.getElementById("usex").innerHTML = window.sessionStorage.getItem("UserSex");
            document.getElementById("uidc").innerHTML = window.sessionStorage.getItem("iDnum");
            document.getElementById("utel").innerHTML = window.sessionStorage.getItem("telNum");
            document.getElementById("uema").innerHTML = window.sessionStorage.getItem("eMail");
            document.getElementById("ucar").innerHTML = window.sessionStorage.getItem("creditNum");
            document.getElementById("uban").innerHTML = window.sessionStorage.getItem("openBank");
        }
    </script>
</head>
<body onload="show()">
    <table id="table">
        <caption style="font-size: 15px;font-weight: bolder;">用户信息表</caption>
        <tr>
            <td class="tleft">用户名</td>
            <td class="tleft">姓名</td>
            <td class="tleft">性别</td>
            <td class="tleft">证件号码</td>
            <td class="tleft">手机号码</td>
            <td class="tleft">邮箱</td>
            <td class="tleft">银行卡号</td>
            <td class="tleft">开户行</td>
        </tr>
        <tr>
            <tr>
                <td class="tright"><div class="inner" id="user"></div></td>
                <td class="tright"><div class="inner" id="anam"></div></td>
                <td class="tright"><div class="inner" id="usex"></div></td>
                <td class="tright"><div class="inner" id="uidc"></div></td>
                <td class="tright"><div class="inner" id="utel"></div></td>
                <td class="tright"><div class="inner" id="uema"></div></td>
                <td class="tright"><div class="inner" id="ucar"></div></td>
                <td class="tright"><div class="inner" id="uban"></div></td>
            </tr>
        </tr>
    </table>
</body>
</html>

秃头的fan32021
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端研发实习--学习笔记（1）
qq_48026875的博客
10-07 993
一、HTML
Web前端研发实习--学习笔记（5）
qq_48026875的博客
10-17 118
JavaScript实战二——聊天页面 实现功能如下： 完成基本的页面布局； 点击发送实现聊天功能； 正确显示聊天功能； 能够区分A/B的聊天。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
Java Web实习笔记
xiaomuzi0802的专栏
08-15 998
第一天上班，老板给了我一本
Java Web 实习笔记（三）
MOGOT7的博客
06-14 766
Java web实习笔记目录导航 1. Java Web 实习笔记（一） 2.Java Web 实习笔记（二） 3.Java Web 实习笔记（三） 4.Java Web 实习笔记（四） 一、UserDao创建 package com.hmm.dao; import java.sql.Connection; import java.sql.ResultSet; import ja...
web前端笔记
07-28
web前端笔记是在培训机构培训过程中整理的一些笔记，仅供参考
配套学习资料：Java开发 - 尚硅谷JavaWeb学习笔记
最新发布
06-22
学习笔记请看我写的文章： Java开发 - 尚硅谷JavaWeb学习笔记 - Part1： ...Java开发 - 尚硅谷JavaWeb学习笔记 - Part2： ...Java开发 - 尚硅谷JavaWeb学习笔记 - Part6： Java开发 - 尚硅谷JavaWeb学习笔记 - Part7：
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-基于Web的云的学习笔记系统设计与实现-java代码
04-16
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-云的学习...
web实训课笔记
yuehailin的博客
01-15 400
1.标记           行  块 2.div----(h1 p) 3    3.1 标记        div   img h1-h6 p body        style    3.1.1 超链接：负责页面跳转的语句。类似目录    3.2 CSS      3.2.1 选择器            id选择器  #XXX{}            类选择器
web前端研发实习--学习笔记（3）
qq_48026875的博客
10-16 305
万字让你们接触Javascript，入门学习
web前端开发技术 笔记 1
qq_62198422的博客
09-11 721
web前端开发技术笔记
Web前端研发实习--学习笔记（4）
qq_48026875的博客
10-17 1037
目录 JavaScript实战一——贪吃蛇 页面布局HTML代码如下： 实现功能的JavaScript代码 JavaScript实战一——贪吃蛇 这个东西其实实际动起手来还是有些问题的，这个也算是真正意义上实现的可以跑的代码。就成就感来说还是有的，我记得最早玩贪吃蛇还是那会用长虹手机的时候，一个贪吃蛇在那里熬好久，现在都好多类型的游戏了，而贪吃蛇的实现让我在面试的时候可以完整的说出来自己对与JavaScript了解的程度。 我从C站上查阅了很多有关贪吃蛇实现的代码，大多是使用canvas画布
web前端研发实习--学习笔记（0）
qq_48026875的博客
10-06 241
目录 一、HTML5背景知识 1.0、JavaScript出场 1.1、浏览器战争 1.2、插件 1.3、语义HTML 1.4、发展态势 二、HTML5简介 2.0、HTML5 是最新的 HTML 标准。 2.1、HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。 2.2、HTML5 拥有新的语义、图形以及多媒体元素。 2.3、HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。 2.4、HTML5 是跨平台的，被设计为在不同类型的硬件（PC
web前端学习笔记-1（随笔）
w114406415的博客
02-04 749
随笔
Web前端学习重点笔记
m0_65484865的博客
05-03 377
项目1描述1描述2项目2域标题
前端基础学习笔记
sober30的博客
07-27 3266
css3有哪些新特性：圆角盒子阴影文本阴影不透明度 ：opacity 、rgba渐变背景 ：线性渐变、径向渐变背景属性：backgroud-size、background-clip（拓展）结构选择器：first-child()…伪元素新写法 :before ::before(css3) 为了和:hover之类的伪类选择器作区分弹性盒子：flex转换：2D转换、3D转换（拓展）过渡：一般搭配hover使用animation动画（拓展）媒体查询。
2021-08-10 WEB前端课堂笔记Day02
weixin_47509934的博客
08-10 147
1 CSS 最大贡献：使HTML从样式中解脱，专注于结构呈现，样式交给CSS实现 1.1 什么是 CSS CSS（Cascading style sheets）层叠样式表（级联样式表） 主要用于设置HTML页面的文本内容（字体、大小、对齐方式）、图片（大小、边框等）、版面布局等外观样式 CSS以HTML为基础提供功能，还可以针对不同浏览器设置不同样式 1.2 CSS样式规则 选择器{ 属性名：属性值； 属性名：属性值 } 规则： 用选择器指定CSS样式作用的HTML对象，{ }内为具体样式 属性是指
JavaScript 表单脚本
欧唯薇
04-14 739
JavaScript 表单脚本 一、基本概念 HTML中表单<form>对应JS的是HTMLFormElement类型，具有HTML元素的默认属性，也有以下特有的属性和方法： acceptCharset、action、elements、enctype、length、method、name、target这几个属性都对应表单的特性， 可以通过document.for...
大三前端实习日志
热门推荐
不认真写代码的姑娘
08-17 5万+
大三暑期选择实习：工作内容：前端web实习 实习地点：武汉光谷 公司规模：创业型公司，前端开发人数为9人，实习生5名1.实习内容总结：1.前端html+css页面结构培训实习内容：为完成UI设计稿到页面的实现。使用Photoshop切图，html+css完成页面制作 实习完成时间：5天 实习过程：前期： 到达公司，完成了基本的人事报到。找到自己座位，连接好电脑。公司中为迎接新人开了一个迎新会
Java Web 实习笔记（一）
MOGOT7的博客
06-11 3963
Java web实习笔记目录导航 1. Java Web 实习笔记（一） 2.Java Web 实习笔记（二） 3.Java Web 实习笔记（三） 4.Java Web 实习笔记（四） 一、WEB概述 1、C/S 和B/S （1）C/S（client-server 客户端-服务器） 需要下载安装：QQ，LOL （2）B/S（brower-server 浏览...
zynq-linux移植学习笔记
06-28
### 回答1： zynq-linux移植学习笔记应包含以下内容: 1. 对zynq架构和硬件资源的理解，包括PS和PL部分的特点。 2. 如何使用Xilinx SDK来编译和配置u-boot和Linux内核。 3. 如何在硬件平台上运行和调试Linux系统。 4. 怎样在Linux系统中配置和使用各种硬件资源，如DMA、Ethernet、Flash等。 5. 如何在Linux系统中移植和运行应用程序，并与硬件资源进行交互。 6. 如何进行系统优化和资源管理，以提高系统性能和稳定性。 ### 回答2： Zynq是一款Xilinx公司开发的一种嵌入式系统芯片，其使用了双核Cortex-A9处理器和可编程逻辑器件（FPGA）的组合。移植Linux到Zynq芯片中，可以使其具备无限的扩展能力，极大地拓展了其应用领域，因此掌握Zynq-Linux移植技术是非常重要的。 Zynq-Linux移植分为四个主要步骤： 第一，准备工作 在移植前，需要确认硬件平台是否支持Linux运行，并且需要对硬件进行配置，最好使用Zynq开发板的官方配置； 第二，内核移植 内核移植是整个移植过程中最关键的一步。需要根据硬件平台的特性对内核进行选择和配置。可以从内核源代码库中获取内核代码，然后进行交叉编译。移植内核的过程中需要注意内核配置参数的设置，同时也要确保内核模块和驱动程序的编写。 第三，文件系统移植 在移植Linux的过程中，文件系统也是非常重要的。可以使用开发板官方Linux镜像，也可以自己编译镜像。移植文件系统还涉及到root文件系统的配置、挂载方式、网络配置和各种服务的配置等问题。 第四，驱动移植 驱动程序是连接硬件和软件的关键部分，需编写相应的驱动程序来实现对硬件的控制。移植驱动程序的过程中需要关注各种硬件接口和设备驱动API的使用，确保驱动程序与硬件配合良好。 总结来说，Zynq-Linux移植技术的掌握需要具备较强的Linux基础知识、驱动开发经验和交叉编译工具链的使用能力。同时，还需要有耐心和细心，对每个步骤进行仔细的分析和处理。 在学习中，需要结合实际开发项目，多进行实践操作才能更好地掌握Zynq-Linux移植技术，为后续项目的开发和应用提供更好的支持。 ### 回答3： Zynq-7000系列是一种由Xilinx开发的SoC（系统级芯片），它将双ARM Cortex-A9处理器和可编程逻辑（FPGA）集成在一起。这使得开发人员可以使用硬件加速加速器来加速运行在Linux上的各种应用。然而，实现这个目标需要进行移植。 在开始Zynq Linux移植学习笔记之前，需要一些基本的知识。首先，需要了解Linux内核的基本工作原理和Linux驱动程序的编写技术。然后，需要了解FPGA和SoC体系结构。 在开始移植之前，需要为SoC开发板选择正确的Linux发行版。这通常需要考虑处理器体系结构，内存大小和设备驱动程序的可用性。另外，还需要考虑是否需要自定义内核或驱动程序以满足应用程序的需求。 接下来，需要编写设备树文件（DT）来描述SoC架构。设备树文件是一种描述硬件配置信息的特殊语言。它会告诉内核有哪些设备可用以及如何访问这些设备。 接下来，需要配置Linux内核以支持Zynq-7000处理器。这可能包括启用适当的内核配置选项，编写设备驱动程序以及配置启动过程。 最后，需要启动Zynq板并验证Linux系统稳定运行。这些步骤包括在启动过程中将设备树文件加载到内存中，以及启动用户空间应用程序。 总之，移植Zynq Linux是一项复杂的任务，需要广泛的专业知识和技术。但是，它可以为开发人员提供强大的硬件加速支持，使他们能够加速处理一系列计算密集型应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值