API tools faq
paste
Advertisement
deyanivanov966

Упражнение 3 Банков Решение на задачи за подготовка

deyanivanov966
Jan 13th, 2022
613
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  7.  
  8.     <!-- задача 1:  да се създаде скрипт, при който чрез натискане на десен бутон на мишката върху някой параграф, той получава червен цвят за фон -->
  9.     <!-- задача 2:  да се създаде скрипт, при който чрез използване на скролера на мишката се определя произволна на цвят рамка с дебелина от 3px на изображението -->
  10.     <!-- задача 3:  да се създаде скрипт, при който чрез въвеждане на текст в едноредово поле се отчита натискането на клавиш и се търси съвпадение в списък от елементи. При открито съответствие се оцветява само частта от въведеното. -->
  11.     <script>
  12.         document.addEventListener("DOMContentLoaded", () => {
  13.             clean(document.body);
  14.  
  15.             task1();
  16.             task2();
  17.             task3();
  18.  
  19.         });
  20.  
  21.         const task1 = () => {
  22.             let p = document.querySelectorAll('p');
  23.             p.forEach(item => {
  24.                 item.addEventListener('contextmenu', (e) => {
  25.                     e.target.style['background'] = 'red';
  26.                 });
  27.             });
  28.         }
  29.  
  30.         const task2 = () => {
  31.             let img = document.querySelectorAll('img')[0];
  32.             let l = ['a', 'b', 'c', 'd', 'e', 'f', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  33.             img.addEventListener('wheel', (e) => {
  34.                 e.target.style.border = 'solid 15px rgb(' +
  35.                                             Math.floor(Math.random()*256) + ',' +
  36.                                             Math.floor(Math.random()*256) + ',' +
  37.                                             Math.floor(Math.random()*256) + ')';  
  38.                 // let hex = '#' + l[Math.floor(Math.random()*16)] +
  39.                 //                                       l[Math.floor(Math.random()*16)] +
  40.                 //                                       l[Math.floor(Math.random()*16)] +
  41.                 //                                       l[Math.floor(Math.random()*16)] +
  42.                 //                                       l[Math.floor(Math.random()*16)] +
  43.                 //                                       l[Math.floor(Math.random()*16)];
  44.                 // e.target.style.border = 'solid 15px ' + hex;
  45.             });
  46.         }
  47.  
  48.         const task3 = () => {
  49.             let input = document.querySelectorAll('.form-control')[0];
  50.             input.addEventListener('input', (e) => {
  51.                 // console.log(e.target.value);
  52.                 let spans = document.querySelectorAll('.list-group-item');
  53.                 spans.forEach( s => {
  54.                     s.innerText = s.innerText;
  55.                 });
  56.  
  57.                 // [...document.querySelectorAll('.list-group-item')].map(x => x.innerText = x.innerText);
  58.                
  59.                 let items = document.querySelectorAll('.list-group-item');
  60.                 items.forEach(li => {
  61.                     if(li.innerText.includes(e.target.value) && e.target.value !=''){
  62.                         let clean = li.innerText.split(e.target.value);
  63.                         clean = clean.join('<span class="bg-danger">' + e.target.value + '</span>');
  64.                         li.innerHTML = clean;
  65.                     }
  66.                 });
  67.  
  68.             });
  69.         }
  70.  
  71.         const clean = (node) =>
  72.         {
  73.           for(var n = 0; n < node.childNodes.length; n ++)
  74.           {
  75.             var child = node.childNodes[n];
  76.             if
  77.             (
  78.               child.nodeType === 8
  79.               ||
  80.               (child.nodeType === 3 && !/\S/.test(child.nodeValue))
  81.             )
  82.             {
  83.               node.removeChild(child);
  84.               n --;
  85.             }
  86.             else if(child.nodeType === 1)
  87.             {
  88.               clean(child);
  89.             }
  90.           }
  91.         }
  92.     </script>
  93. </head>
  94. <body>
  95.     <!-- задача 1 -->
  96.     <div class="container my-4">
  97.         <p>lorem item 1</p>
  98.         <p>lorem item 2</p>
  99.         <p>lorem item 3</p>
  100.         <p>lorem item 4</p>
  101.         <p>lorem item 5</p>
  102.         <p>lorem item 6</p>
  103.         <p>lorem item 7</p>
  104.         <p>lorem item 8</p>
  105.         <p>lorem item 9</p>
  106.         <p>lorem item 10</p>
  107.     </div>
  108.     <!-- задача 1 -->
  109.  
  110.     <!-- задача 2 -->
  111.     <div class="container my-4">
  112.         <img src="http://placehold.it/250x250" alt="">
  113.     </div>
  114.     <!-- задача 2 -->
  115.  
  116.     <!-- задача 3 -->
  117.  
  118.     <div class="container my-4">
  119.         <input type="text" class="form-control">
  120.         <ul class="list-group">
  121.             <li class="list-group-item"> Lorem ipsum</li>
  122.             <li class="list-group-item"> dolor sit</li>
  123.             <li class="list-group-item"> amet consectetur</li>
  124.             <li class="list-group-item"> adipisicing elit</li>
  125.             <li class="list-group-item"> Facere nemo</li>
  126.             <li class="list-group-item"> possimus in totam</li>
  127.             <li class="list-group-item"> eos harum rem</li>
  128.             <li class="list-group-item"> aliquam, eum recusandae quod</li>
  129.             <li class="list-group-item"> odit! Necessitatibus quibusdam</li>
  130.             <li class="list-group-item"> illum voluptatem nihil</li>
  131.         </ul>
  132.     </div>
  133.     <!-- задача 3 -->
  134.  
  135. </body>
  136. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!