Download to read offline
Write a markup and Javascript file for a document that must contain th.docx
- 1. Write a markupand Javascript file for a document that must contain the statetment "Save time with time saver 2.2", which continously moves back and forth accros the top of the display. then modify it to change the color between red and blue every fifth step of its movement, then modify it to input the starting and ending position of the element to be moved. Solution <!-- HTML file --> <!doctype html> <html lang="en"> <head> <title>Time-Saver 2.2</title> <meta charset="utf-8" /> <style> #theText { position: fixed; color: blue; } </style> <script src="Scrolling.js"></script> </head> <body onload = "initScroll()"> <h1 id = 'theText'> Save time with TIME-SAVER 2.2</h1> </body> </html> // javascript file Scrolling.js var markquee, speed, x, maximumX, MinimumX; MinimumX = 100; maximumX = 500;
- 2. function initScroll() { speed =1; //Determines whether the statement scrolls right (positive) or left (negative). markquee = document.getElementById('theText').style; markquee.left = "10px";Â Â //For some reason, when you set markquee.left = x + "px";, it adds an extra 0. So 10 -> 100. x = markquee.left; x = x.match(/d+/);Â Â //This strips out the "px" from the .left value, turning it into just a number. scroll(x); } function scroll(x) { //We alternate color every 5th step. if (x%5 == 0) { if (markquee.color == "red") markquee.color = "blue"; else markquee.color = "red"; } //Determine whether to go left or right. if (x >= maximumX) speed = -1; else if (x <= MinimumX) speed = 1; //Change the position x += speed; markquee.left = x+"px"; //Re-call this function in 5 ms setTimeout("scroll(" + x + ")", 5); }