<style><!-- [et_pb_line_break_holder] --> #container{<!-- [et_pb_line_break_holder] --> float:left; /* add this */<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --> #arrow {<!-- [et_pb_line_break_holder] --> overflow: hidden; /* if you don't want #second to wrap below #first */<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> <div><!-- [et_pb_line_break_holder] --> <button id="button">Klik hier</button><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> <div id="container"><!-- [et_pb_line_break_holder] --> <img src="https://training.dreamsupportacademie.nl/wp-content/uploads/2019/06/wheel_centered_transparent.png" id="image" /><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> <div style="padding-top: 240px" id="arrow"><!-- [et_pb_line_break_holder] --> <img src="https://training.dreamsupportacademie.nl/wp-content/uploads/2019/07/Screen-Shot-2019-07-08-at-10.09.14-AM.png" id="image" /><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></div><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> var deg = 0 //degree<!-- [et_pb_line_break_holder] --> var rotateInterval = 10 //ms<!-- [et_pb_line_break_holder] --> var stopperInterval = 10 //ms<!-- [et_pb_line_break_holder] --> var degInc = 10<!-- [et_pb_line_break_holder] --> var degIncDec = 0.02<!-- [et_pb_line_break_holder] --> var rotateIntervall = null<!-- [et_pb_line_break_holder] --> var timeoutIntervall = null<!-- [et_pb_line_break_holder] --> var timeoutTimer = null<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->document.getElementById('button').onclick = function() {<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // TODO: make sure the wheel is unbiassed<!-- [et_pb_line_break_holder] --> // n = w * t = (deg / 360) * t<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function getRndInteger(min, max) {<!-- [et_pb_line_break_holder] --> return Math.floor(Math.random() * (max - min) ) + min;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> clearInterval(rotateIntervall);<!-- [et_pb_line_break_holder] --> clearInterval(timeoutIntervall);<!-- [et_pb_line_break_holder] --> clearTimeout(timeoutTimer);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> deg = getRndInteger(0, 360)<!-- [et_pb_line_break_holder] --> rotateInterval = 10 //ms<!-- [et_pb_line_break_holder] --> stopperInterval = 10 //ms<!-- [et_pb_line_break_holder] --> degInc = 10<!-- [et_pb_line_break_holder] --> degIncDec = 0.02<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> rotateIntervall = setInterval(function() {<!-- [et_pb_line_break_holder] --> deg = deg + degInc<!-- [et_pb_line_break_holder] --> img = document.getElementById('image');<!-- [et_pb_line_break_holder] --> img.setAttribute('style','transform:rotate(' + deg + 'deg)');<!-- [et_pb_line_break_holder] --> }, rotateInterval);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> timeoutTimer = setTimeout(function() {<!-- [et_pb_line_break_holder] --> timeoutIntervall = setInterval(function() {<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> degInc = degInc - degIncDec<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> if (degInc <= 0)<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> clearInterval(rotateIntervall);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }, stopperInterval);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> }, getRndInteger(0, 5000));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> console.log("stopped")<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></script>