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;">&nbsp;&nbsp;集团网址</span>
                    语言选择:
                    <select name="" id="sel">
                        <option value="" selected>中文</option>
                        <option value="">English</option>
                    </select>&nbsp;|&nbsp;
                    <div id="slog" style="display: inline;">
                        <input name="logins" type="button" onclick="ShowDiv('MyDiv','fade')" value="登录" class="login">&nbsp;&nbsp;&nbsp;
                    </div>
                    <div id="sout" style="display: inline;" class="words">
                        <span id="user1"></span>
                        <input name="logouts" type="button" onclick="clearForm()" value="退出" class="login">&nbsp;&nbsp;&nbsp;
                    </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>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="button" name="submit1" class="button1" value="登录" onclick="check(form1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <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>&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="button" name="submit1" class="button1" value="注册" onclick="check(form2)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <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;">&nbsp;&nbsp;&nbsp;&nbsp;&copy;2019 莫莫君的公司</span>
                <span style="float: right;margin-top: 12px;">&nbsp;&nbsp;联系我们&nbsp;|&nbsp;法律声明&nbsp;|&nbsp;隐私政策&nbsp;&nbsp;</span>  
            </div></footer>
        </div>
    </body>
</html>

 

posted @ 2019-11-18 22:27  莫莫君不恋爱  阅读(651)  评论(0)  编辑  收藏  举报