Skip to content

Instantly share code, notes, and snippets.

@wy36101299

wy36101299/traffic_UI

Last active April 10, 2016 10:34
Show Gist options
  • Save wy36101299/75997eb47fe49351f311 to your computer and use it in GitHub Desktop.
Save wy36101299/75997eb47fe49351f311 to your computer and use it in GitHub Desktop.
Download ZIP
show different traffic situation
Raw
traffic_UI
<script src="jquery-2.1.1.min.js"></script>
<!-- template -->
<table>
<tbody>
<tr>
<td></td>
<td><div class='h'>12a</div></td>
<td><div class='h'>1a</div></td>
<td><div class='h'>2a</div></td>
<td><div class='h'>3a</div></td>
<td><div class='h'>4a</div></td>
<td><div class='h'>5a</div></td>
<td><div class='h'>6a</div></td>
<td><div class='h'>7a</div></td>
<td><div class='h'>8a</div></td>
<td><div class='h'>9a</div></td>
<td><div class='h'>10a</div></td>
<td><div class='h'>11a</div></td>
<td><div class='h'>12p</div></td>
<td><div class='h'>1p</div></td>
<td><div class='h'>2p</div></td>
<td><div class='h'>3p</div></td>
<td><div class='h'>4p</div></td>
<td><div class='h'>5p</div></td>
<td><div class='h'>6p</div></td>
<td><div class='h'>7p</div></td>
<td><div class='h'>8p</div></td>
<td><div class='h'>9p</div></td>
<td><div class='h'>10p</div></td>
<td><div class='h'>11p</div></td>
</tr>
<tr>
<td><div class='d'>Mo</div></td>
<td><div id='mo-12a'></div></td>
<td><div id='mo-1a'></div></td>
<td><div id='mo-2a'></div></td>
<td><div id='mo-3a'></div></td>
<td><div id='mo-4a'></div></td>
<td><div id='mo-5a'></div></td>
<td><div id='mo-6a'></div></td>
<td><div id='mo-7a'></div></td>
<td><div id='mo-8a'></div></td>
<td><div id='mo-9a'></div></td>
<td><div id='mo-10a'></div></td>
<td><div id='mo-11a'></div></td>
<td><div id='mo-12p'></div></td>
<td><div id='mo-1p'></div></td>
<td><div id='mo-2p'></div></td>
<td><div id='mo-3p'></div></td>
<td><div id='mo-4p'></div></td>
<td><div id='mo-5p'></div></td>
<td><div id='mo-6p'></div></td>
<td><div id='mo-7p'></div></td>
<td><div id='mo-8p'></div></td>
<td><div id='mo-9p'></div></td>
<td><div id='mo-10p'></div></td>
<td><div id='mo-11p'></div></td>
</tr>
<tr>
<td><div class='d' >Tu</div></td>
<td><div id='tu-12a'></div></td>
<td><div id='tu-1a'></div></td>
<td><div id='tu-2a'></div></td>
<td><div id='tu-3a'></div></td>
<td><div id='tu-4a'></div></td>
<td><div id='tu-5a'></div></td>
<td><div id='tu-6a'></div></td>
<td><div id='tu-7a'></div></td>
<td><div id='tu-8a'></div></td>
<td><div id='tu-9a'></div></td>
<td><div id='tu-10a'></div></td>
<td><div id='tu-11a'></div></td>
<td><div id='tu-12p'></div></td>
<td><div id='tu-1p'></div></td>
<td><div id='tu-2p'></div></td>
<td><div id='tu-3p'></div></td>
<td><div id='tu-4p'></div></td>
<td><div id='tu-5p'></div></td>
<td><div id='tu-6p'></div></td>
<td><div id='tu-7p'></div></td>
<td><div id='tu-8p'></div></td>
<td><div id='tu-9p'></div></td>
<td><div id='tu-10p'></div></td>
<td><div id='tu-11p'></div></td>
</tr>
<tr>
<td><div class='d'>We</div></td>
<td><div id='we-12a'></div></td>
<td><div id='we-1a'></div></td>
<td><div id='we-2a'></div></td>
<td><div id='we-3a'></div></td>
<td><div id='we-4a'></div></td>
<td><div id='we-5a'></div></td>
<td><div id='we-6a'></div></td>
<td><div id='we-7a'></div></td>
<td><div id='we-8a'></div></td>
<td><div id='we-9a'></div></td>
<td><div id='we-10a'></div></td>
<td><div id='we-11a'></div></td>
<td><div id='we-12p'></div></td>
<td><div id='we-1p'></div></td>
<td><div id='we-2p'></div></td>
<td><div id='we-3p'></div></td>
<td><div id='we-4p'></div></td>
<td><div id='we-5p'></div></td>
<td><div id='we-6p'></div></td>
<td><div id='we-7p'></div></td>
<td><div id='we-8p'></div></td>
<td><div id='we-9p'></div></td>
<td><div id='we-10p'></div></td>
<td><div id='we-11p'></div></td>
</tr>
<tr>
<td><div class='d'>Th</div></td>
<td><div id='th-12a'></div></td>
<td><div id='th-1a'></div></td>
<td><div id='th-2a'></div></td>
<td><div id='th-3a'></div></td>
<td><div id='th-4a'></div></td>
<td><div id='th-5a'></div></td>
<td><div id='th-6a'></div></td>
<td><div id='th-7a'></div></td>
<td><div id='th-8a'></div></td>
<td><div id='th-9a'></div></td>
<td><div id='th-10a'></div></td>
<td><div id='th-11a'></div></td>
<td><div id='th-12p'></div></td>
<td><div id='th-1p'></div></td>
<td><div id='th-2p'></div></td>
<td><div id='th-3p'></div></td>
<td><div id='th-4p'></div></td>
<td><div id='th-5p'></div></td>
<td><div id='th-6p'></div></td>
<td><div id='th-7p'></div></td>
<td><div id='th-8p'></div></td>
<td><div id='th-9p'></div></td>
<td><div id='th-10p'></div></td>
<td><div id='th-11p'></div></td>
</tr>
<tr>
<td><div class='d'>Fr</div></td>
<td><div id='fr-12a'></div></td>
<td><div id='fr-1a'></div></td>
<td><div id='fr-2a'></div></td>
<td><div id='fr-3a'></div></td>
<td><div id='fr-4a'></div></td>
<td><div id='fr-5a'></div></td>
<td><div id='fr-6a'></div></td>
<td><div id='fr-7a'></div></td>
<td><div id='fr-8a'></div></td>
<td><div id='fr-9a'></div></td>
<td><div id='fr-10a'></div></td>
<td><div id='fr-11a'></div></td>
<td><div id='fr-12p'></div></td>
<td><div id='fr-1p'></div></td>
<td><div id='fr-2p'></div></td>
<td><div id='fr-3p'></div></td>
<td><div id='fr-4p'></div></td>
<td><div id='fr-5p'></div></td>
<td><div id='fr-6p'></div></td>
<td><div id='fr-7p'></div></td>
<td><div id='fr-8p'></div></td>
<td><div id='fr-9p'></div></td>
<td><div id='fr-10p'></div></td>
<td><div id='fr-11p'></div></td>
</tr>
<tr>
<td><div class='d'>Sa</div></td>
<td><div id='sa-12a'></div></td>
<td><div id='sa-1a'></div></td>
<td><div id='sa-2a'></div></td>
<td><div id='sa-3a'></div></td>
<td><div id='sa-4a'></div></td>
<td><div id='sa-5a'></div></td>
<td><div id='sa-6a'></div></td>
<td><div id='sa-7a'></div></td>
<td><div id='sa-8a'></div></td>
<td><div id='sa-9a'></div></td>
<td><div id='sa-10a'></div></td>
<td><div id='sa-11a'></div></td>
<td><div id='sa-12p'></div></td>
<td><div id='sa-1p'></div></td>
<td><div id='sa-2p'></div></td>
<td><div id='sa-3p'></div></td>
<td><div id='sa-4p'></div></td>
<td><div id='sa-5p'></div></td>
<td><div id='sa-6p'></div></td>
<td><div id='sa-7p'></div></td>
<td><div id='sa-8p'></div></td>
<td><div id='sa-9p'></div></td>
<td><div id='sa-10p'></div></td>
<td><div id='sa-11p'></div></td>
</tr>
<tr>
<td><div class='d'>Su</div></td>
<td><div id='su-12a'></div></td>
<td><div id='su-1a'></div></td>
<td><div id='su-2a'></div></td>
<td><div id='su-3a'></div></td>
<td><div id='su-4a'></div></td>
<td><div id='su-5a'></div></td>
<td><div id='su-6a'></div></td>
<td><div id='su-7a'></div></td>
<td><div id='su-8a'></div></td>
<td><div id='su-9a'></div></td>
<td><div id='su-10a'></div></td>
<td><div id='su-11a'></div></td>
<td><div id='su-12p'></div></td>
<td><div id='su-1p'></div></td>
<td><div id='su-2p'></div></td>
<td><div id='su-3p'></div></td>
<td><div id='su-4p'></div></td>
<td><div id='su-5p'></div></td>
<td><div id='su-6p'></div></td>
<td><div id='su-7p'></div></td>
<td><div id='su-8p'></div></td>
<td><div id='su-9p'></div></td>
<td><div id='su-10p'></div></td>
<td><div id='su-11p'></div></td>
</tr>
</tbody>
</table>
<style type="text/css">
.h,.d{
color: #ccc;
background-color: white;
text-align: center;
line-height: 35px;
}
div{
height: 35px;
width:35px;
background-color: black;
margin: 1px;
border-radius: 4px;
}
.c1{
background-color: #5E4FA2;
}
.c2{
background-color: #3288BD;
}
.c3{
background-color: #66C2A5;
}
.c4{
background-color: #ABDDA4;
}
.c5{
background-color: #E6F598;
}
.c6{
background-color: #f6faaa;
}
.c7{
background-color: #FEE08B;
}
.c8{
background-color: #FDAE61;
}
.c9{
background-color: #F46D43;
}
.c10{
background-color: #D53E4F;
}
.c11{
background-color: #9E0142;
}
</style>
<script type="text/javascript">
// random num in 2D array 7*24
var a = [];
for (i = 0; i < 7; i++) {
a[i] = [];
for (j = 0; j < 24; j++) {
a[i][j] = Math.ceil(Math.random() * 11)-1;
}
}
// map color
function map_color(num){
var map = ['c1','c2','c3','c4','c5','c6','c7','c8','c9','c10','c11'];
color = map[num]
return color;
}
// map date
function map_date(num){
var map_date = ['mo','tu','we','th','fr','sa','su'];
date = map_date[num]
return date;
}
// add class change color
for (x=0; x<7; x++){
data = map_date(x)
for (y=0; y<13; y++){
z = parseInt(y+11)
$("#"+date+"-"+y+"a").addClass( map_color(a[x][y]) );
$("#"+date+"-"+y+"p").addClass( map_color(a[x][z]) );
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment