Javascript Course

Here is a simple JavaScript function that can be used to move a html element to a random direction in page.

click on the code to select it.
//sets a random absolute position to a html element; receives the html element
function moveElmRand(elm){
 elm.style.position ='absolute';
 elm.style.top = Math.floor(Math.random()*90+5)+'%';
 elm.style.left = Math.floor(Math.random()*90+5)+'%';
}

Funny example with auto-moving a button

- In the following example the moveElmRand() function is called when the mouse is over the button.
<h4>Example auto-moving html element</h4>
<p>Try to click on the following button.</p>

<button id='btn_test'>Catch Me</button>
<script>
//sets a random absolute position to a html element; receives the html element
function moveElmRand(elm){
 elm.style.position ='absolute';
 elm.style.top = Math.floor(Math.random()*90+5)+'%';
 elm.style.left = Math.floor(Math.random()*90+5)+'%';
}

//get the #btn_test
var btn_test = document.querySelector('#btn_test');

//register to call moveElmRand() on mouseenter event to #btn_test
btn_test.addEventListener('mouseenter', function(e){ moveElmRand(e.target);});

//register click to #btn_test
btn_test.addEventListener('click', function(e){ alert('You are Good.');});
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
Moving html element to a random direction

Last accessed pages

  1. How to use php variable in external js file (3470)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (134086)
  3. Node.js Move and Copy file (27511)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (74116)
  5. Classic Tween - Flash Animation (6016)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (383)
  2. SHA1 Encrypt data in JavaScript (292)
  3. PHP Unzipper - Extract Zip, Rar Archives (275)
  4. SHA256 Encrypt hash in JavaScript (264)
  5. Read Excel file data in PHP - PhpExcelReader (245)