zoukankan      html  css  js  c++  java
  • Javaweb——简单登录界面

    <html>
    <!----------------------------------------------->
    <head>
    <title>登录界面</title>
    
    </head>
    <!----------------------------------------------->
    <body style="background-image:url(http://5b0988e595225.cdn.sohucs.com/images/20190719/7ff9d0ec4a9f4070a0239812bae09292.jpeg);background-size:100%;">
    <audio src ="https://webfs.yun.kugou.com/202003191925/fdffb81e45308acf7d8add9b840e6234/G005/M01/04/1D/RQ0DAFS4My-ASVN1ADN0lUcD7Zw018.mp3" width =500 height=500 volume=100 autoplay=true loop=true></audio>
    <br><br><br><br><br>
    <h1 align=center><font face="楷体" size=5 color=pink>登录界面</h1><br>
    <form method=post name="form0" align=center onsubmit="return checkps();">
    <font face="楷体" size=5 color=pink>
    姓名:
    <select name="name0" style="font-family:'楷体';font-size:20px;background:pink;text-align:center;height:28px;">
    <!--option valu="0">name</option-->
    <option valu="1">张磊</option>
    <option valu="2">李英杰</option>
    <option valu="3">张号成</option>
    </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    密码:</font>
    <input type=password name="password" placeholder=password style="background:pink;font-size:20px;color:red;font-family:'楷体';text-align:center;90px;"><br><br>
    <input type=submit name="button" maxlength=3 size=8  style="background:pink;font-family:'楷体';font-size:20px;color:red;text-align:center;"><br><br>
    &nbsp;<input type=button name="bt" value="王者荣耀" style="background:pink;font-family:'楷体';font-size:20px;color:red;text-align:center;" onclick="window.location.href='http://pvp.qq.com/v/videolist.shtml?G_biz=18&sKeyword=%25E6%259D%258E%25E7%2599%25BD'"></button>
    <input type=button name="bt1" value="王者解渴" style="background:pink;font-family:'楷体';font-size:20px;color:red;text-align:center;" onclick="window.location.href='http://ugcyd.qq.com/uwMROfz2r5zIIaQXGdGnC2dfDmb_xYKxrIGz_bGUg2Lja6ru/c30742lz4p2.mp4?'"></button>
    <br><br>
    <input type=button name="bt1" value="LUNAR"  style="background:pink;color:red;font-family:'楷体';font-size:20px;text-align:center;" onclick="window.location.href='http://www.gamemei.com/background/uploads/161020/3-16102014092RX.jpg'"></button>
    <input type=button value=" 下饭" style="background:pink;color:red;font-family:'楷体';font-size:20px;text-align:center;" onclick="window.location.href='http://5b0988e595225.cdn.sohucs.com/images/20190719/1e09949867844153b356f51802b85bdd.jpeg'"></button>
    </form>
    <div style="text-align:center">
    <button style="background:pink;color:red;font-family:'楷体';font-size:20px;text-align:center;" onclick="Hid()">隐藏</button>
    <button style="background:pink;color:red;font-family:'楷体';font-size:20px;text-align:center;" onclick="Iplay()">展开</button><br><br>
    <font face="楷体" color=pink size=5>Ps:展开点击图片你值得拥有!(还可以隐藏起来哦!)</font>
    </div>
    <!--iframe src="0.html">这是A</iframe-->
    <script>
    function checkps()
    {
        if(document.form0.name0.value=="张磊"&&document.forms[0].password.value=="123456")
        {document.form0.action="https://user.qzone.qq.com/1526771301?source=namecardhoverqzone";return true;}
        else if(document.form0.name0.value=="李英杰"&&document.forms[0].password.value=="abcdef")
        {document.form0.action="https://user.qzone.qq.com/2754611772?source=namecardhoverqzone";return true;}
        else if(document.form0.name0.value=="张号成"&&document.forms[0].password.value=="ABCDEF")
        {document.form0.action="https://user.qzone.qq.com/2602841530?source=namecardhoverqzone";return true;}
        else
        {
        alert("用户名或密码不正确!")
        return false;
        }
    }
    
    function play(num)
    {
    var Box=document.getElementsByTagName('Box');
    var Img=document.getElementsByTagName('Img');
        for(i=0;i<=Img.length;i++){
        if(i==num+1) Img[i].style.display="inline";
        else Img[i].style.display="none";
        if(num==8) Img[0].style.display="inline";}
    }
    
    function Iplay()
    {
    var Box0=document.getElementsByTagName('Box');
    var Img0=document.getElementsByTagName('Img');
    for(i=0;i<1;i++)
    {
        Img0[i].style.display="inline";
    }    
    }
    
    function Hid()
    {
    var Box1=document.getElementsByTagName('Box');
    var Img1=document.getElementsByTagName('Img');
    for(i=0;i<Img1.length;i++)
    {
        Img1[i].style.display="none";
    }
    }
    </script>
    
    <div id="Box">
        <img src="http://5b0988e595225.cdn.sohucs.com/images/20190719/7ff9d0ec4a9f4070a0239812bae09292.jpeg" onclick="play(0)" style="display:none;"/>
        <img src="http://5b0988e595225.cdn.sohucs.com/images/20190719/ccf9df58875e41498e80133bd94b96f9.jpeg" onclick="play(1)" style="display:none;"/>
        <img src="http://5b0988e595225.cdn.sohucs.com/images/20190719/5425368fe31a40c9986c11fdf02515dc.jpeg" onclick="play(2)" style="display:none;"/>
        <img src="http://5b0988e595225.cdn.sohucs.com/images/20190719/ce2b4d6363b34255b3f244f42416e326.jpeg" onclick="play(3)" style="display:none;"/>
        <img src="http://5b0988e595225.cdn.sohucs.com/images/20190719/10a540596acb4964a032947249e7f88d.jpeg" onclick="play(4)" style="display:none;"/> 
        <img src="http://5b0988e595225.cdn.sohucs.com/images/20190719/1e09949867844153b356f51802b85bdd.jpeg" onclick="play(5)" style="display:none;"/> 
        <img src="http://5b0988e595225.cdn.sohucs.com/images/20190719/4af851a364f34143a8346879e2448a7d.jpeg" onclick="play(6)" style="display:none;"/> 
        <img src="http://5b0988e595225.cdn.sohucs.com/images/20190719/f15cb991ac5643f9aeb63729ded174d2.jpeg" onclick="play(7)" style="display:none;"/> 
        <img src="http://5b0988e595225.cdn.sohucs.com/images/20190719/9b54246cb59144579a5cd11f1e6b3b30.jpeg" onclick="play(8)" style="display:none;"/> 
    </div>
    </body>
    <!----------------------------------------------->
    </html>
  • 相关阅读:
    maven dependencies 里面的包怎么导出
    webUploader react 接口设计
    HTML5 History API实现无刷新跳转
    Object.defineproperty实现数据和视图的联动
    jsLoader、cssLoader、imageLoader
    【转】前端工程化-公共模块的依赖和常用的工作流
    JDBC详解
    正则表达式
    【GOF23设计模式】备忘录模式
    【GOF23设计模式】观察者模式
  • 原文地址:https://www.cnblogs.com/zwsmile/p/12604734.html
Copyright © 2011-2022 走看看