Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> SUWAK zmieniający dynamicznie zawartość tabliczki mnożenia, tabliczka mnożenia, suwak, dynamicznie
kubijay
post 31.03.2017, 10:07:15
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 13.03.2017

Ostrzeżenie: (0%)
-----


Dla kogoś kto lubi suwaki, polecam do zabawy.

-> Tabliczka mnożenia zmieniana dynamicznie suwakiem (wymiar zmieniany suwakiem)


Efekt :


________________________________________________________

KOD HTML:
  1.  
  2. <!-- +++++++++++ style +++++++++++ -->
  3. <link rel='stylesheet' type='text/css' href='style.css'>
  4.  
  5. <!-- +++++++++++ budowa strony +++++++++++ -->
  6. <div id="suwak"><input type="range" id="one" min="2" max="20" value="0"/></div>
  7. <div id="trzym">Wymiar tabliczki <t id="wym"></t> x <t id="wym2"></t></div>
  8. <table border=1 id="tabelka"></table>
  9.  
  10.  
  11. <!-- +++++++++++ skrypt +++++++++++ -->
  12. var $ = function(id) { return document.getElementById(id); };
  13. $('one').oninput = function()
  14. {
  15. $('wym').innerHTML = this.value;
  16. $('wym2').innerHTML = this.value;
  17. var ile = this.value;
  18.  
  19. var table = document.getElementById('tabelka');
  20.  
  21. var tableHTML = '';
  22. for (var y=1; y<=ile; y++) {
  23.  
  24. var tr = '<tr>';
  25.  
  26. for (var x=1; x<=ile; x++) {
  27. var tekst = x*y;
  28.  
  29. if (y==1 || x==1) {
  30. var td = '<th class="bok">'+tekst+'</th>';
  31. } else {
  32. var td = '<td class="nbok">'+tekst+'</td>';
  33. }
  34.  
  35. tr += td;
  36. }
  37. tr += '</tr>';
  38.  
  39. tableHTML += tr;
  40. }
  41.  
  42. table.innerHTML = tableHTML;
  43. };
  44.  
  45. $('one').oninput();
  46.  
  47.  




KOD CSS:
  1. html
  2. { /* ---
  3. background: url(../media/background.jpg);
  4. background-repeat: no-repeat;
  5. background-attachment: fixed;
  6. background-position: bottom;
  7. -webkit-background-size: cover;
  8. -moz-background-size: cover;
  9. background-size: cover;
  10. --- */
  11. background-color: #838384;
  12. }
  13. body
  14. {
  15. min-width: 600px !important;
  16. max-width: 600px !important;
  17. min-height: 540px !important;
  18. width: 90%;
  19. margin-top: 10px;
  20. margin-left: auto;
  21. margin-right: auto;
  22. font-style: normal;
  23. color: black;
  24. background: white;
  25. padding: 0;
  26. font-family: arial, sans-serif;
  27. }
  28. input[type=range] {
  29. -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  30. width: 96%; /* Specific width is required for Firefox. */
  31. background: transparent; /* Otherwise white in Chrome */
  32. }
  33. input[type=range]::-webkit-slider-thumb {
  34. -webkit-appearance: none;
  35. }
  36. input[type=range]:focus {
  37. outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
  38. }
  39. input[type=range]::-ms-track {
  40. width: 100%;
  41. cursor: pointer;
  42. /* Hides the slider so custom styles can be added */
  43. background: transparent;
  44. border-color: transparent;
  45. color: transparent;
  46. }
  47. #suwak
  48. {
  49. padding-top:10px;
  50. text-align:center;
  51. }
  52. #trzym
  53. {
  54. text-align:center;
  55. border-collapse: collapse;
  56. font-size:18px;
  57. }
  58. #tabelka
  59. {
  60. margin: 20px ;
  61. margin-top:10px;
  62. border-collapse: collapse;
  63. }
  64. .bok
  65. {
  66. background-color: #ffde84;
  67. text-align:center;
  68. }
  69. .nbok
  70. {
  71. background-color: #f4f4f4;
  72. text-align:center;
  73. }
  74.  
Go to the top of the page
+Quote Post
Tomplus
post 31.03.2017, 14:00:04
Post #2





Grupa: Zarejestrowani
Postów: 1 825
Pomógł: 225
Dołączył: 20.03.2005
Skąd: Będzin

Ostrzeżenie: (0%)
-----


Wrzuć sobie na Githuba, może ktoś się zainteresuje.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 19.03.2024 - 08:28