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; 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>