index.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>DOM: База</title>
  6. </head>
  7. <body>
  8. <style>
  9. table {
  10. border-collapse: collapse;
  11. }
  12. .podsvetka {
  13. background:lightgreen;
  14. }
  15. button{
  16. cursor: pointer;
  17. text-decoration: none;
  18. display: inline-block;
  19. color: white;
  20. padding: 10px 110px;
  21. margin: 30px;
  22. border-radius: 10px;
  23. font-family: 'Montserrat', sans-serif;
  24. text-transform: uppercase;
  25. letter-spacing: 2px;
  26. background-image: linear-gradient(to right, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%);
  27. background-size: 200% auto;
  28. box-shadow: 0 0 20px rgba(0, 0, 0, .1);
  29. transition: .5s;
  30. }
  31. button:hover {
  32. background-position: right center;
  33. }
  34. #num1, #num2{
  35. font-size: 16px;
  36. padding: 10px;
  37. display: block;
  38. width: 300px;
  39. border: none;
  40. border: 1px solid #ccc;
  41. margin-top: 30px;
  42. }
  43. #result{
  44. font-size: 16px;
  45. padding: 10px;
  46. display: inline-block;
  47. width: 300px;
  48. border: none;
  49. border: 1px solid #ccc;
  50. margin-top: 20px;
  51. }
  52. input:focus {
  53. outline: none;
  54. }
  55. </style>
  56. <input type="number" id="num1" placeholder="number 1">
  57. <input type="number" id="num2" placeholder="number 2">
  58. <button id="plus">Sum</button>
  59. <input type="number" id='result'>
  60. <script>
  61. //------таблица умножения
  62. /*let table=document.createElement('table');
  63. table.border=1+'px';
  64. table.id='tab';
  65. for(let j=0;j<=10;j++){
  66. let tr=document.createElement('tr');
  67. if(j==0){
  68. for(let i=0;i<=10;i++){
  69. let td=document.createElement('td');
  70. td.innerText=i;
  71. td.align='center';
  72. td.height=5+'%';
  73. td.width=5+'%';
  74. tr.append(td);
  75. }
  76. }else{
  77. for(let i=0;i<=10;i++){
  78. let td=document.createElement('td');
  79. if(i==0){
  80. td.innerText=j;
  81. }else{
  82. td.innerText=i*j;
  83. }
  84. td.align='center';
  85. td.height=5+'%';
  86. td.width=5+'p%';
  87. tr.append(td);
  88. }
  89. }
  90. table.append(tr);
  91. }
  92. document.body.append(table);*/
  93. //------подсветка ячейки
  94. /*let table=document.createElement('table');
  95. table.border=1+'px';
  96. table.id='tab';
  97. table.style.borderColor='orange';
  98. for(let j=0;j<=10;j++){
  99. let tr=document.createElement('tr');
  100. if(j==0){
  101. for(let i=0;i<=10;i++){
  102. let td=document.createElement('td');
  103. td.innerText=i;
  104. td.align='center';
  105. td.height=5+'%';
  106. td.width=5+'%';
  107. tr.append(td);
  108. td.onmouseover=function(){
  109. this.style.backgroundColor='pink';
  110. }
  111. td.onmouseout=function(){
  112. this.style.backgroundColor='yellow';
  113. }
  114. }
  115. }else{
  116. for(let i=0;i<=10;i++){
  117. let td=document.createElement('td');
  118. if(i==0){
  119. td.innerText=j;
  120. }else{
  121. td.innerText=i*j;
  122. }
  123. td.onmouseover=function(){
  124. this.style.backgroundColor='pink';
  125. }
  126. td.onmouseout=function(){
  127. this.style.backgroundColor='yellow';
  128. }
  129. td.align='center';
  130. td.height=5+'%';
  131. td.width=5+'p%';
  132. tr.append(td);
  133. }
  134. }
  135. table.append(tr);
  136. }
  137. document.body.append(table);
  138. */
  139. //------подсветить строку и столбец
  140. /*let table=document.createElement('table');
  141. table.border=1+'px';
  142. table.id='tab';
  143. table.style.borderColor='orange';
  144. for(let j=0;j<=10;j++){
  145. let tr=document.createElement('tr');
  146. if(j==0){
  147. for(let i=0;i<=10;i++){
  148. let td=document.createElement('td');
  149. td.innerText=i;
  150. td.align='center';
  151. td.height=5+'%';
  152. td.width=5+'%';
  153. tr.append(td);
  154. }
  155. }else{
  156. for(let i=0;i<=10;i++){
  157. let td=document.createElement('td');
  158. if(i==0){
  159. td.innerText=j;
  160. }else{
  161. td.innerText=i*j;
  162. }
  163. td.align='center';
  164. td.height=5+'%';
  165. td.width=5+'p%';
  166. tr.append(td);
  167. }
  168. }
  169. table.append(tr);
  170. }
  171. table.onmouseover=function(event){
  172. let target=event.target;
  173. target.style.backgroundColor='yellow';
  174. document.querySelectorAll(".podsvetka").forEach(
  175. item => item.classList.remove("podsvetka")
  176. );
  177. target.closest("tr").classList.add("podsvetka");
  178. target.closest("table").querySelectorAll("tr").forEach(
  179. row => row.cells[target.cellIndex].classList.add("podsvetka")
  180. );
  181. }
  182. table.onmouseout=function(event){
  183. let target=event.target;
  184. target.style.backgroundColor='';
  185. document.querySelectorAll(".podsvetka").forEach(
  186. item => item.classList.remove("podsvetka")
  187. );
  188. }
  189. document.body.append(table);*/
  190. //---------Calc
  191. /*plus.onclick=function(){
  192. result.value=(+num1.value)+(+num2.value);
  193. }*/
  194. //---------Calc Live
  195. function calc(){
  196. result.value=(+num1.value)+(+num2.value);
  197. }
  198. // ??????????
  199. //input1.oninput = calc;
  200. //input2.oninput = calc;
  201. </script>
  202. </body>
  203. </html>