Advertisement
Guest User

Untitled

a guest
Nov 18th, 2019
146
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.93 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Statystyka</title>
  8. <script src="js/jquery.js"></script>
  9. <style>
  10. table {
  11. font-size: 1.1em;
  12. font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  13. text-align: center;
  14. width: 100px;
  15. }
  16.  
  17. td {
  18. text-align: center;
  19. padding: 4px;
  20. border: 2px blue dotted;
  21. min-height: 30px;
  22. min-width: 100px;
  23. }
  24.  
  25. td:first-child {
  26. text-align: left;
  27. }
  28.  
  29. .slider {
  30. margin-top: 4px;
  31. display: inline-block;
  32. position: relative;
  33. width: 500px;
  34. background: lightgray;
  35. border-radius: 15px;
  36. height: 30px;
  37. overflow: hidden;
  38. }
  39.  
  40. .colored {
  41. border-radius: 15px;
  42. height: 30px;
  43. width: 100px;
  44. }
  45. .dot {
  46. line-height: 1.8;
  47. font-size: .9em;
  48. font-weight: bold;
  49. text-align: center;
  50. cursor: pointer;
  51. position: absolute;
  52. top: 0;
  53. border-radius: 15px;
  54. height: 30px;
  55. width: 30px;
  56. user-select: none;
  57. transition: box-shadow .3s, font-size .3s, line-height .3s;
  58. }
  59. #policja{
  60. min-width: 250px !important;
  61. }
  62.  
  63. </style>
  64. </head>
  65. <body>
  66. <table></table>
  67. <script>
  68. var tab = [
  69. { type: "komisariat 1 - dzielnica I", c1: "111111", c2: "f5aa00", start: 70 },
  70. { type: "komisariat 2 - dzielnica II", c1: "333333", c2: "f5bb00", start: 60 },
  71. { type: "komisariat 3 - dzielnice III i IV", c1: "555555", c2: "f5cc00", start: 50 },
  72. { type: "komisariat 4 - dzielnice V, VI i VII", c1: "777777", c2: "f5dd00", start: 40 },
  73. { type: "komisariat 5 - dzielnice VIII, IX, i XIII", c1: "999999", c2: "f5ee00", start: 50 },
  74. { type: "komisariat 6 - dzielnice X, XI i XII", c1: "777777", c2: "f5dd00", start: 60 },
  75. { type: "komisariat 7 - dzielnice XV, XVI i XVII", c1: "555555", c2: "f5cc00", start: 70 },
  76. { type: "komisariat 8 - dzielnice XIV i XVIII", c1: "333333", c2: "f5bb00", start: 80 },
  77. ]
  78.  
  79. const sliderWidth = 500
  80. const dotSize = 30
  81.  
  82. const table = $("table")
  83. for (const elem of tab){
  84. const row=$("<tr></tr>").appendTo(table)
  85.  
  86. row.append($("<td id='policja'></td>").text(elem.type)).addClass("komisariat")
  87. row.append($("<td id='start'></td>").text(elem.start))
  88. const slider = $("<div></div>").addClass("slider")
  89. row.append($("<td></td>").append(slider))
  90. row.append($("<td></td>").text(100-elem.start))
  91.  
  92. $('<div></div>')
  93. .addClass('colored')
  94. .width(sliderWidth)
  95. .css('background-color', '#' + elem.c1)
  96. .appendTo(slider)
  97. .css('border-radius', '20px')
  98.  
  99. $('<div></div>')
  100. .addClass('dot')
  101. .css('background-color', '#' + elem.c2)
  102. .css('left', elem.start * (sliderWidth - dotSize) / 100)
  103. .text(elem.start)
  104. .appendTo(slider)
  105. .mousedown(function () {
  106. $(this).addClass('dragging');
  107. });
  108.  
  109. }
  110. const dane = $('<div style="max-height:100px !important;"></div>')
  111. .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>")
  112. .css("text-align", "center")
  113. .width(1008)
  114. .appendTo($('<td></td>')
  115. .attr('colspan', 4)
  116. .appendTo($('<tr></tr>').appendTo(table)))
  117.  
  118. $(':root').mouseup(function () {
  119. $('.dragging').removeClass('dragging');
  120. })
  121.  
  122. $(':root').mousemove(function (event) {
  123. $('.dragging').each(function (i, el) {
  124. const start = $("#start")
  125. const maxValue = $(el).parent().children('.colored').width() / sliderWidth
  126. const currentValue = Math.max(Math.min((event.pageX - 412 - dotSize / 2) / (sliderWidth - dotSize), maxValue), 0);
  127. $(el).css('left', currentValue * (sliderWidth - dotSize) | 0)
  128. .text(currentValue * 100 | 0)
  129. .parent().parent().parent()
  130. .children('td:last-child').text(currentValue * 100 | 0)
  131. $(start).text(100-currentValue * 100 | 0)
  132. })
  133. })
  134.  
  135.  
  136.  
  137.  
  138. </script>
  139. </body>
  140. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement