Facebook

Re: Re: AnimationJS safest cryptocurrency exchange

From AlexEremenko, 5 Years ago, written in JavaScript.
This paste is a reply to Re: AnimationJS from AlexEremenko - view diff
URL https://pastebin.pl/view/8a4f9f0a
Embed
Download Paste or View Raw
Hits: 242
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="main.css">
  7. </head>
  8. <body>
  9.     <div class="ground">
  10.         <div class="ball" id="ball">
  11.  
  12.         </div>
  13.     </div>
  14.  
  15.     <input type="text" class="x">
  16.  
  17.     <script>
  18.         let ball = document.querySelector('.ball');
  19.         ball.onclick = function() {
  20.             let start = Date.now();
  21.  
  22.             let timer = setInterval(function() {
  23.                 let x = document.querySelector('.x');
  24.                 let xf = x.value + 'px';
  25.                 let timePassed = Date.now() - start;
  26.  
  27.                 ball.style.left = timePassed / 5 + 'px';
  28.  
  29.                 if (ball.style.left - 'px' > xf - 'px') clearInterval(timer);
  30.  
  31.             }, 20);
  32.         }
  33.     </script>
  34. </body>
  35. </html>
  36.      
  37.       <!DOCTYPE html>
  38. <html lang="ru">
  39. <head>
  40.     <meta charset="UTF-8">
  41.     <title>Title</title>
  42. </head>
  43. <body>
  44. <style>
  45.     .ground {
  46.         width: 500px;
  47.         height: 500px;
  48.         background: orange;
  49.         margin-bottom: 30px;
  50.         position: relative;
  51.     }
  52.  
  53.     .ball {
  54.         width: 100px;
  55.         height: 100px;
  56.         background: darkblue;
  57.         cursor: pointer;
  58.         position: absolute;
  59.     }
  60. </style>
  61.     <div class="ground">
  62.         <div class="ball" id="ball">
  63.         </div>
  64.     </div>
  65.  
  66.     <input type="text" class="x">
  67.  
  68.     <script>
  69.         let ball = document.querySelector('.ball');
  70.  
  71.         ball.addEventListener('click', function(evt) {
  72.            let timer = setInterval(function () {
  73.                 evt.preventDefault();
  74.                 let inputX = document.querySelector('.x');
  75.                 let step = 0;
  76.                 ball.style.left = step + 'px';
  77.                 step += 2;
  78.                 if (step > inputX.value) clearInterval(timer);
  79.             },20)
  80.         })
  81.     </script>
  82. </body>
  83. </html>

Reply to "Re: Re: AnimationJS"