9.一次简单的Web作业
Web作业
<!DOCTYPE html>
<!--
作业描述：由于引用了JQuery库，所以请在联网的时候打开该页面。
本次作业是在上次作业的基础上的进一步完善，上次作业页面预留的登录按钮这次予以实现。
功能：1.点击登录按钮后弹出窗口，可分别点击登录和注册进行相关操作；
2.实现了文本、单选、多选、下拉列表等常用输入组件；
3.提供了数据是否输入、数据规则格式、正确性（比如数字或字符）等方面验证；
4.点击登录或注册后会显示登陆成功或注册成功；
5.登录或注册成功后，原登录按钮位置会出现“XXX，你好！”和退出按钮，点击退出后可重新登录；
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>电子论坛</title>
<style type="text/css">
.one{
font-family: 宋体;
font-size: 15px;
font-weight: bold;
color: white;
}
.two{
font-family: 宋体;
font-size: 20px;
color: black;
text-indent: 40px;
}
body{margin:0 auto;}
#container{height: 1000px;margin:0 auto;padding:0 auto;} #header{width: 100%;height: 40px;background-color: black;}
#select{width: 100%;text-align: right;background-color: black;}
#select #sel{background-color: black;color: white;border-radius: 10px;}
.login{margin-top: 10px;background-color: black;color: white;border-radius: 10px;cursor: pointer;}
.words{color: white;}
#navs{width: 100%;height: 100px;margin-top: 10px;} ul{list-style:none;height: 100px;background-color: white;padding-top: 10px;text-align: center;}
.nav>li{float:left;}
ul a{display:block;text-decoration: none;width:100px;height:50px;text-align: center;
line-height: 50px;color:white;background-color: black;}
.nav>li:first-child a{border-radius:10px 0 0 10px;}
.nav>li:last-child a{border-radius: 0 10px 10px 0;}
.drop-down{position: relative;height: 50px;}
.drop-down-content{padding: 0;opacity: 0.3;height:0;overflow: hidden;transition: all 1s ease;}
.drop-down-content li:hover a{background-color:red;}
.nav .drop-down:hover .drop-down-content{opacity:1;height:150px;} #picture{width:100%;}
#content{width:800px;height:70%;margin-top: 80px;padding-left:20%;}
#new{width:100px;background-color: black;border: 1px solid black; border-radius: 10px;}
#footer{height: 5%;height: 40px;background-color: black;} img{width:80%;height:40%;align-content: center;}
.wrap {width: 60%;height: 250px;overflow: hidden;position: relative;padding-left:35%;margin-top: 80px;}
.wrap ul {display: inline;}
.wrap ul li {display: inline;}
.wrap ul li img {height: 100%;align-items: center;}
.wrap ol {position: absolute;left: 45%;bottom: 10px;list-style: none;display: inline;}
.wrap ol li {border-radius: 10px;height: 20px;width: 20px;background:black;border: solid 1px #666;margin-left: 5px;color: white;float: left;line-height: center;text-align: center;cursor: pointer;}
.wrap ol .on {background: #E97305;color: white;} </style>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic').getElementsByTagName("li"),
list=document.getElementById('list').getElementsByTagName('li'),
index=0,
timer=null; // 定义并调用自动播放函数
timer = setInterval(autoPlay, 3000); // 鼠标划过整个容器时停止自动播放
wrap.onmouseover = function () {
clearInterval(timer);
} // 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout = function () {
timer = setInterval(autoPlay, 3000);
}
// 遍历所有数字导航实现划过切换至对应的图片
for (var i = 0; i < list.length; i++) {
list[i].onmouseover = function () {
clearInterval(timer);
index = this.innerText - 1;
changePic(index);
};
}; function autoPlay () {
if (++index >= pic.length) index = 0;
changePic(index);
} // 定义图片切换函数
function changePic (curIndex) {
for (var i = 0; i < pic.length; ++i) {
pic[i].style.display = "none";
list[i].className = "";
}
pic[curIndex].style.display = "inline-block";
list[curIndex].className = "on";
} };
</script>
<style type="text/css">
/*弹出窗口样式*/
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:5;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: auto;
border: 3px solid lightblue;
border-radius: 20px;
background-color: white;
z-index:6;
}
.justify{
position: absolute;
z-index:10;
width: 100% ;
}
#logword{
left:20px;
}
.close{
position:absolute;
font-size:20px;
color:chocolate;
border: #E97305;
border-radius: 20px;
width: 30px;
height: 20px;
left:97%;
z-index: 7;
cursor: pointer;
text-align: center;
}
.content{
position:absolute;
z-index: 7;
border: 20px black;
font-size: 15px;
padding-left: 30%;
padding-top: 5%;
top: 5%;
}
.inputw{
outline: none;
border:10px cadetblue;
border-radius: 10px;
width: 200px;
height: 25px;
opacity: 0.8;
text-indent: 10px;
}
.button1{
outline: none;
width: 50px;
height: 30px;
border:0px cadetblue;
border-radius: 20px;
background-color: cornflowerblue;
text-align: center;
cursor: pointer;
opacity: 0.9;
}
.word1{
color: cadetblue;
font-weight: bold;
font-size: 20px;
text-align: center;
}
.word2{
color: cadetblue;
font-weight: bold;
font-size: 20px;
cursor: pointer;
display: inline;
}
.nality{
border: 10px cadetblue;
border-radius: 10px;
width: 100px;
height: 25px;
opacity: 0.9;
outline: none;
text-indent: 20px;
}
.options{
border: 10px cadetblue;
border-radius: 10px;
width: 100px;
height: 25px;
opacity: 0.9;
outline: none;
text-indent: 10px;
}
.sword{
color: cadetblue;
font-weight: bold;
font-size: 15px;
}
.falseSignal{
/*display: inline;*/
color: red;
text-indent: 65px;
}
.trueSignal{
display: inline;
border-radius: 20px;
}
</style>
<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
$("#"+bg_div).height($(document).height());
document.getElementById('resword').style.display='none' ;
document.getElementById('login').style.color='chocolate';
document.getElementById('login').style.fontSize='30px';
document.getElementById('userfalse1').style.display='none' ;
document.getElementById('userfalse2').style.display='none' ;
document.getElementById('pwdfalse1').style.display='none' ;
document.getElementById('pwdfalse2').style.display='none' ;
document.getElementById('pwdfalse3').style.display='none' ;
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
function showlog(){
document.getElementById('logword').style.display='block' ;
document.getElementById('login').style.color='chocolate';
document.getElementById('login').style.fontSize='30px';
document.getElementById('resword').style.display='none' ;
document.getElementById('register').style.color='cadetblue' ;
document.getElementById('register').style.fontSize='20px';
clearText();
}
function showres(){
document.getElementById('logword').style.display='none' ;
document.getElementById('login').style.color='cadetblue' ;
document.getElementById('login').style.fontSize='20px';
document.getElementById('resword').style.display='block' ;
document.getElementById('register').style.color='chocolate' ;
document.getElementById('register').style.fontSize='30px';
clear();
}
</script>
<script type="text/javascript">
/*表单验证*/
function check(form){
if(form.user.value=="" || form.user.value=="请输入用户名" || (form === form2 && (form.user.value=="" || form.user.value=="4-8位字符组合"))){
alert("请输入用户名！");
form.user.focus();
return;
}
else if(form.pwd.value=="" || form.pwd.value=="请输入密码" || (form === form2 && (form.pwd.value=="" || form.pwd.value=="6-16位字符组合"))){
alert("请输入密码！");
form.pwd.focus();
return;
}
else if(form === form2 && (form.certify.value=="" || form.certify.value=="请再次输入密码")){
alert("请再次确认密码!");
form.certify.focus();
return;
}
else{ if(form.submit1.value=='登录')
alert("登录成功");
else
alert("注册成功");
document.getElementById('slog').style.display='none' ;
document.getElementById('user1').innerText=form.user.value+',你好!';
document.getElementById('sout').style.display='inline' ;
CloseDiv('MyDiv','fade');
/*form.submit();*/
}
}
var regexs=/^[a-zA-Z0-9_]+$/;
function f1(form, tag_id, toal){
regexs.lastIndex=0;
if(form.user.value==""){
document.getElementById(tag_id).style.display='none' ;
}
else if(form.user.value.length < 4 || form.user.value.length > 8){
document.getElementById(tag_id).style.display='block' ;
document.getElementById(toal).innerText='*请输入4-8位字符';
form.user.focus();
}
else if(!regexs.test(form.user.value)){
document.getElementById(tag_id).style.display='block' ;
document.getElementById(toal).innerText='*只能输入英文字母、数字和下划线';
form.user.focus();
}
else{
document.getElementById(tag_id).style.display='none' ;
}
}
function f2(form, tag_id, toal){
regexs.lastIndex=0;
if(form.pwd.value==""){
document.getElementById(tag_id).style.display='none' ;
}
else if((form.pwd.value.length < 6 || form.pwd.value.length > 16) && !(form.pwd.value=="请输入密码" || form.pwd.value=="6-16位字符组合")){
document.getElementById(tag_id).style.display='block' ;
document.getElementById(toal).innerText='*请输入6-16位字符';
form.pwd.focus();
}
else if(!regexs.test(form.pwd.value)){
document.getElementById(tag_id).style.display='block' ;
document.getElementById(toal).innerText='*只能输入英文字母、数字和下划线';
form.user.focus();
}
else{
document.getElementById(tag_id).style.display='none' ;
}
}
function f3 (form, tag_id){
if(form.certify.value != form.pwd.value && form.certify.value != ""){
document.getElementById(tag_id).style.display='block' ;
form.pwd.focus();
}
else{
document.getElementById(tag_id).style.display='none' ;
}
}
/*退出登录*/
function clearText(){
form1.user.value="";
form1.pwd.value="";
form2.user.value="";
form2.pwd.value="";
form2.certify.value="";
document.getElementById('userfalse1').style.display='none' ;
document.getElementById('pwdfalse1').style.display='none' ;
}
function clearForm(){
document.getElementById('slog').style.display='inline' ;
document.getElementById('sout').style.display='none' ;
clearText();
alert('退出成功');
}
</script>
</head>
<body onload="init()">
<div id="container">
<header><div id="header" class="one">
<div id="select">
<span style="float: left;margin-top: 12px;"> 集团网址</span>
语言选择:
<select name="" id="sel">
<option value="" selected>中文</option>
<option value="">English</option>
</select> |
<div id="slog" style="display: inline;">
<input name="logins" type="button" onclick="ShowDiv('MyDiv','fade')" value="登录" class="login">
</div>
<div id="sout" style="display: inline;" class="words">
<span id="user1"></span>
<input name="logouts" type="button" onclick="clearForm()" value="退出" class="login">
</div>
</div>
</div></header>
<nav><div id="navs">
<ul class="nav">
<li><a href="#">首页</a></li>
<li class="drop-down"><a href="#">手机</a>
<ul class="drop-down-content">
<li><a href="">iPhone</a></li>
<li><a href="">HuaWei</a></li>
<li><a href="">XiaoMi</a></li>
</ul>
</li>
<li class="drop-down"><a href="">平板</a>
<ul class="drop-down-content">
<li><a href="">iPad</a></li>
<li><a href="">HuaWeiPad</a></li>
</ul>
</li>
<li class="drop-down"><a href="">笔记本</a>
<ul class="drop-down-content">
<li><a href="">Mac</a></li>
<li><a href="">MateBook</a></li>
</ul>
</li>
<li class="drop-down"><a href="">产品服务</a>
<ul class="drop-down-content">
<li><a href="">产品支持</a></li>
<li><a href="">技术论坛</a></li>
</ul>
</li>
</ul> </div></nav>
<div class="wrap" id="wrap">
<ul id="pic">
<li><img src="" alt="图1"></li>
<li><img src="" alt="图2"></li>
<li><img src="" alt="图3"></li>
<li><img src="" alt="图4"></li>
<li><img src="" alt="图5"></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li >2</li>
<li >3</li>
<li >4</li>
<li >5</li>
</ol>
</div>
<div id="content">
<div id="new" class="one" style="text-align: center;">
最近新闻
</div>
<h1 style="color: black;text-align: center;">专业评测AnandTech：iPhone11系列性能超对手两倍</h1>
<p class="two">
近日，被誉为是「互联网行业最专业的硬件评测网站之一」的 AnandTech，发布了他们的 iPhone 11系列详细评测报告，对 iPhone 11 系列的性能表现进行了详尽的评测和分析。对于 A13 的综合表现，AnandTech 总结指出，目前 A13 在市场上还没有竞争对手，性能几乎是其他非苹果 SoC 的两倍，甚至能和 AMD 以及英特尔的台式机处理器相抗衡。除了 A13 芯片的性能依旧强劲之外，电池续航也是今年 iPhone 11 系列最大的提升之一，尤其是 iPhone 11 Pro 两款机型在电池续航方面的表现令人印象深刻。
</p>
</div>
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay"></div>
<div id="MyDiv" class="white_content">
<div class='close' onclick="CloseDiv('MyDiv','fade')">X</div>
<div class="content">
<div style="text-align: center;width: auto;">
<div class="word2" id = "login" onclick="showlog()">登录</div><span class="word1">/</span>
<div class="word2" id = "register" onclick="showres()">注册</div><br>
</div><br>
<div id="logword">
<form name="form1" action="test.html" method="POST">
<span class="word2">账号：</span>
<input type="text" name="user" class="inputw" placeholder="请输入用户名" onblur="f1(form1, 'userfalse1', 'userfo1')" >
<div id="userfalse1" class="falseSignal"><span id="userfo1"></span></div>
<br>
<span class="word2">密码：</span>
<input type="password" name="pwd" class="inputw" placeholder="请输入密码" onblur="f2(form1,'pwdfalse1', 'pwdfo1')" >
<div id="pwdfalse1" class="falseSignal"><span id="pwdfo1"></span></div><br><br>
<input type="button" name="submit1" class="button1" value="登录" onclick="check(form1)">
<input type="reset" name="button2" class="button1" value="重置">
</form>
</div>
<div id="resword">
<form name="form2" action="test.html" method="POST">
<span class="word2">账号：</span>
<input type="text" name="user" class="inputw" onblur="f1(form2,'userfalse2','userfo2')" placeholder="4-8位字符组合">
<span id="userfalse2" class="falseSignal"><span id="userfo2"></span></span><br>
<span class="word2">密码：</span>
<input type="password" name="pwd" class="inputw" onblur="f2(form2,'pwdfalse2', 'pwdfo2')" placeholder="6-16位字符组合">
<div id="pwdfalse2" class="falseSignal"><span id="pwdfo2"></span></div><br>
<span class="word2">确认：</span>
<input type="password" name="certify" class="inputw" onblur="f3(form2,'pwdfalse3')" placeholder="请再次输入密码">
<div id="pwdfalse3" class="falseSignal">*两次输入密码不一致</div><br>
<span class="word2">性别：</span>
<input type="radio" name="sex" value="男"><span class="sword">男</span>
<input type="radio" name="sex" value="女"><span class="sword">女</span><br>
<span class="word2">爱好：</span>
<input type="checkbox" name="habit" value="唱"><span class="sword">唱</span>
<input type="checkbox" name="habit" value="跳"><span class="sword">跳</span>
<input type="checkbox" name="habit" value="Rap"><span class="sword">Rap</span>
<input type="checkbox" name="habit" value="篮球"><span class="sword">篮球</span> <br>
<span class="word2">国籍：</span>
<select name="nationality" id="na" class="nality">
<option value="China">中国</option>
<option value="USA">美国</option>
<option value="Japanese">日本</option>
</select><br>
<br>
<input type="button" name="submit1" class="button1" value="注册" onclick="check(form2)">
<input type="reset" name="button2" class="button1" value="重置">
</form>
</div>
</div>
</div>
<footer><div id="footer" class="one">
<span style="float:left;margin-top: 12px;"> ©2019 莫莫君的公司</span>
<span style="float: right;margin-top: 12px;"> 联系我们 | 法律声明 | 隐私政策 </span>
</div></footer>
</div>
</body>
</html>
9.一次简单的Web作业的更多相关文章
- 简单web作业---书籍介绍的相关网页编写
老师布置的web作业,我做了3个页面,其中有利用老师的css代码! 我有添加背景音乐,下面的是主界面的代码. <!DOCTYPE html> <html> <head&g ...
- Python 实现简单的 Web
简单的学了下Python, 然后用Python实现简单的Web. 因为正在学习计算机网络,所以通过编程来加强自己对于Http协议和Web服务器的理解,也理解下如何实现Web服务请求.响应.错误处理以及 ...
- 使用 Nodejs 搭建简单的Web服务器
使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程,因为要完成一个简单的Web服务器,你需要学习Nodejs中几个比较重要的模块,比如:http协议模块.文件系统.url解析模块. ...
- 使用Servlet和JSP实现一个简单的Web聊天室系统
1 问题描述 利用Java EE相关技术实现一个简单的Web聊天室系统,具体要求如下. (1)编写一个登录 ...
- 20145216 20145330 《信息安全系统设计基础》 实验五 简单嵌入式WEB 服务器实验
20145216 20145330 <信息安全系统设计基础> 实验五 简单嵌入式WEB 服务器实验 实验报告封面 实验步骤 1.阅读理解源码 进入/arm2410cl/exp/basic/ ...
- 自己动手模拟开发一个简单的Web服务器
开篇:每当我们将开发好的ASP.NET网站部署到IIS服务器中,在浏览器正常浏览页面时,可曾想过Web服务器是怎么工作的,其原理是什么?“纸上得来终觉浅,绝知此事要躬行”,于是我们自己模拟一个简单的W ...
- 深入剖析tomcat之一个简单的web服务器
这个简单的web服务器包含三个类 HttpServer Request Response 在应用程序的入口点,也就是静态main函数中,创建一个HttpServer实例,然后调用其await()方法. ...
- 20145208《信息安全系统设计基础》实验五 简单嵌入式WEB 服务器实验
20145208<信息安全系统设计基础>实验五 简单嵌入式WEB 服务器实验 20145208<信息安全系统设计基础>实验五 简单嵌入式WEB 服务器实验
- 用Python建立最简单的web服务器
利用Python自带的包可以建立简单的web服务器.在DOS里cd到准备做服务器根目录的路径下,输入命令: python -m Web服务器模块 [端口号,默认8000] 例如: python -m ...
随机推荐
- Redis分布式锁解决抢购问题
转:https://segmentfault.com/a/1190000011421467 废话不多说,首先分享一个业务场景-抢购.一个典型的高并发问题,所需的最关键字段就是库存,在高并发的情况下每次 ...
- Fiddler之常用操作（过滤器设置，代理设置，手机抓包设置，手机代理配置）
记录下,工作中常用的一些设置和操作~ 1.过滤“脏”请求 两个下拉框的名词解释: A.内外网过滤 No Zone Filter:不分区域过滤(内网外网都显示) Show only Intranet H ...
- X86逆向12：内存补丁的制作
本章我们将学习各种打补丁的方式,补丁在软件的破解过程中非常的重要,比如软件无法脱壳我们就只能通过打补丁的方式来破解程序,补丁原理就是当程序运行起来会被释放到内存并解码,然后补丁就通过地址或特征码定位到 ...
- c++11 跨平台多线程demo和qt 静态链接（std::thread有join函数，设置 QMAKE_LFLAGS = -static）
#include <stdio.h>#include <stdlib.h> #include <chrono> // std::chrono::seconds#in ...
- 怎样在 Vue 中使用 v-model 实现双向数据绑定?
1. 所谓 双向数据绑定, 可以理解为: 修改 A , B 会跟着被修改, 修改 B , A 会跟着被修改. 常用在需要 进行用户输入的地方, 比如 这些 html 标签: input.select ...
- C# 移除数组中重复项
方法一: static void Main(string[] args) { //看到数组的第一反应应该是排序 ,,,,,,,}; //去掉数组中重复的项 //先排序 arrayAsc(array); ...
- 始终让footer在底部
1.footer保持在页面底部 需求: 我们希望footer能在窗口最底端,但是由于页面内容太少,无法将内容区域撑开,从而在 footer 下面会留下一大块空白 第一种方法:采用 flexbox布局模 ...
- docker 安装php
nginx :docker pull nginx docker run -p 80:80 --name nginx -v /usr/local/nginx/www:/www -v /usr/local ...
- conda创建和使用python的虚拟环境
https://uoa-eresearch.github.io/eresearch-cookbook/recipe/2014/11/20/conda/ 当我们使用服务器的时候,会存在多个用户,并且可能 ...
- 第二章· MySQL体系结构管理
一.客户端与服务器模型  1.mysql是一个典型的C/S服务结构 1.1 mysql自带的客户端程序(/application/mysql/bin) mysql mysqladmin mysqld ...