Write a markup and 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;
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);
}
.
This PowerPoint helps students to consider the concept of infinity.
Write a markup and Javascript file for a document that must contain th.docx
1. Write a markup and 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);
}
