SHARE
    TWEET
    Hasli4

    JS. Усложненные задачи. Решения

    Jun 12th, 2025
    1,098
    0
    Never
    Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
    1. ## Решения
    2. ```js
    3. // Задача 1: Счётчик кликов
    4. const ctrBtn = document.querySelector('#counter-btn');
    5. const ctrDisplay = document.querySelector('#counter');
    6. let count = 0;
    7. ctrBtn.addEventListener('click', function() {
    8. count++;
    9. ctrDisplay.textContent = count;
    10. });
    11. // Задача 2: Список дел
    12. const todoInput = document.querySelector('#todo-input');
    13. const addBtn = document.querySelector('#add-btn');
    14. const todoList = document.querySelector('#todo-list');
    15. addBtn.addEventListener('click', function() {
    16. const text = todoInput.value.trim();
    17. todoInput.value = '';
    18. if (!text) return;
    19. const li = document.createElement('li');
    20. li.textContent = text + ' ';
    21. const del = document.createElement('button');
    22. del.textContent = 'Удалить';
    23. li.appendChild(del);
    24. todoList.appendChild(li);
    25. del.addEventListener('click', function() {
    26. todoList.removeChild(li);
    27. });
    28. });
    29. // Задача 3: Галерея
    30. const mainImg = document.querySelector('#main-image');
    31. const thumbs = document.querySelectorAll('.thumb');
    32. thumbs.forEach(function(tn) {
    33. tn.addEventListener('click', function() {
    34. mainImg.src = tn.src;
    35. });
    36. });
    37. // Задача 4: Карточки
    38. const cards = document.querySelectorAll('.card');
    39. const countSpan = document.querySelector('#count');
    40. let selectedCount = 0;
    41. cards.forEach(function(c) {
    42. c.addEventListener('click', function() {
    43. if (c.classList.contains('selected')) {
    44. c.classList.remove('selected');
    45. c.style.backgroundColor = '';
    46. selectedCount--;
    47. } else {
    48. c.classList.add('selected');
    49. c.style.backgroundColor = 'lightblue';
    50. selectedCount++;
    51. }
    52. countSpan.textContent = selectedCount;
    53. });
    54. });
    55. // Задача 5: Загрузка с задержкой
    56. const loadBtn = document.querySelector('#load');
    57. const content = document.querySelector('#content');
    58. loadBtn.addEventListener('click', function() {
    59. content.textContent = 'Загрузка...';
    60. setTimeout(function() {
    61. content.textContent = 'Данные загружены';
    62. const p = document.createElement('p');
    63. p.textContent = 'Вот какие-то данные...';
    64. content.appendChild(p);
    65. }, 2000);
    66. });
    67. ```
    Advertisement
    Add Comment
    Please, Sign In to add comment
    Public Pastes
    We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
    Not a member of Pastebin yet?
    Sign Up, it unlocks many cool features!

    AltStyle によって変換されたページ (->オリジナル) /