<!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>基于SVG.JS的彩票开奖折线图</title>
<style>
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
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%;
}
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 = 750,
d = i / 100,
o = "orientationchange" in n ? "orientationchange" : "resize",
a = function() {
var n = t.clientWidth || 320;
n > 750 && (n = 750), t.style.fontSize = n / 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: #ff0000;
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">
<!-- <tr>
<td>002期</td>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td><span class="ball_9">5</span></td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>-->
</table>
<div class="chart_svg" id="chart_svg"></div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
<script>
var tabArr=[1,5,8,5,3,7,5,9,1,7,5,3,2,6,4,9,5,7];
var tab='';
for(var t=0;t<tabArr.length;t++){
tab+='<tr>' +
' <td>'+(tabArr.length-t)+'期</td>' +
' <td>'+tdSpan(tabArr[t],0)+'</td>' +
' <td>'+tdSpan(tabArr[t],1)+'</td>' +
' <td>'+tdSpan(tabArr[t],2)+'</td>' +
' <td>'+tdSpan(tabArr[t],3)+'</td>' +
' <td>'+tdSpan(tabArr[t],4)+'</td>' +
' <td>'+tdSpan(tabArr[t],5)+'</td>' +
' <td>'+tdSpan(tabArr[t],6)+'</td>' +
' <td>'+tdSpan(tabArr[t],7)+'</td>' +
' <td>'+tdSpan(tabArr[t],8)+'</td>' +
' <td>'+tdSpan(tabArr[t],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 arr=[];
var ball_9Arr=document.getElementsByClassName('ball_9');
for(var i=0;i<ball_9Arr.length;i++){
//console.log(ball_9Arr[i].offsetParent.offsetParent.offsetParent.offsetLeft)
//console.log(getPosition(ball_9Arr[i],'left'));
//console.log(getPosition(ball_9Arr[i],'top'));
var arrb=[];
arrb.push(getPosition(ball_9Arr[i],'left'));
arrb.push(getPosition(ball_9Arr[i],'top'));
arr.push(arrb);
}
draw.polyline(arr).fill('none').stroke({ width: 1, color: '#ff0000' });
}
function tdSpan(val,ele) {
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);
}
</script>
</body>
</html>
基于SVG.JS的彩票开奖折线图
最新推荐文章于 2024-08-21 10:14:34 发布