Advertisement
fcamuso

Corso recupero Javascript - video 7

Nov 12th, 2022
1,107
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
C# 3.13 KB | None | 0 0
  1. *** ESERCIZIO1.HTML ***
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9. </head>
  10. <body>
  11.  <img id="foto" src="img/londra1.jpg" height="150px"> <br>
  12.  <input id="numero" type="number" value="180"
  13.         min="150" max="250">
  14.  <button id="btn">APPLICA</button>
  15.  
  16.  <script>
  17.    document.getElementById("btn")
  18.     .addEventListener("click", function () {
  19.       const valore = parseInt( document.getElementById("numero").value);
  20.      
  21.       if (valore>=150 && valore<=250)
  22.         document.getElementById("foto").style.height=valore+"px"; //"180px"
  23.       else
  24.       {
  25.         alert("Valore fuori intervallo!");
  26.         document.getElementById("numero").value=180;
  27.       }
  28.    
  29.     } )
  30.  </script>
  31.  
  32. </body>
  33. </html>
  34.  
  35. *** ESERCIZIO2.HTML ***
  36. <!DOCTYPE html>
  37. <html lang="it">
  38. <head>
  39.     <meta charset="UTF-8">
  40.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  41.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  42.     <style>
  43.         .cuore {
  44.             position:relative;
  45.             width:50px;
  46.             height:40px;
  47.             -moz-transform:rotate(0);
  48.             -webkit-transform:rotate(0);
  49.             -ms-transform:rotate(0);
  50.             -o-transform:rotate(0);
  51.             transform:rotate(0);
  52.             display: none;
  53.         }
  54.         .cuore:before {
  55.             content:"";
  56.             width:20px;
  57.             height:30px;
  58.             position:absolute;
  59.             top:0;
  60.             left:18px;
  61.             background:red;
  62.             border-radius:60px 60px 0 0;
  63.             -moz-transform:rotate(-45deg);
  64.             -webkit-transform:rotate(-45deg);
  65.             -ms-transform:rotate(-45deg);
  66.             -o-transform:rotate(-45deg);
  67.             transform:rotate(-45deg);
  68.             -moz-transform-origin:0 100%;
  69.             -webkit-transform-origin:0 100%;
  70.             -ms-transform-origin:0 100%;
  71.             -o-transform-origin:0 100%;
  72.             transform-origin:0 100%;
  73.         }
  74.         .cuore:after {
  75.             content:"";
  76.             width:20px;
  77.             height:30px;
  78.             position:absolute;
  79.    
  80.             left:0;
  81.             top:0;
  82.             background:red;
  83.             border-radius:60px 60px 0 0;
  84.             -moz-transform:rotate(45deg);
  85.             -webkit-transform:rotate(45deg);
  86.             -ms-transform:rotate(45deg);
  87.             -o-transform:rotate(45deg);
  88.             transform:rotate(45deg);
  89.             -moz-transform-origin:100% 100%;
  90.             -webkit-transform-origin:100% 100%;
  91.             -ms-transform-origin:100% 100%;
  92.             -o-transform-origin:100% 100%;
  93.             transform-origin:100% 100%;
  94.         }
  95.         .iscrizione{
  96.             background-color: lightgray;
  97.             padding: 10px;
  98.             font-weight: bold;
  99.             color: black;
  100.             border-radius: 5px;
  101.             display: inline-block;
  102.             cursor: pointer;
  103.         }
  104.     </style>
  105.     <title>YouTube</title>
  106. </head>
  107. <body>
  108.     <img src="img/londra1.jpg" alt=""><br>
  109.    
  110.   <div class="iscrizione">
  111.         ISCRIVITI
  112.     </div><br><br>
  113.  
  114.   <div class="cuore">
  115.     &nbsp;
  116.   </div>
  117.    
  118.   <script>
  119.     const img = document.querySelector("img[src='img/londra1.jpg']");
  120.     const div = document.querySelector(".cuore");
  121.    
  122.     img.addEventListener("mouseenter", function () {
  123.        div.style.display = "block";
  124.     });
  125.  
  126.     img.addEventListener("mouseleave", function () {
  127.       div.style.display = "none";
  128.     });
  129.    
  130.   </script>
  131. </body>
  132. </html>
  133.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement