通过SVG实现彩票数据走势图

最新推荐文章于 2021-08-05 10:56:58 发布

songanshu

最新推荐文章于 2021-08-05 10:56:58 发布

阅读量1.4k

点赞数 3

分类专栏：研发管理文章标签： svg 走势图

本文链接：https://blog.csdn.net/songanshu/article/details/102551200

版权

研发管理专栏收录该内容

12 篇文章 0 订阅

订阅专栏

主要通过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>

效果图：

songanshu

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
通过SVG实现彩票数据走势图

主要通过html、css、js、svg等实现了彩票的数据走势图，主要利用空闲时间学习了下，请勿作为他用！svg.js 下载:https://download.csdn.net/download/songanshu/11863230<!DOCTYPE html><html> <head> <meta charset="utf-8"&gt...
复制链接

扫一扫