主要通过html、css、js、svg等实现了彩票的数据走势图,主要利用空闲时间学习了下,请勿作为他用!svg.js 下载:
https://download.csdn.net/download/songanshu/11863230
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta content="telephone=no" name="format-detection" />
<title>開獎數據簡報</title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input,a,span {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
box-sizing: border-box;
}
html,body{
height: 100%;
width: 100%;
}
h1, h2 {
font-weight: normal;
}
button{ outline:none; }
ul {
list-style-type: none;
padding: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
display: block;
}
*{
-webkit-overflow-scrolling: touch;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button {
border:none;
}
/* custom */
a {
color: #7e8c8d;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
li {
list-style: none;
}
/* CSS Document */
body {font-family: "微软雅黑","宋体","华文细黑","STHeiti","Microsoft YaHei";font-size: 14px;}
ul,ol{list-style:none}
img{max-width:100%;border:0}
input{outline:none}
input[type="number"]{-moz-appearance:textfield;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{-webkit-appearance: none !important;margin: 0; }
a,a:link,a:visited,a:hover,a:active{text-decoration:none;}
</style>
<script>
! function(n) {
var e = n.document,
t = e.documentElement,
i = 150,
d = i / 100,
o = "orientationchange" in n ? "orientationchange" : "resize",
a = function() {
var n = t.clientWidth || 320;
n > 150 && (n = 150), t.style.fontSize = 75 / d + "px"
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
}(window);
</script>
<style>
.tableSvg{
position: relative;
}
table {
position: relative;
border-spacing: 0;
border-collapse: collapse;
}
table {
background-color: transparent;
}
.table {
width: 100%;
max-width: 100%;
}
.table>tbody>tr>{
text-align: center;
}
.table>tbody>tr>td {
position: relative;
padding: 8px 0;
line-height: 1.42857143;
vertical-align: top;
font-size: 0.3rem;
color: #333;
text-align: center;
min-width: 0.3rem;
}
.table>tbody>tr>td:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #ddd;
}
.table>tbody>tr>td>.ball_9{
display: inline-block;
width: 0.42rem;
height: 0.42rem;
border-radius: 999px;
background-color: #E9310A;
color: #fff;
text-align: center;
position: relative;
z-index: 2;
}
.table>tbody>tr>td>.ball_8{
display: inline-block;
width: 0.42rem;
height: 0.42rem;
border-radius: 999px;
background-color: #2472E2;
color: #fff;
text-align: center;
position: relative;
z-index: 2;
}
.table>tbody>tr>td>.ball_7{
display: inline-block;
width: 0.42rem;
height: 0.42rem;
border-radius: 999px;
background-color: #FB4F18;
color: #fff;
text-align: center;
position: relative;
z-index: 2;
}
.chart_svg{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="tableSvg" id="tableSvg">
<table class="table" id="table">
</table>
<div class="chart_svg" id="chart_svg"></div>
</div>
<script type="text/javascript" src="../../js/svg.js"></script>
<script>
var dsList = decodeURI(request('dsList'));//数据格式:[單,雙,單,雙,單,……]
var dxList = decodeURI(request('dxList'));//数据格式:[大,小,大,小,小,大,……]
var numList = decodeURI(request('numList'));//数据格式:[5,1,2,8,7,4,3]
var setions = decodeURI(request('sectionList'));//[//数据格式:[第201910141625期,第201910141624期,第201910141623期,第201910141622期,第201910141621期,……]]
var tabBig=dxList.split(",");
var tabDs=dsList.split(",");;
var tabArr=numList.split(",");
var sectionList=setions.split(",");
var tab='';
for(var t=0;t<tabArr.length;t++){
tab+='<tr>' +
' <td style="width:24%">第'+sectionList[t]+'期</td>' +
' <td style="width:6%">'+tdSpan(tabBig[t],'大',7)+'</td>' +
' <td style="width:6%">'+tdSpan(tabBig[t],'小',7)+'</td>' +
' <td style="width:6%">'+tdSpan(tabDs[t],'單',8)+'</td>' +
' <td style="width:6%">'+tdSpan(tabDs[t],'雙',8)+'</td>' +
' <td style="width:6%">'+tdSpan(tabArr[t],0,9)+'</td>' +
' <td style="width:6%">'+tdSpan(tabArr[t],1,9)+'</td>' +
' <td style="width:6%">'+tdSpan(tabArr[t],2,9)+'</td>' +
' <td style="width:6%">'+tdSpan(tabArr[t],3,9)+'</td>' +
' <td style="width:6%">'+tdSpan(tabArr[t],4,9)+'</td>' +
' <td style="width:6%">'+tdSpan(tabArr[t],5,9)+'</td>' +
' <td style="width:6%">'+tdSpan(tabArr[t],6,9)+'</td>' +
' <td style="width:6%">'+tdSpan(tabArr[t],7,9)+'</td>' +
' <td style="width:6%">'+tdSpan(tabArr[t],8,9)+'</td>' +
' <td style="width:6%">'+tdSpan(tabArr[t],9,9)+'</td>' +
' </tr>';
}
document.getElementById('table').innerHTML=tab;
window.onload = function(){
svgTable()
}
function svgTable() {
var draw = SVG('chart_svg').size(document.getElementById('tableSvg').offsetWidth, document.getElementById('tableSvg').offsetHeight);
var arr9=[];
var ball_9Arr=document.getElementsByClassName('ball_9');
for(var i=0;i<ball_9Arr.length;i++){
var arrb=[];
arrb.push(getPosition(ball_9Arr[i],'left'));
arrb.push(getPosition(ball_9Arr[i],'top'));
arr9.push(arrb);
}
var arr8=[];
var ball_8Arr=document.getElementsByClassName('ball_8');
for(var i=0;i<ball_8Arr.length;i++){
var arrb=[];
arrb.push(getPosition(ball_8Arr[i],'left'));
arrb.push(getPosition(ball_8Arr[i],'top'));
arr8.push(arrb);
}
var arr7=[];
var ball_7Arr=document.getElementsByClassName('ball_7');
for(var i=0;i<ball_7Arr.length;i++){
var arrb=[];
arrb.push(getPosition(ball_7Arr[i],'left'));
arrb.push(getPosition(ball_7Arr[i],'top'));
arr7.push(arrb);
}
draw.polyline(arr9).fill('none').stroke({ width: 1, color: '#E9310A' });
draw.polyline(arr8).fill('none').stroke({ width: 1, color: '#2472E2' });
draw.polyline(arr7).fill('none').stroke({ width: 1, color: '#FB4F18' });
}
function tdSpan(val,ele,type) {
if(type==7){
if(val==ele){
return '<span class="ball_7">'+ele+'</span>'
}else{
return ele
}
}else if(type==8){
if(val==ele){
return '<span class="ball_8">'+ele+'</span>'
}else{
return ele
}
}else{
if(val==ele){
return '<span class="ball_9">'+ele+'</span>'
}else{
return ele
}
}
}
function getPosition(element, name){
name = name.toLowerCase().replace("left", "Left").replace("top", "Top");
var offset = 'offset' + name;
var offsetWH = name=='Left'?'offsetWidth':'offsetHeight';
var actualLeft = element[offset];
var current = element.offsetParent;
if(current=='table#table.table'){current=null;}
while (current !== null){
actualLeft += current[offset];
current = current.offsetParent;
}
return actualLeft+(element[offsetWH]/2);
}
function request(key) {
var url = location.search; //获取url中"?"符后的字串
var theRequest = {};
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest[key] || null;
}
</script>
</body>
</html>
效果图: