1 Star 0 Fork 0

ZZES_狂龙治中/stockDatas

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.html 3.88 KB
一键复制 编辑 原始数据 按行查看 历史
ZZES_狂龙治中 提交于 2020-02-06 15:45 . fix: 年份显示错误修改
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A股历年数据查看</title>
<style type="text/css">
body {
background: #000;
}
#container {
max-height: 800px;
height: 75vh;
}
/* Conflict with Bootstrap, not needed after v7.0.1 */
.highcharts-bindings-wrapper * {
box-sizing: content-box;
}
.hide {
display: none;
}
.month-chart {
margin-top: 20px;
}
.tab {
margin: 0;
padding: 0;
padding-top: 40px;
list-style: none;
}
.tab:after {
content: '';
clear: both;
display: block;
}
.tab li {
margin-right: 10px;
float: left;
width: 80px;
height: 40px;
line-height: 40px;
color: #333;
text-align: center;
background: #dfdfdf;
cursor: pointer;
transition: all .3s ease;
}
.tab li.active,
.tab li:hover {
color: #fff;
font-weight: bolder;
background-image: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);
}
</style>
<link rel="stylesheet" type="text/css" href="./code/css/annotations/popup.css">
</head>
<body>
<div id="container" class="chart"></div>
<ul class="tab">
<li class="active" id="js-month-1" onclick="tabSelect(1)">1月集合</li>
<li id="js-month-2" onclick="tabSelect(2)">2月集合</li>
<li id="js-month-3" onclick="tabSelect(3)">3月集合</li>
<li id="js-month-4" onclick="tabSelect(4)">4月集合</li>
<li id="js-month-5" onclick="tabSelect(5)">5月集合</li>
<li id="js-month-6" onclick="tabSelect(6)">6月集合</li>
<li id="js-month-7" onclick="tabSelect(7)">7月集合</li>
<li id="js-month-8" onclick="tabSelect(8)">8月集合</li>
<li id="js-month-9" onclick="tabSelect(9)">9月集合</li>
<li id="js-month-10" onclick="tabSelect(10)">10月集合</li>
<li id="js-month-11" onclick="tabSelect(11)">11月集合</li>
<li id="js-month-12" onclick="tabSelect(12)">12月集合</li>
</ul>
<div class="block">
<div class="month-chart" id="m1"></div>
<div class="month-chart hide" id="m2"></div>
<div class="month-chart hide" id="m3"></div>
<div class="month-chart hide" id="m4"></div>
<div class="month-chart hide" id="m5"></div>
<div class="month-chart hide" id="m6"></div>
<div class="month-chart hide" id="m7"></div>
<div class="month-chart hide" id="m8"></div>
<div class="month-chart hide" id="m9"></div>
<div class="month-chart hide" id="m10"></div>
<div class="month-chart hide" id="m11"></div>
<div class="month-chart hide" id="m12"></div>
</div>
<script src="./code/highstock.js"></script>
<script src="./code/modules/data.js"></script>
<script src="./code/indicators/indicators-all.js"></script>
<script src="./code/modules/drag-panes.js"></script>
<script src="./code/modules/annotations-advanced.js"></script>
<script src="./code/modules/price-indicator.js"></script>
<script src="./code/modules/full-screen.js"></script>
<script src="./code/modules/exporting.js"></script>
<script src="./code/highcharts-zh_CN.js"></script>
<script src="./code/themes/dark-unica.js"></script>
<script src="./data.js"></script>
<script src="./chartinit.js"></script>
<script type="text/javascript">
function tabSelect(month) {
var monthCharts = document.querySelectorAll('.month-chart')
var activeSelects = document.querySelector('li.active')
if (activeSelects) activeSelects.classList.remove('active')
document.querySelector('#js-month-' + month).classList.add('active')
monthCharts.forEach(function (v) {
if (!v.classList.contains('hide')) {
v.classList.add('hide')
}
})
document.querySelector('#m' + month).classList.remove('hide')
}
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/klren/stockDatas.git
git@gitee.com:klren/stockDatas.git
klren
stockDatas
stockDatas
master

搜索帮助