<!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;
}
|
|
收藏
淘帖
踩
