Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Statystyka</title>
- <script src="js/jquery.js"></script>
- <style>
- table {
- font-size: 1.1em;
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- text-align: center;
- width: 100px;
- }
- td {
- text-align: center;
- padding: 4px;
- border: 2px blue dotted;
- min-height: 30px;
- min-width: 100px;
- }
- td:first-child {
- text-align: left;
- }
- .slider {
- margin-top: 4px;
- display: inline-block;
- position: relative;
- width: 500px;
- background: lightgray;
- border-radius: 15px;
- height: 30px;
- overflow: hidden;
- }
- .colored {
- border-radius: 15px;
- height: 30px;
- width: 100px;
- }
- .dot {
- line-height: 1.8;
- font-size: .9em;
- font-weight: bold;
- text-align: center;
- cursor: pointer;
- position: absolute;
- top: 0;
- border-radius: 15px;
- height: 30px;
- width: 30px;
- user-select: none;
- transition: box-shadow .3s, font-size .3s, line-height .3s;
- }
- #policja{
- min-width: 250px !important;
- }
- </style>
- </head>
- <body>
- <table></table>
- <script>
- var tab = [
- { type: "komisariat 1 - dzielnica I", c1: "111111", c2: "f5aa00", start: 70 },
- { type: "komisariat 2 - dzielnica II", c1: "333333", c2: "f5bb00", start: 60 },
- { type: "komisariat 3 - dzielnice III i IV", c1: "555555", c2: "f5cc00", start: 50 },
- { type: "komisariat 4 - dzielnice V, VI i VII", c1: "777777", c2: "f5dd00", start: 40 },
- { type: "komisariat 5 - dzielnice VIII, IX, i XIII", c1: "999999", c2: "f5ee00", start: 50 },
- { type: "komisariat 6 - dzielnice X, XI i XII", c1: "777777", c2: "f5dd00", start: 60 },
- { type: "komisariat 7 - dzielnice XV, XVI i XVII", c1: "555555", c2: "f5cc00", start: 70 },
- { type: "komisariat 8 - dzielnice XIV i XVIII", c1: "333333", c2: "f5bb00", start: 80 },
- ]
- const sliderWidth = 500
- const dotSize = 30
- const table = $("table")
- for (const elem of tab){
- const row=$("<tr></tr>").appendTo(table)
- row.append($("<td id='policja'></td>").text(elem.type)).addClass("komisariat")
- row.append($("<td id='start'></td>").text(elem.start))
- const slider = $("<div></div>").addClass("slider")
- row.append($("<td></td>").append(slider))
- row.append($("<td></td>").text(100-elem.start))
- $('<div></div>')
- .addClass('colored')
- .width(sliderWidth)
- .css('background-color', '#' + elem.c1)
- .appendTo(slider)
- .css('border-radius', '20px')
- $('<div></div>')
- .addClass('dot')
- .css('background-color', '#' + elem.c2)
- .css('left', elem.start * (sliderWidth - dotSize) / 100)
- .text(elem.start)
- .appendTo(slider)
- .mousedown(function () {
- $(this).addClass('dragging');
- });
- }
- const dane = $('<div style="max-height:100px !important;"></div>')
- .addClass('dane').html("<p style='font-size:18px; position: relative; bottom: 20px;'>Średnia przestępczość w Krakowie:</p></br><p style='font-size:18px; position: relative; bottom: 60px;'>dzien - " + $(start/8) + "</p><br/><p style='font-size:18px; position: relative; bottom: 90px;'>noc - " + $(100-start/8) + " </p>")
- .css("text-align", "center")
- .width(1008)
- .appendTo($('<td></td>')
- .attr('colspan', 4)
- .appendTo($('<tr></tr>').appendTo(table)))
- $(':root').mouseup(function () {
- $('.dragging').removeClass('dragging');
- })
- $(':root').mousemove(function (event) {
- $('.dragging').each(function (i, el) {
- const start = $("#start")
- const maxValue = $(el).parent().children('.colored').width() / sliderWidth
- const currentValue = Math.max(Math.min((event.pageX - 412 - dotSize / 2) / (sliderWidth - dotSize), maxValue), 0);
- $(el).css('left', currentValue * (sliderWidth - dotSize) | 0)
- .text(currentValue * 100 | 0)
- .parent().parent().parent()
- .children('td:last-child').text(currentValue * 100 | 0)
- $(start).text(100-currentValue * 100 | 0)
- })
- })
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement