0 Star 0 Fork 0

foru / RAResource

加入 Gitee
与超过 800 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
职业代码.html 7.89 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
石榴木 提交于 2017-01-09 20:39 . 更新 职业代码.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.5.2/css/amazeui.min.css">
<style>
body{font-size:14px;background-color:#EEE;}
label{cursor:pointer}
.label{margin-right:30px}
label:last-of-type{margin-right:0}
input[type=checkbox]{margin-right:5px;vertical-align:text-top;}
@media only screen and (min-width:400px){
.am-padding-sm{padding-left:1.5em;padding-right:1.5em}
}
</style>
</head>
<body>
<div class="am-g">
<div class="am-u-md-12 am-padding-top">
<div class="am-panel am-panel-default">
<div class="am-panel-bd">
<div class="job am-input-group">
<input type="text" id="job" placeholder="职业代码" class="am-form-field am-text-center">
<span class="am-input-group-btn">
<button type="button" class="am-btn am-btn-default" id="search"><span class="am-icon-search"></span></button>
</span>
</div>
</div>
<div class="am-panel-footer"><label for="all"><input type="checkbox" name="" id="all">职业全选/不选</label></div>
</div>
</div>
</div>
<div class="am-g">
<form action="" class="form">
<div class="am-u-md-6 am-u-lg-4">
<div class="am-panel am-panel-default">
<div class="am-panel-hd">初学者系列</div>
<div class="am-panel-bd">
<label for="0" class="label"><input type="checkbox" name="" id="0" data-id="0" data="0x00000001">初学者/超级初学者</label>
</div>
</div>
</div>
<div class="am-u-md-6 am-u-lg-4">
<div class="am-panel am-panel-default">
<div class="am-panel-hd">剑士系列</div>
<div class="am-panel-bd">
<label for="11" class="label"><input type="checkbox" name="" id="11" data-id="1" data="0x00000002">剑士</label>
<label for="12" class="label"><input type="checkbox" name="" id="12" data-id="7" data="0x00000080">骑士</label>
<label for="13" class="label"><input type="checkbox" name="" id="13" data-id="14" data="0x00004000">十字军</label>
</div>
</div>
</div>
<div class="am-u-md-6 am-u-lg-4">
<div class="am-panel am-panel-default">
<div class="am-panel-hd">魔法师系列</div>
<div class="am-panel-bd">
<label for="21" class="label"><input type="checkbox" name="" id="21" data-id="2" data="0x00000004">魔法师</label>
<label for="22" class="label"><input type="checkbox" name="" id="22" data-id="9" data="0x00000200">巫师</label>
<label for="23" class="label"><input type="checkbox" name="" id="23" data-id="16" data="0x00010000">贤者</label>
</div>
</div>
</div>
<div class="am-u-md-6 am-u-lg-4">
<div class="am-panel am-panel-default">
<div class="am-panel-hd">弓箭手系列</div>
<div class="am-panel-bd">
<label for="31" class="label"><input type="checkbox" name="" id="31" data-id="3" data="0x00000008">弓箭手</label>
<label for="32" class="label"><input type="checkbox" name="" id="32" data-id="11" data="0x00000800">猎人</label>
<label for="33" class="label"><input type="checkbox" name="" id="33" data_id="19" data="0x00080000">诗人/舞娘</label>
</div>
</div>
</div>
<div class="am-u-md-6 am-u-lg-4">
<div class="am-panel am-panel-default">
<div class="am-panel-hd">服事系列</div>
<div class="am-panel-bd">
<label for="41" class="label"><input type="checkbox" name="" id="41" data-id="4" data="0x00000010">服事</label>
<label for="42" class="label"><input type="checkbox" name="" id="42" data-id="8" data="0x00000100">牧师</label>
<label for="43" class="label"><input type="checkbox" name="" id="43" data-id="15" data="0x00008000">武僧</label>
</div>
</div>
</div>
<div class="am-u-md-6 am-u-lg-4">
<div class="am-panel am-panel-default">
<div class="am-panel-hd">商人系列</div>
<div class="am-panel-bd">
<label for="51" class="label"><input type="checkbox" name="" id="51" data-id="5" data="0x00000020">商人</label>
<label for="52" class="label"><input type="checkbox" name="" id="52" data-id="10" data="0x00000400">铁匠</label>
<label for="53" class="label"><input type="checkbox" name="" id="53" data-id="18" data="0x00040000">炼金术师</label>
</div>
</div>
</div>
<div class="am-u-md-6 am-u-lg-4">
<div class="am-panel am-panel-default">
<div class="am-panel-hd">盗贼系列</div>
<div class="am-panel-bd">
<label for="61" class="label"><input type="checkbox" name="" id="61" data-id="6" data="0x00000040">盗贼</label>
<label for="62" class="label"><input type="checkbox" name="" id="62" data-id="12" data="0x00001000">刺客</label>
<label for="63" class="label"><input type="checkbox" name="" id="63" data-id="17" data="0x00020000">流氓</label>
</div>
</div>
</div>
<div class="am-u-md-6 am-u-lg-4">
<div class="am-panel am-panel-default">
<div class="am-panel-hd">跆拳系列</div>
<div class="am-panel-bd">
<label for="71" class="label"><input type="checkbox" name="" id="71" data-id="21" data="0x00200000">跆拳</label>
<label for="72" class="label"><input type="checkbox" name="" id="72" data-id="22" data="0x00400000">拳圣</label>
<label for="73" class="label"><input type="checkbox" name="" id="73" data-id="23" data="0x00800000">灵媒</label>
</div>
</div>
</div>
<div class="am-u-md-6 am-u-lg-4">
<div class="am-panel am-panel-default">
<div class="am-panel-hd">忍者系列</div>
<div class="am-panel-bd">
<label for="81" class="label"><input type="checkbox" name="" id="81" data-id="25" data="0x02000000">忍者</label>
<label for="82" class="label"><input type="checkbox" name="" id="82" data-id="29" data="0x20000000">日影/月影</label>
</div>
</div>
</div>
<div class=" am-u-md-6 am-u-lg-4 am-u-end">
<div class="am-panel am-panel-default">
<div class="am-panel-hd">枪手系列</div>
<div class="am-panel-bd">
<label for="91" class="label"><input type="checkbox" name="" id="91" data-id="24" data="0x01000000">神枪手</label>
<label for="92" class="label"><input type="checkbox" name="" id="92" data-id="30" data="0x40000000">变革者/反叛者</label>
</div>
</div>
</div>
</form>
</div>
<!-- js -->
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.amazeui.org/amazeui/2.5.2/js/amazeui.min.js"></script>
<script>
var i = 0;
$(function(){
$('.label>input').click(function(){
getCode(i);
});
$('button#search').click(function(){
tojob();
})
// 全选/不选
$('#all').click(function(){
if($(this).prop('checked')){
$('form input').prop('checked',true);
getCode(i,1);
}else{
$('form input').prop('checked',false);
getCode(i);
}
});
})
function tojob(){
var jobstr = $('#job').val();
if (jobstr==undefined || jobstr=='') alert('请填写职业代码');
$('.label>input').each(function(k){
var datastr = $(this).attr('data');
if(Number(jobstr) & parseInt(datastr,16)){
$(this).prop('checked',true);
}
});
}
function getCode(i,t){
$('.label>input:checked').each(function(k){
var datastr = $(this).attr('data');
i = Number(i)+parseInt(datastr,16);
});
if(i==0){
$('#job').val('');
}else{
if(t==1)
$('#job').val('0xFFFFFFFF');
else
$('#job').val(toHex(i));
}
}
function toHex(num){
var s = num.toString(16);
while (s.length < 8)
s = "0" + s;
return '0x'+s.toUpperCase();
}
</script>
</body>
</html>
1
https://gitee.com/sw1981/RAResource.git
git@gitee.com:sw1981/RAResource.git
sw1981
RAResource
RAResource
master

搜索帮助