Facebook

Re: AnimationJS safest cryptocurrency exchange

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

Replies to Re: AnimationJS rss

Title Name Language When
Re: Re: AnimationJS AlexEremenko javascript 4 Years ago.
Re: Re: AnimationJS AlexEremenko javascript 4 Years ago.

Reply to "Re: AnimationJS"