Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // Write a script that creates 5 div elements and moves them in circular path with interval of 100 milliseconds
- (function () {
- 'use strict';
- var container = document.getElementById('container');
- var documentFragment = document.createDocumentFragment();
- var circleRadius = 150;
- var centerX = 300;
- var centerY = 300;
- var divCount = 5;
- var angleSizeInDegrees = 360 / divCount;
- var angleInDegrees = angleSizeInDegrees;
- var angleInRadians = angleInDegrees * Math.PI / 180.0;
- var startingAnglesInDegrees = new Array(divCount);
- for (var index = 0; index < divCount; index++) {
- var newDiv = document.createElement('div');
- newDiv.style.width = "50px";
- newDiv.style.height = "50px";
- newDiv.style.position = 'absolute';
- startingAnglesInDegrees[index] = angleInDegrees;
- newDiv.style.top = circleRadius * Math.cos(angleInRadians) + centerX + "px";
- newDiv.style.left = circleRadius * Math.sin(angleInRadians) + centerY + "px";
- newDiv.style.backgroundColor = "rgb(" + generateRandom(1, 255) + ", " +
- generateRandom(1, 255) + ", " + generateRandom(1, 255) + ")";
- documentFragment.appendChild(newDiv);
- angleInDegrees += angleSizeInDegrees;
- angleInRadians = angleInDegrees * Math.PI / 180.0;
- }
- container.appendChild(documentFragment);
- // lets move
- var divSet = document.getElementsByTagName('div');
- window.setInterval(moveDivs, 100);
- function moveDivs() {
- for (var index = 0; index < divSet.length; index++) {
- startingAnglesInDegrees[index]++;
- if (startingAnglesInDegrees[index] > 360) {
- startingAnglesInDegrees[index] = 0;
- }
- angleInRadians = startingAnglesInDegrees[index] * Math.PI / 180.0;
- divSet[index].style.top = (circleRadius * Math.cos(angleInRadians) + centerX) + "px";
- divSet[index].style.left = (circleRadius * Math.sin(angleInRadians) + centerY) + "px";
- }
- }
- function generateRandom(start, end) {
- return Math.floor(Math.random() * (end - start) + start + 1);
- }
- })();
Advertisement
Add Comment
Please, Sign In to add comment