黑马程序员技术交流社区

标题: 代码 [打印本页]

作者: HYS1 时间: 2019-6-6 16:56
标题: 代码
<!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">

<title>计算器</title>

<link rel="stylesheet" href="../css/mr.css">

<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>

</head>
<body style="margin: 0px; padding: 0px;">

<div>
<div id="div1">
      <font>明日方舟工具箱</font><a href="#" style="color: white;">公开招募计算器</a><a href="#" >升级计算</a><a href="#">精英材料计算</a><a
         href="#">干员表</a><a style="color: rgba(255,255,255,0.25)">施工中...</a>
      <ol id="ol1">Language ▼
         <li>
            <div><a href="#">中文</a></div>
            <div><a href="#">English</a></div>
         </li>
      </ol>
</div>
<div id="div2">
      <table id="tb1">
         <tbody>
         <tr>
            <td>
                  <input type="button" onclick="qk(0);" class="tou" value="清空" />
                  <input type="button" class="pt" value="名称" />
                  <input type="button" class="pt" value="图片" />

                  <input type="button" class="xiao" onclick="xz(this,0);" value="小" />
                  <input type="button" class="xiao" onclick="xz(this,0);" value="中" />
                  <input type="button" class="xiao" onclick="xz(this,0);" value="大" />

                  <input type="button" class="pt" id="td1" onclick="xz(this,0);" value="特大" />
            </td>
         </tr>
         <tr>
            <td><input type="button" id="tou2" class="tou2" onclick="qk(2);" value="ALL" />
                  <input type="button" class="xiao2" onclick="xz(this,6);" value="6★" />
                  <input type="button" class="xiao2" onclick="xz(this,5);" value="5★" />
                  <input type="button" class="xiao2" onclick="xz(this,4);" value="4★" />
                  <input type="button" class="xiao2" onclick="xz(this,3);" value="3★" />
                  <input type="button" class="xiao2" onclick="xz(this,2);" value="2★" />
                  <input type="button" class="xiao2" onclick="xz(this,1);" value="1★" />

            </td>
         </tr>
         <tr>
            <td><input type="button" class="tou3" value="资深" />
                  <input type="button" class="pt2" value="新手" />
                  <input type="button" class="pt2" value="资深干员" />
                  <input type="button" class="pt2" value="高级资深干员" />
            </td>
         </tr>
         <tr>
            <td>
                  <input type="button" class="tou4" value="位置" />
                  <input type="button" class="pt3" value="远程位" />
                  <input type="button" class="pt3" value="近战位" />
            </td>
         </tr>
         <tr>
            <td>
                  <input type="button" class="tou5" value="性别" />
                  <input type="button" class="pt4" value="男性干员" />
                  <input type="button" class="pt4" value="女性干员" />
            </td>
         </tr>
         <tr>
            <td>
                  <input type="button" class="tou6" value="种类" />
                  <input type="button" class="pt5" value="先锋干员" />
                  <input type="button" class="pt5" value="狙击干员" />
                  <input type="button" class="pt5" value="医疗干员" />
                  <input type="button" class="pt5" value="术士干员" />
                  <input type="button" class="pt5" value="近卫干员" />
                  <input type="button" class="pt5" value="重装干员" />
                  <input type="button" class="pt5" value="辅助干员" />
                  <input type="button" class="pt5" value="特种干员" />
            </td>
         </tr>
         <tr>
            <td>
                  <input type="button" class="tou7" value="词缀" />
                  <input type="button" class="pt6" value="治疗" />
                  <input type="button" class="pt6" value="支援" />
                  <input type="button" class="pt6" value="输出" />
                  <input type="button" class="pt6" value="群攻" />
                  <input type="button" class="pt6" value="减速" />
                  <input type="button" class="pt6" value="生存" />
                  <input type="button" class="pt6" value="防护" />
                  <input type="button" class="pt6" value="削弱" />
                  <input type="button" class="pt6" value="位移" />
                  <input type="button" class="pt6" value="控场" />
                  <input type="button" class="pt6" value="爆发" />
                  <input type="button" class="pt6" value="召唤" />
                  <input type="button" class="pt6" value="快速复活" />
                  <input type="button" class="pt6" value="费用回复" />
            </td>
         </tr>

         </tbody>
      </table>

</div>
<div id="div3"></div>

</div>
<hr style="border: 0;border-top: 1px solid #dee2e6; float: left; width: 98%; margin-left: 1%;">
<div id="div4">
<p>使用说明：</p>
<p>1. 勾选需要查询的Tag，最多6个；</p>
<p>2. 勾选需要查询的星级，默认全部；</p>
<p>3. 现在点击标签即可开始计算，可点击“清空”重新开始；</p>
<p>4. 可以点击推荐表格中的干员或标签进行精准查询，再点击任意干员或标签返回。</p>
<div id="weibiao">
<p>19/05/04 升级消耗计算器上线，可在导航栏切换使用。</p>
<p>19/05/09 精英材料计算器上线，可在导航栏切换使用。</p>
</div>
</div>
<hr style="border: 0;border-top: 1px solid #dee2e6; float: left; width: 98%; margin-left: 1%;">

<div id="div5">

<p>最近更新：2019/06/01，联系作者</p>
<p>数据来源： XXXXXXXXXX</p>
<p>Powered by XXXXX</p>

</div>

</body>
<script>
var ol1 = document.getElementById("ol1");
var li1 = ol1.getElementsByTagName("li");
var ys = false;
var x1=1,x2=1,x3=1,x4=1,x5=1,x6=1;
ol1.onclick = function () {
      if (ys == false) {
         li1[0].style.display = "block";
         ol1.style.color = "rgba(255,255,255,1)";
         ys = true;
      } else
         if (ys == true){
            li1[0].style.display = "none";
            ol1.style.color = "rgba(255,255,255,0.5)";
            ys = false;
         }

      }

      window.onload=function () {
         tou2pd();
      }
      function tou2pd() {
         var tou2=document.getElementById("tou2");
         /*var a=0;
         var xiao2=document.getElementsByClassName("xiao2");

         for (var i = 0; i < xiao2.length; i++) {

            if (xiao2[i].style.backgroundColor=="#5a6268") {
                  a++;
            }
         }

         if (a!=0){

            tou2.style.backgroundColor="#5a6268";
         }else {
            tou2.style.backgroundColor="#0069d9";
         }*/
         if(x1==1&&x2==1&&x3==1&&x4==1&&x5==1&&x6==1){
            tou2.style.backgroundColor="#0069d9";
         }else {
            tou2.style.backgroundColor="#5a6268";
         }
      }//判断xiao2是否全为蓝色的函数

function qk(n) {
      if (n==0){
var pt = document.getElementsByClassName("pt");
var xiao = document.getElementsByClassName("xiao");
var td1 = document.getElementById("td1");
for (var i = 0; i < pt.length; i++) {
      xiao[i].style.backgroundColor="#5a6268";
}
td1.style.backgroundColor="#5a6268";
      }else if (n==2){
         var xiao2=document.getElementsByClassName("xiao2");
         var tou2=document.getElementById("tou2");
         if (x1==1&&x2==1&&x3==1&&x4==1&&x5==1&&x6==1) {
            for (var i = 0; i < xiao2.length; i++) {
                  xiao2[i].style.backgroundColor = "#5a6268";

            }
            tou2.style.backgroundColor="#5a6268";
            x1 = 0, x2 = 0, x3 = 0, x4 = 0, x5 = 0, x6 = 0;
         }else {
            for (var i = 0; i < xiao2.length; i++) {
                  xiao2[i].style.backgroundColor = "#0069d9";
            }
            tou2.style.backgroundColor="#0069d9";
            x1 = 1, x2 = 1, x3 = 1, x4 = 1, x5 = 1, x6 = 1;
         }
      }

}

function xz(obj,n) {
if (n==0){
      qk(n);
obj.style.backgroundColor="#0069d9";
}else if(n>=1&&n<=6){
      switch (n){
         case 1:if (x1==0){obj.style.backgroundColor="#0069d9";x1=1;}else{obj.style.backgroundColor="#5a6268";x1=0;}tou2pd() ;break;
         case 2:if (x2==0){obj.style.backgroundColor="#0069d9";x2=1;}else{obj.style.backgroundColor="#5a6268";x2=0;}tou2pd() ;break;
         case 3:if (x3==0){obj.style.backgroundColor="#0069d9";x3=1;}else{obj.style.backgroundColor="#5a6268";x3=0;}tou2pd() ;break;
         case 4:if (x4==0){obj.style.backgroundColor="#0069d9";x4=1;}else{obj.style.backgroundColor="#5a6268";x4=0;}tou2pd() ;break;
         case 5:if (x5==0){obj.style.backgroundColor="#0069d9";x5=1;}else{obj.style.backgroundColor="#5a6268";x5=0;}tou2pd() ;break;
         default :if (x6==0){obj.style.backgroundColor="#0069d9";x6=1;}else{obj.style.backgroundColor="#5a6268";x6=0;}tou2pd() ;break;
      }
}
}//xiao2选择星级小按钮函数

</script>

</html>

#div1 a{
list-style: none;;
text-decoration: none;
position: relative;
float: left;
margin-top: 18px;
color:rgba(255,255,255,0.5);
margin-left: 20px;
}

#div1 a:hover{
color:white;
}

#div1 font{
font-family: 微软雅黑;
font-size: 20px;
position: relative;
float: left;
margin-top: 16px;
margin-left: 10px;
}
#div1{
color: white;
width: 100%;
background-color: #212529;
height: 60px;
float: left;
}
#div1 ol{
border: none;
position: relative;
color:rgba(255,255,255,0.5);
float: right;
width: 160px;
padding: 0;
margin: 0;
font-family: 微软雅黑;
font-size: 16px;
margin-right: 40px;
margin-top: 18px;
}
#div1 ol li{
margin:0px;
display: none;
position: relative;
list-style: none;
border: 1px solid gray;
background-color: white;
color: black;
width: 150px;
height: 80px;
border-radius: 5px;
margin-top: 10px;
}

#div1 ol li div{
margin-top: 7px;
position: revert;
float: left;
width: 150px;
padding: 0px;
height: 30px;
border: 1px solid revert;
}

#ol1 a{
float: left;
left: 20px;
padding: 0px;
margin: auto;
color: black;
}
#div1 ol li div:hover{
background-color: rgba(0,0,0,0.1);
}
#div2{
float: left;
width: 456px;
margin-top: 15px;
margin-left: 10px;
border-radius: 5px;
border: 1px solid rebeccapurple;
border-top: 1px solid gray;
background-color: #d6d8d9;
margin-bottom: 2px;
height: 420px;

}
#tb1{
width: 420px;
height: 400px;
border: 0px;
margin: 0px;
padding: 0px;
align-content: center;
margin: auto;
margin-top: 10px;
}
#tb1 tr{
width: 420px;
height: 40px;
border: 0px;
}
.tou{
width: 50px;
height: 30px;
background-color: red;
border: 0px;
border-radius: 5px;
font-family: 微软雅黑;
font-size: 14px;
color: white;
}
.tou2{
   width: 50px;
   height: 30px;
   background-color: #0069d9;
   border: 0px;
   border-radius: 5px;
   font-family: 微软雅黑;
   font-size: 14px;
   color: white;
}
.tou3,.tou4,.tou5,.tou6,.tou7{
width: 50px;
height: 30px;
background-color: #17a2b8;
border: 0px;
border-radius: 5px;
font-family: 微软雅黑;
font-size: 14px;
color: rgba(255,255,255,0.75);
}
.pt{
width: auto;
padding-left: 10px;
padding-right: 10px;
height: 30px;
border-radius: 5px;
font-family: 微软雅黑;
font-size: 14px;
border: 0px;
border-radius: 5px;
color: white;
background-color:  #0069d9;/*蓝*/
}
.pt2,.pt3,.pt4,.pt5,.pt6{
width: auto;
padding-left: 10px;
padding-right: 10px;
height: 30px;
border-radius: 5px;
font-family: 微软雅黑;
font-size: 14px;
border: 0px;
border-radius: 5px;
color: white;
background-color:  #5a6268;/*蓝*/
margin-top: 5px;
}

.xiao{
background-color: #5a6268;/*灰*/
font-family: 微软雅黑;
font-size: 14px;
border: 0px;
border-radius: 5px;
color: white;
width: 30px;
height: 30px;
}
.xiao2{
background-color: #0069d9;
font-family: 微软雅黑;
font-size: 14px;
border: 0px;
border-radius: 5px;
color: white;
width: 30px;
height: 30px;
}
#tb1 tr td button{
height: 50px;
width: 60px;
text-align: center;
float: left;
background-color: blue;
border-radius: 5px;
color: white;
border: 0px;
left: 10px;
}
#tb1 tr td {
height: auto;
padding-top: 3px;
padding-bottom: 3px;
border-color: darkgray;
border-top: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
}
#div4{
float: left;
width: 98%;
margin-left: 1%;
font-family: 微软雅黑;
font-size: 16px;
}
#div4 p{
margin-left: 20px;
}
#weibiao{
width: 100%;
line-height: 1.5;
height: 80px;
background-color: #d4edda;
border: 1px solid #c3e6cb;
border-radius: 5px;
padding-top: 10px;
color: #3e8f3e;
}
#div5{
width: 100%;
height: 150px;
background-color: black;
float: left;
color: white;
font-family: 微软雅黑;
font-size: 16px;
align-content: center;
text-align: center;
margin: auto;
padding-top: 30px;
}

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2