HTML+CSS+JS实现统计图表（专业考研就业统计）附源码

编程入门行业动态更新时间:2024-10-17 21:17:07

HTML+CSS+JS实现统计<a href=https://www.elefans.com/category/jswz/34/1770092.html style= 图表（专业考研就业统计）附源码"/>

HTML+CSS+JS实现统计图表（专业考研就业统计）附源码

首先，上效果💨

(小白无痛畅享版🎬）

🦷完整代码如下：

biao.html

<!DOCTYPE html>
<html class="x-admin-sm">
<head><meta charset="UTF-8"><title>欢迎页面-X-admin2.2</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /><link rel="stylesheet" href="./css/font.css"><link rel="stylesheet" href="./css/xadmin.css"><script type="text/javascript" src="./js/xadmin.js"></script><!--[if lt IE 9]><script src=".min.js"></script><script src=".js/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body><div class="layui-fluid"><div class="layui-row layui-col-space15"></style> <div class="layui-col-sm12 layui-col-md6"><div class="layui-card"><div class="layui-card-header">山东省近七年考研报名人数</div><div class="layui-card-body" style="min-height: 280px;"><div id="main1" class="layui-col-sm12" style="height: 300px;"></div></div></div></div><div class="layui-col-sm12 layui-col-md6"><div class="layui-card"><div class="layui-card-header">一次性就业率情况分析</div><div class="layui-card-body" style="min-height: 280px;"><div id="main2" class="layui-col-sm12" style="height: 300px;"></div></div></div></div><div class="layui-col-sm12 layui-col-md6"><div class="layui-card"><div class="layui-card-header">GIS毕业生所从事的工作性质</div><div class="layui-card-body" style="min-height: 280px;"><div id="main3" class="layui-col-sm12" style="height: 300px;"></div></div></div></div><div class="layui-col-sm12 layui-col-md6"><div class="layui-card"><div class="layui-card-header">2022年GIS毕业生女生占比</div><div class="layui-card-body" style="min-height: 280px;"><div id="main4" class="layui-col-sm12" style="height: 300px;"></div></div></div></div></div></div></div><script src=".2.1-rc1/echarts.min.js"></script><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main1'));// 指定图表的配置项和数据var option = {grid: {top: '5%',right: '1%',left: '1%',bottom: '10%',containLabel: true},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023']},yAxis: {type: 'value'},series: [{name: '报考人数（万人）',data: [18.7, 21.38, 25.45, 31.32, 34.8, 41.6, 44.1152],type: 'line',smooth: true}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main2'));// 指定图表的配置项和数据var option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},grid: {top: '5%',right: '2%',left: '1%',bottom: '10%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,data: ['2006', '2007', '2008', '2009', '2010', '2011', '2012']}],yAxis: [{type: 'value'}],series: [{name: '一次性录取的人数',type: 'line',areaStyle: { normal: {} },data: [17, 22, 21, 21, 36, 41, 24],smooth: true},{name: '一次性就业的人数',type: 'line',areaStyle: { normal: {} },data: [17, 21, 16, 21, 20, 22, 23],smooth: true,}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main3'));// 指定图表的配置项和数据var option = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : ({d}%)"},legend: {orient: 'vertical',left: 'left',data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']},series: [{name: '访问来源',type: 'pie',radius: '55%',center: ['50%', '60%'],data: [{ value: 34, name: '软件研发' },{ value: 14, name: '项目开发' },{ value: 19, name: '技术支持' },{ value: 1, name: '软件测试' },{ value: 11, name: '数据处理' },{ value: 4, name: '外业测绘' },{ value: 3, name: '市场' },{ value: 5, name: '销售' },{ value: 5, name: '应用' },{ value: 4, name: '其他' }],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main4'));// 指定图表的配置项和数据var option = {tooltip: {formatter: "{a} <br/>{b} : {c}%"},series: [{name: '2022GIS毕业生女生占比',type: 'gauge',detail: { formatter: '{value}%' },data: [{ value: 36, name: '女生' }]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script><script>var _hmt = _hmt || [];(function () {var hm = document.createElement("script");hm.src = ".js?b393d153aeb26b46e9431fabaf0f6190";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script>
</body>
</html>

✨然后，还需要的就是.css文件（font.css|xadmin.css）和.js文件（xadmin.js）。

font.css****完整代码

@font-face {font-family: 'iconfont';src: url('../fonts/iconfont.eot');src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),url('../fonts/iconfont.woff') format('woff'),url('../fonts/iconfont.ttf') format('truetype'),url('../fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;
}

xadmin.css

@charset "utf-8";
@import url(../css/layui.css);
*{margin: 0px;padding: 0px;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a{text-decoration: none;
}
html{width: 100%;height: 100%;overflow-x:hidden; overflow-y:auto;
}
body{width: 100%;min-height: 100%;background: #f1f1f1;/*background: #fff;*/
}
.x-red{color: red;
}.layui-form-switch{margin-top: 0px;
}
.layui-input:focus, .layui-textarea:focus {border-color: #189f92!important;
}.layui-fluid{padding:15px;
}
.x-nav{padding: 0 20px;position: relative;z-index: 99;border-bottom: 1px solid #e5e5e5;line-height: 39px;height: 39px;overflow: hidden;background: #fff;
}
.page{text-align: center;}
.page a{display: inline-block;background: #fff;color: #888;padding: 5px;min-width: 15px;border: 1px solid #E2E2E2;}
.page span{display: inline-block;padding: 5px;min-width: 15px;border: 1px solid #E2E2E2;
}
.page span.current{display: inline-block;background: #009688;color: #fff;padding: 5px;min-width: 15px;border: 1px solid #009688;
}
.page .pagination li{display: inline-block;margin-right: 5px;text-align: center;
}
.page .pagination li.active span{background: #009688;color: #fff;border: 1px solid #009688;}/*登录样式*/
/*头部*/
.container{width: 100%;height: 45px;background-color: #222;
}
.container a,.layui-nav .layui-nav-item a{color: #fff;
}
.container .logo a{background-color: rgba(0,0,0,0);
}
.container .logo a{float: left;font-size: 18px;padding-left: 20px;line-height: 45px;width: 200px;
}
.container .right{background-color:rgba(0,0,0,0);float: right;}
.container .left_open{height: 45px;float: left;margin-left: 10px;
}
.container .left_open i{display: block;background: rgba(255,255,255,0.1);width: 32px;height: 32px;line-height: 32px;border-radius: 3px;text-align: center;margin-top: 7px;cursor: pointer;
}
.container .left_open i:hover{background: rgba(255,255,255,0.3);
}.container .left{background-color:rgba(0,0,0,0);float: left;}
.container .layui-nav-item{line-height: 45px;
}
.container .layui-nav-more{top: 20px;
}
.container .layui-nav-child{top: 50px;
}
.container .layui-nav-child i{margin-right: 10px;
}
.layui-nav .layui-nav-item a{cursor: pointer;
}
.layui-nav .layui-nav-child a{color: #333;cursor: pointer;
}
.left-nav{position: absolute;top: 45px;bottom: 0px;/*bottom: 42px;*/left: 0;z-index: 2;padding-top: 10px;background-color: #EEEEEE;width: 220px;max-width: 220px;overflow: auto;overflow-x:hidden;overflow: hidden;/*width: 0px;*/
}
#side-nav{width: 220px;
}.left-nav #nav li:hover > a{/*color: blue;*/
}
.left-nav #nav .current{background-color: rgba(0, 0, 0, 0.3);
}
.left-nav #nav li a{font-size: 14px;padding: 10px 15px 10px 15px;display: block;cursor: pointer;border-left: 4px solid transparent;transition: all 0.3s;
}
.left-nav a:hover{background: #009688 !important;color: #fff;border-color:  #04564e !important;
}
.left-nav a.active{background: #009688 !important;color: #fff;border-color:  #04564e !important;
}
.left-nav #nav li a cite{font-size: 14px;
}.left-nav #nav li .sub-menu{display: none;
}
.left-nav #nav li .opened{display: block;
}
.left-nav #nav li .opened:hover{/*background: #fff ;*/
}
.left-nav #nav li .opened .current{}
.left-nav #nav li .sub-menu li:hover{/*color: blue;*//*background: #fff ;*/
}
.left-nav #nav li .sub-menu li a{padding: 12px 15px 12px 30px;font-size: 14px;cursor: pointer;
}
.left-nav #nav li .sub-menu li .sub-menu li a{padding-left: 45px;
}
/*.left-nav #nav li .sub-menu li a:hover{color: #148cf1;
}*/
.left-nav #nav li .sub-menu li a i{font-size: 12px;
}
.left-nav #nav li a i{padding-right: 10px;line-height: 14px;
}
.left-nav #nav li .nav_right{float: right;font-size: 16px;
}
.x-slide_left {width: 17px;height: 61px;background: url(../images/icon.png) 0 0 no-repeat;position: absolute;top: 200px;left: 220px;cursor: pointer;z-index: 3;
}
.page-content{position: absolute;top: 45px;right: 0;/*bottom: 42px;*/bottom: 0px;left: 220px;overflow: hidden;z-index: 1;
}
.page-content-bg{position: absolute;top: 45px;right: 0;/*bottom: 42px;*/bottom: 0px;left: 220px;background: rgba(0,0,0,0.5);overflow: hidden;z-index: 100;display: none;
}.page-content .tab{height: 100%;width: 100%;/*background: #EFEEF0;*/margin: 0px;
}
.page-content .layui-tab-title{/*padding-top: 5px;*/height: 35px;background: #EFEEF0 ;position: relative;z-index: 100;
}
.page-content .layui-tab-title li.home i{padding-right: 5px;
}
.page-content .layui-tab-title li.home .layui-tab-close{display: none;
}
.page-content .layui-tab-title li{line-height: 35px;
}
.page-content .layui-tab-title .layui-this:after{height: 36px;
}
.page-content .layui-tab-title li .layui-tab-close{border-radius: 50%;
}
.page-content .layui-tab-title .layui-this{background: #fff ;
}
.page-content .layui-tab-bar{height:34px;line-height: 35px;
}
.page-content .layui-tab-content{position: absolute;top: 36px;bottom: 0px;width: 100%;padding: 0px;overflow: hidden;
}
.page-content .layui-tab-content .layui-tab-item{width: 100%;height: 100%;}
.page-content .layui-tab-content .layui-tab-item iframe{width: 100%;height: 100%;}
.x-admin-carousel,.layui-carousel,.x-admin-carousel>[carousel-item]>* {background-color:#fff
}.x-admin-backlog .x-admin-backlog-body {display:block;padding:10px 15px;background-color:#f8f8f8;color:#999;border-radius:2px;transition:all .3s;-webkit-transition:all .3s
}
.x-admin-backlog-body h3 {padding-bottom:10px;font-size:12px
}
.x-admin-backlog-body p cite {font-style:normal;font-size:30px;font-weight:300;color:#009688
}
.x-admin-backlog-body:hover {background-color:#CFCFCF;color:#888
}.layui-table td, .layui-table th{min-width: 80px;
}table th, table td {word-break: break-all;
}/*404页面样式*/
.fly-panel {margin-bottom: 15px;border-radius: 2px;/*background-color: #fff;*/box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}
.fly-none {min-height: 600px;text-align: center;padding-top: 50px;color: #999;
}
.fly-none .layui-icon {line-height: 300px;font-size: 300px;color: #393D49;
}
.fly-none p {margin-top: 50px;padding: 0 15px;font-size: 20px;color: #999;font-weight: 300;
}
#tab_right{display: none;width: 80px;position: absolute;top: 35px;left: 0px;
}
#tab_right dl{top: 0px;
}
#tab_show{position: absolute;top: 36px;bottom: 0px;width: 100%;background:rgb(255, 255, 255,0);padding: 0px;overflow: hidden;display: none;
}@media screen and (max-width: 768px){.fast-add{display: none;}.layui-nav .to-index{display: none;}.container .logo a{width: 140px;}.container .left_open {/*float: right;*/}.left-nav{width: 60px;}.left-nav #nav li a i{font-size: 18px;}.left-nav cite,.left-nav .nav_right{display: none;}.page-content{left: 60px;}.page-content .layui-tab-content .layui-tab-item{-webkit-overflow-scrolling: touch; overflow-y: scroll; }.x-so input.layui-input{width: 100%;margin: 10px;}
}/*精细版样式*/.x-admin-sm{font-size: 12px;
}
.x-admin-sm body{font-size: 12px;
}
/*登录页面样式*/
.x-admin-sm .login input[type=submit],.x-admin-sm .login input[type=button]{font-size: 14px;
}
.x-admin-sm .login input[type=text],
.x-admin-sm .login input[type=file],
.x-admin-sm .login input[type=password],
.x-admin-sm .login input[type=email], .x-admin-sm select {font-size: 12px;
}
.x-admin-sm .login .message{font-size: 14px;
}.x-admin-sm .layui-table td, .x-admin-sm .layui-table th{font-size: 12px;
}
.x-admin-sm .layui-elem-field legend{font-size: 18px;
}.x-admin-sm .x-admin-backlog-body p cite{font-size: 24px;
}
.x-admin-sm .left-nav #nav li a cite{font-size: 12px;
}
.x-admin-sm .iconfont{font-size: 14px;
}
.x-admin-sm .layui-tab-title li{font-size: 12px;
}
.x-admin-sm .layui-icon{font-size: 14px;
}
.x-admin-sm .layui-nav *{font-size: 12px;
}
.x-admin-sm  .layui-breadcrumb>*{font-size: 12px; 
}
.x-admin-sm  .layui-btn,.x-admin-sm .layui-btn-xs,.x-admin-sm .layui-btn-sm{font-size: 12px;
}.x-admin-sm .layui-laydate{font-size: 12px;
}
.x-admin-sm  .layui-btn{height: 30px;line-height: 30px;padding: 0 10px;
}.x-admin-sm .layui-btn-lg{height: 38px;line-height: 38px;padding: 0 18px;font-size: 14px;
}
.x-admin-sm .layui-layer-title,.x-admin-sm .layui-layer-dialog .layui-layer-content{font-size: 12px;
}
.x-admin-sm .layui-input,.x-admin-sm .layui-select,.x-admin-sm .layui-textarea{height: 30px;
}.x-admin-sm .layui-form-pane .layui-form-label{height: 30px;line-height: 14px;
}
.x-admin-sm .layui-form-checkbox span{font-size: 12px;
}
.x-admin-sm .fly-none .layui-icon {line-height: 300px;font-size: 300px;color: #393D49;
}

xadmin.js

;!function (win) {"use strict";var doc = document,Xadmin = function(){this.v = '2.2'; //版本号}Xadmin.prototype.init = function() {var tab_list = this.get_data();for(var i in tab_list){this.add_lay_tab(tab_list[i].title,tab_list[i].url,i);}element.tabChange('xbs_tab', i);};/*** [end 执行结束要做的]* @return {[type]} [description]*/Xadmin.prototype.end = function() {var cate_list = this.get_cate_data();for(var i in cate_list){if(cate_list[i]!=null){$('.left-nav #nav li').eq(cate_list[i]).click();}}};Xadmin.prototype.add_tab = function (title,url,is_refresh) {var id = md5(url);//md5每个url//重复点击for (var i = 0; i <$('.x-iframe').length; i++) {if($('.x-iframe').eq(i).attr('tab-id')==id){element.tabChange('xbs_tab', id);if(is_refresh)$('.x-iframe').eq(i).attr("src",$('.x-iframe').eq(i).attr('src'));return;}};this.add_lay_tab(title,url,id);this.set_data(title,url,id);element.tabChange('xbs_tab', id);}Xadmin.prototype.del_tab = function (id) {if(id){console.log(88);}else{var id = $(window.frameElement).attr('tab-id');parent.element.tabDelete('xbs_tab', id);}}Xadmin.prototype.add_lay_tab = function(title,url,id) {element.tabAdd('xbs_tab', {title: title ,content: '<iframe tab-id="'+id+'" frameborder="0" src="'+url+'" scrolling="yes" class="x-iframe"></iframe>',id: id})}/*** [open 打开弹出层]* @param  {[type]}  title [弹出层标题]* @param  {[type]}  url   [弹出层地址]* @param  {[type]}  w     [宽]* @param  {[type]}  h     [高]* @param  {Boolean} full  [全屏]* @return {[type]}        [description]*/Xadmin.prototype.open = function (title,url,w,h,full) {if (title == null || title == '') {var title=false;};if (url == null || url == '') {var url="404.html";};if (w == null || w == '') {var w=($(window).width()*0.9);};if (h == null || h == '') {var h=($(window).height() - 50);};var index = layer.open({type: 2,area: [w+'px', h +'px'],fix: false, //不固定maxmin: true,shadeClose: true,shade:0.4,title: title,content: url});if(full){layer.full(index); }}/*** [close 关闭弹出层]* @return {[type]} [description]*/Xadmin.prototype.close = function() {var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);};/*** [close 关闭弹出层父窗口关闭]* @return {[type]} [description]*/Xadmin.prototype.father_reload = function() {parent.location.reload();};/*** [get_data 获取所有项]* @return {[type]} [description]*/Xadmin.prototype.get_data = function () {if(typeof is_remember!="undefined")return false;return layui.data('tab_list')}/*** [set_data 增加某一项]* @param {[type]} id [description]*/Xadmin.prototype.set_data = function(title,url,id) {if(typeof is_remember!="undefined")return false;layui.data('tab_list', {key: id,value: {title:title,url:url}});};/*** [get_data 获取所有项]* @return {[type]} [description]*/Xadmin.prototype.get_cate_data = function () {if(typeof is_remember!="undefined")return false;return layui.data('cate')}/*** [set_data 增加某一项]* @param {[type]} id [description]*/Xadmin.prototype.set_cate_data = function(data) {if(typeof is_remember!="undefined")return false;layui.data('cate', data);};/*** [del_data 删除某一项]* @param  {[type]} id [description]* @return {[type]}    [description]*/Xadmin.prototype.del_data = function(id) {if(typeof is_remember!="undefined")return false;if(typeof id!="undefined"){layui.data('tab_list', {key: id,remove: true});}else{layui.data('tab_list',null);}};/*** [del_other_data 删除其它]* @param  {[type]} id [description]* @return {[type]}    [description]*/Xadmin.prototype.del_other_data = function(id) {if(typeof is_remember!="undefined")return false;var tab_list = this.get_data();layui.data('tab_list',null);layui.data('tab_list', {key: id,value: tab_list[id]});};win.xadmin = new Xadmin();}(window);layui.use(['layer','element','jquery'],function() {layer = layui.layer;element = layui.element;$ = layui.jquery;// 打开页面初始xadmin.init();//关闭tab清除记忆element.on('tabDelete(xbs_tab)', function(data){var id  = $(this).parent().attr('lay-id');xadmin.del_data(id);});//左侧菜单$('.left-nav #nav').on('click', 'li', function(event) {if($(this).parent().attr('id')=='nav'){xadmin.set_cate_data({key:'f1',value:$('.left-nav #nav li').index($(this))})xadmin.set_cate_data({key:'f2',value:null})xadmin.set_cate_data({key:'f3',value:null})}if($(this).parent().parent().parent().attr('id')=='nav'){xadmin.set_cate_data({key:'f2',value:$('.left-nav #nav li').index($(this))})xadmin.set_cate_data({key:'f3',value:null})}if($(this).parent().parent().parent().parent().parent().attr('id')=='nav'){xadmin.set_cate_data({key:'f3',value:$('.left-nav #nav li').index($(this))})}if($('.left-nav').css('width')=='60px'){$('.left-nav').animate({width: '220px'}, 100);$('.page-content').animate({left: '220px'}, 100);$('.left-nav i').css('font-size','14px');$('.left-nav cite,.left-nav .nav_right').show();}if($(window).width()<768){$('.page-content-bg').show();}$('.left-nav').find('a').removeClass('active');$(this).children('a').addClass('active');if($(this).children('.sub-menu').length){if($(this).hasClass('open')){$(this).removeClass('open');$(this).find('.nav_right').html('&#xe697;');$(this).children('.sub-menu').stop(true,true).slideUp();$(this).siblings().children('.sub-menu').slideUp();}else{$(this).addClass('open');$(this).children('a').find('.nav_right').html('&#xe6a6;');$(this).children('.sub-menu').stop(true,true).slideDown();$(this).siblings().children('.sub-menu').stop(true,true).slideUp();$(this).siblings().find('.nav_right').html('&#xe697;');$(this).siblings().removeClass('open');}}event.stopPropagation(); })var left_tips_index = null;$('.left-nav #nav').on('mouseenter', '.left-nav-li', function(event) {if($('.left-nav').css('width')!='220px'){var tips  = $(this).attr('lay-tips');left_tips_index = layer.tips(tips, $(this));}})$('.left-nav #nav').on('mouseout', '.left-nav-li', function(event) {layer.close(left_tips_index); })// 隐藏左侧$('.container .left_open i').click(function(event) {if($('.left-nav').css('width')=='220px'){$('.left-nav .open').click();$('.left-nav i').css('font-size','18px');$('.left-nav').animate({width: '60px'}, 100);$('.left-nav cite,.left-nav .nav_right').hide();$('.page-content').animate({left: '60px'}, 100);$('.page-content-bg').hide();}else{$('.left-nav').animate({width: '220px'}, 100);$('.page-content').animate({left: '220px'}, 100);$('.left-nav i').css('font-size','14px');$('.left-nav cite,.left-nav .nav_right').show();if($(window).width()<768){$('.page-content-bg').show();}}});$('.page-content-bg').click(function(event) {$('.left-nav .open').click();$('.left-nav i').css('font-size','18px');$('.left-nav').animate({width: '60px'}, 100);$('.left-nav cite,.left-nav .nav_right').hide();$('.page-content').animate({left: '60px'}, 100);$(this).hide();});$(".layui-tab-title").on('contextmenu', 'li', function(event) {var tab_left = $(this).position().left;var tab_width = $(this).width();var left = $(this).position().top;var this_index = $(this).attr('lay-id');$('#tab_right').css({'left':tab_left+tab_width/2}).show().attr('lay-id',this_index);$('#tab_show').show();return false;});$('#tab_right').on('click', 'dd', function(event) {var data_type = $(this).attr('data-type');var lay_id = $(this).parents('#tab_right').attr('lay-id');if(data_type=='this'){$('.layui-tab-title li[lay-id='+lay_id+']').find('.layui-tab-close').click();}else if(data_type=='other'){$('.layui-tab-title li').eq(0).find('.layui-tab-close').remove();$('.layui-tab-title li[lay-id!='+lay_id+']').find('.layui-tab-close').click();}else if(data_type=='all'){$('.layui-tab-title li[lay-id]').find('.layui-tab-close').click();}$('#tab_right').hide();$('#tab_show').hide();})$('.page-content,#tab_show,.container,.left-nav').click(function(event) {$('#tab_right').hide();$('#tab_show').hide();});// 页面加载完要做的xadmin.end();
})
// md5-----------------------------------------------------------------------------------
/*
* Add integers, wrapping at 2^32. This uses 16-bit operations internally
* to work around bugs in some JS interpreters.
*/
function safeAdd (x, y) {
var lsw = (x & 0xffff) + (y & 0xffff)
var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
return (msw << 16) | (lsw & 0xffff)
}/*
* Bitwise rotate a 32-bit number to the left.
*/
function bitRotateLeft (num, cnt) {
return (num << cnt) | (num >>> (32 - cnt))
}/*
* These functions implement the four basic operations the algorithm uses.
*/
function md5cmn (q, a, b, x, s, t) {
return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b)
}
function md5ff (a, b, c, d, x, s, t) {
return md5cmn((b & c) | (~b & d), a, b, x, s, t)
}
function md5gg (a, b, c, d, x, s, t) {
return md5cmn((b & d) | (c & ~d), a, b, x, s, t)
}
function md5hh (a, b, c, d, x, s, t) {
return md5cmn(b ^ c ^ d, a, b, x, s, t)
}
function md5ii (a, b, c, d, x, s, t) {
return md5cmn(c ^ (b | ~d), a, b, x, s, t)
}/*
* Calculate the MD5 of an array of little-endian words, and a bit length.
*/
function binlMD5 (x, len) {
/* append padding */
x[len >> 5] |= 0x80 << (len % 32)
x[((len + 64) >>> 9 << 4) + 14] = lenvar i
var olda
var oldb
var oldc
var oldd
var a = 1732584193
var b = -271733879
var c = -1732584194
var d = 271733878for (i = 0; i < x.length; i += 16) {olda = aoldb = boldc = coldd = da = md5ff(a, b, c, d, x[i], 7, -680876936)d = md5ff(d, a, b, c, x[i + 1], 12, -389564586)c = md5ff(c, d, a, b, x[i + 2], 17, 606105819)b = md5ff(b, c, d, a, x[i + 3], 22, -1044525330)a = md5ff(a, b, c, d, x[i + 4], 7, -176418897)d = md5ff(d, a, b, c, x[i + 5], 12, 1200080426)c = md5ff(c, d, a, b, x[i + 6], 17, -1473231341)b = md5ff(b, c, d, a, x[i + 7], 22, -45705983)a = md5ff(a, b, c, d, x[i + 8], 7, 1770035416)d = md5ff(d, a, b, c, x[i + 9], 12, -1958414417)c = md5ff(c, d, a, b, x[i + 10], 17, -42063)b = md5ff(b, c, d, a, x[i + 11], 22, -1990404162)a = md5ff(a, b, c, d, x[i + 12], 7, 1804603682)d = md5ff(d, a, b, c, x[i + 13], 12, -40341101)c = md5ff(c, d, a, b, x[i + 14], 17, -1502002290)b = md5ff(b, c, d, a, x[i + 15], 22, 1236535329)a = md5gg(a, b, c, d, x[i + 1], 5, -165796510)d = md5gg(d, a, b, c, x[i + 6], 9, -1069501632)c = md5gg(c, d, a, b, x[i + 11], 14, 643717713)b = md5gg(b, c, d, a, x[i], 20, -373897302)a = md5gg(a, b, c, d, x[i + 5], 5, -701558691)d = md5gg(d, a, b, c, x[i + 10], 9, 38016083)c = md5gg(c, d, a, b, x[i + 15], 14, -660478335)b = md5gg(b, c, d, a, x[i + 4], 20, -405537848)a = md5gg(a, b, c, d, x[i + 9], 5, 568446438)d = md5gg(d, a, b, c, x[i + 14], 9, -1019803690)c = md5gg(c, d, a, b, x[i + 3], 14, -187363961)b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501)a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467)d = md5gg(d, a, b, c, x[i + 2], 9, -51403784)c = md5gg(c, d, a, b, x[i + 7], 14, 1735328473)b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734)a = md5hh(a, b, c, d, x[i + 5], 4, -378558)d = md5hh(d, a, b, c, x[i + 8], 11, -2022574463)c = md5hh(c, d, a, b, x[i + 11], 16, 1839030562)b = md5hh(b, c, d, a, x[i + 14], 23, -35309556)a = md5hh(a, b, c, d, x[i + 1], 4, -1530992060)d = md5hh(d, a, b, c, x[i + 4], 11, 1272893353)c = md5hh(c, d, a, b, x[i + 7], 16, -155497632)b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640)a = md5hh(a, b, c, d, x[i + 13], 4, 681279174)d = md5hh(d, a, b, c, x[i], 11, -358537222)c = md5hh(c, d, a, b, x[i + 3], 16, -722521979)b = md5hh(b, c, d, a, x[i + 6], 23, 76029189)a = md5hh(a, b, c, d, x[i + 9], 4, -640364487)d = md5hh(d, a, b, c, x[i + 12], 11, -421815835)c = md5hh(c, d, a, b, x[i + 15], 16, 530742520)b = md5hh(b, c, d, a, x[i + 2], 23, -995338651)a = md5ii(a, b, c, d, x[i], 6, -198630844)d = md5ii(d, a, b, c, x[i + 7], 10, 1126891415)c = md5ii(c, d, a, b, x[i + 14], 15, -1416354905)b = md5ii(b, c, d, a, x[i + 5], 21, -57434055)a = md5ii(a, b, c, d, x[i + 12], 6, 1700485571)d = md5ii(d, a, b, c, x[i + 3], 10, -1894986606)c = md5ii(c, d, a, b, x[i + 10], 15, -1051523)b = md5ii(b, c, d, a, x[i + 1], 21, -2054922799)a = md5ii(a, b, c, d, x[i + 8], 6, 1873313359)d = md5ii(d, a, b, c, x[i + 15], 10, -30611744)c = md5ii(c, d, a, b, x[i + 6], 15, -1560198380)b = md5ii(b, c, d, a, x[i + 13], 21, 1309151649)a = md5ii(a, b, c, d, x[i + 4], 6, -145523070)d = md5ii(d, a, b, c, x[i + 11], 10, -1120210379)c = md5ii(c, d, a, b, x[i + 2], 15, 718787259)b = md5ii(b, c, d, a, x[i + 9], 21, -343485551)a = safeAdd(a, olda)b = safeAdd(b, oldb)c = safeAdd(c, oldc)d = safeAdd(d, oldd)
}
return [a, b, c, d]
}/*
* Convert an array of little-endian words to a string
*/
function binl2rstr (input) {
var i
var output = ''
var length32 = input.length * 32
for (i = 0; i < length32; i += 8) {output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff)
}
return output
}/*
* Convert a raw string to an array of little-endian words
* Characters >255 have their high-byte silently ignored.
*/
function rstr2binl (input) {
var i
var output = []
output[(input.length >> 2) - 1] = undefined
for (i = 0; i < output.length; i += 1) {output[i] = 0
}
var length8 = input.length * 8
for (i = 0; i < length8; i += 8) {output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32)
}
return output
}/*
* Calculate the MD5 of a raw string
*/
function rstrMD5 (s) {
return binl2rstr(binlMD5(rstr2binl(s), s.length * 8))
}/*
* Calculate the HMAC-MD5, of a key and some data (raw strings)
*/
function rstrHMACMD5 (key, data) {
var i
var bkey = rstr2binl(key)
var ipad = []
var opad = []
var hash
ipad[15] = opad[15] = undefined
if (bkey.length > 16) {bkey = binlMD5(bkey, key.length * 8)
}
for (i = 0; i < 16; i += 1) {ipad[i] = bkey[i] ^ 0x36363636opad[i] = bkey[i] ^ 0x5c5c5c5c
}
hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8)
return binl2rstr(binlMD5(opad.concat(hash), 512 + 128))
}/*
* Convert a raw string to a hex string
*/
function rstr2hex (input) {
var hexTab = '0123456789abcdef'
var output = ''
var x
var i
for (i = 0; i < input.length; i += 1) {x = input.charCodeAt(i)output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f)
}
return output
}/*
* Encode a string as utf-8
*/
function str2rstrUTF8 (input) {
return unescape(encodeURIComponent(input))
}/*
* Take string arguments and return either raw or hex encoded strings
*/
function rawMD5 (s) {
return rstrMD5(str2rstrUTF8(s))
}
function hexMD5 (s) {
return rstr2hex(rawMD5(s))
}
function rawHMACMD5 (k, d) {
return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d))
}
function hexHMACMD5 (k, d) {
return rstr2hex(rawHMACMD5(k, d))
}function md5 (string, key, raw) {
if (!key) {if (!raw) {return hexMD5(string)}return rawMD5(string)
}
if (!raw) {return hexHMACMD5(key, string)
}
return rawHMACMD5(key, string)
}