API tools faq
paste
Advertisement
lemansky

1

lemansky
Nov 16th, 2020 (edited)
773
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.16 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://bootswatch.com/4/flatly/bootstrap.min.css">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.  
  9.     <!-- задача 1: да се създаде скрипт, чрез който при натискане върху изображение веднъж то се сменя от http://placehold.co/150x150 на http://placehold.co/50x50, а при повторно натискане върху същото избражение, се връща оригиналното http://placehold.co/150x150 -->
  10.  
  11.     <!-- задача 2: да се създаде скрипт, чрез който при натискане на бутон с id = change се взима съдържанието на текстово поле, което може да е число от 1 до 3 и в съотвествие с въведеното число се добавя клас нов progress-bar-animated на 1 от 3-те прогресиращи ленти div.progress-bar (внимавайте да не сложите класа на родителя progress). Нека скриптът да позволи максимално една единствена да е анимирана, т.е. ще трябва да премахвате класа от предишната след смяна. -->
  12.  
  13.     <!-- задача 3: да се създаде скрипт, чрез който при натискане на бутони от едно до пет се взима съответната стойност и я добавя към стойноста в полето. -->
  14.  
  15.     <!-- задача 4: да се създаде скрипт, чрез който при натискане върху бутон се взима неговата СТОЙНОСТ И КЛАС от типа btn-цвят (btn-info, btn-warning, btn-default и т.н.) и се поставя върху бутон с id button-zero. Необходимо е след повторно натискане, на който и да е друг бутон, класът който е бил добавен преди това да се премахне. (в противен случай големия бутон ще получи всички класове един след друг и накрая няма да реагира при смяна на цвета)  -->
  16.  
  17.  
  18.     <script>
  19.         document.addEventListener("DOMContentLoaded", function(){
  20.             clean(document.body);
  21.  
  22.             task1();
  23.             task2();
  24.             task3();
  25.             task4();
  26.  
  27.         });
  28.  
  29.         const task1 = () => {
  30.  
  31.         }
  32.            
  33.         const task2 = () => {
  34.  
  35.         }
  36.  
  37.         const task3 = () => {
  38.  
  39.         }
  40.  
  41.         const task4 = () => {
  42.  
  43.         }
  44.  
  45.         const clean = (node) =>
  46.         {
  47.           for(var n = 0; n < node.childNodes.length; n ++)
  48.          {
  49.            var child = node.childNodes[n];
  50.            if
  51.            (
  52.              child.nodeType === 8
  53.              ||
  54.              (child.nodeType === 3 && !/\S/.test(child.nodeValue))
  55.            )
  56.            {
  57.              node.removeChild(child);
  58.              n --;
  59.            }
  60.            else if(child.nodeType === 1)
  61.            {
  62.              clean(child);
  63.            }
  64.          }
  65.        }
  66.     </script>
  67.     <style>
  68.         input[type=button].cube{
  69.             width:50px;
  70.             height:50px;
  71.         }
  72.     </style>
  73. </head>
  74. <body>
  75.     <!-- задача 1 -->
  76.     <div class="container border border-dark py-2">
  77.         <div class="row mb-4">
  78.                 <div class="col-lg-2 col-sm-2 col-md-2"><img src="http://placehold.co/150x150" alt=""></div>
  79.                 <div class="col-lg-2 col-sm-2 col-md-2"><img src="http://placehold.co/150x150" alt=""></div>
  80.                 <div class="col-lg-2 col-sm-2 col-md-2"><img src="http://placehold.co/150x150" alt=""></div>
  81.             </div>
  82.             <div class="row mb-4">
  83.                 <div class="col-lg-2 col-sm-2 col-md-2"><img src="http://placehold.co/150x150" alt=""></div>
  84.                 <div class="col-lg-2 col-sm-2 col-md-2"><img src="http://placehold.co/150x150" alt=""></div>
  85.                 <div class="col-lg-2 col-sm-2 col-md-2"><img src="http://placehold.co/150x150" alt=""></div>
  86.             </div>
  87.         </div>
  88.     </div>
  89.     <!-- задача 1 -->
  90.  
  91.     <!-- задача 2 -->
  92.     <div class="container border border-dark py-2">
  93.         <div class="progress progress-striped " style="height:20px;">
  94.               <div class="progress-bar progress-bar-striped bg-success " style="width: 100%;"></div>
  95.         </div>
  96.         <div class="progress progress-striped " style="height:20px;">
  97.               <div class="progress-bar progress-bar-striped bg-info " style="width: 60%;"></div>
  98.         </div>
  99.         <div class="progress progress-striped " style="height:20px;">
  100.               <div class="progress-bar progress-bar-striped bg-danger " style="width: 30%;"></div>
  101.         </div>
  102.         <div class="form-group">
  103.             <input type="text" placeholder="въведете число между 1 и 3" class="form-control" id="progress"/>
  104.             <input type="button" class="form-control btn btn-info" value="change" id="change"/>
  105.         </div>
  106.     </div>
  107.     <!-- задача 2 -->
  108.  
  109.     <!-- задача 3 -->
  110.     <div class="container my-4 border border-dark py-2">
  111.         <div class="form-group">
  112.             <label for="paragraph">Страница</label>
  113.             <input type="text" class="form-control" id="address">
  114.  
  115.         </div>
  116.         <ul class="pagination mt-2" id='c'>
  117.             <li class="page-item ">
  118.                 <a class="page-link bg-info" href="#c">1</a>
  119.             </li>
  120.             <li class="page-item">
  121.                 <a class="page-link bg-info" href="#c">2</a>
  122.             </li>
  123.             <li class="page-item">
  124.                 <a class="page-link bg-info" href="#c">3</a>
  125.             </li>
  126.             <li class="page-item">
  127.                 <a class="page-link bg-info" href="#c">4</a>
  128.             </li>
  129.             <li class="page-item">
  130.                 <a class="page-link bg-info" href="#c">5</a>
  131.             </li>
  132.         </ul>
  133.     </div>
  134.     <!-- задача 3 -->
  135.  
  136.     <!-- задача 4 -->
  137.     <div class="container border border-dark py-2" id="ladder">
  138.         <table style="display:inline-block;vertical-align:top;">
  139.             <tr>
  140.                 <td> <input type="button" class="cube form-control btn btn-info" value="1"> </td>
  141.                 <td> <input type="button" class="cube form-control btn btn-warning" value="2"> </td>
  142.                 <td> <input type="button" class="cube form-control btn btn-light" value="3"> </td>
  143.             </tr>
  144.             <tr>
  145.                 <td> <input type="button" class="cube form-control btn btn-danger" value="4"> </td>
  146.                 <td> <input type="button" class="cube form-control btn btn-success" value="5"> </td>
  147.                 <td> <input type="button" class="cube form-control btn btn-link" value="6"> </td>
  148.             </tr>
  149.             <tr>
  150.                 <td> <input type="button" class="cube form-control btn btn-secondary" value="7"> </td>
  151.                 <td> <input type="button" class="cube form-control btn btn-dark" value="8"> </td>
  152.                 <td> <input type="button" class="cube form-control btn btn-primary" value="9"> </td>
  153.             </tr>
  154.         </table>
  155.         <span class="d-inline-block">
  156.             <input type="submit" class="form-control" id="button-zero" style="display:inline-block;width:150px;height:150px;font-size:50px;" value="0">
  157.         </span>
  158.     </div>
  159.  
  160.     <!-- задача 4 -->
  161.  
  162. </body>
  163. </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!