2

Display web page background, on the web page I want a image that when clicked it runs a javascript alert that asks to enter two integers. If one is more/less then it displays the output in the javascript alert window. If it is equal it returns the saying "The numbers "" and "" are equal."

FIRST PROBLEM: is that once the button is clicked my .gif background stops running once the javascript alert window pops up. I would like to keep my .gif animation running while the java alert is going on. (i.e. the .gif is of ocean waves)

THIS PART IS CORRECT: If one is more/less then it displays the output in the javascript alert window.

SECOND PROBLEM: If it is equal it returns the saying "The numbers "" and "" are equal. It does give me the correct output, except when it returns the value my .gif is gone and all I have is just the saying "The numbers "" and "" are equal. on a blank webpage. I would like it to display the saying on the webpage with the .gif background. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<style>

html{
    background-image:url(images/BirdsOnThePost.gif);
    background-size:cover;
    background-color:#FFF;
    background-repeat:no-repeat;
    height:100%; 
}

h1{
    font-size:40px;
    font-family: 'Special Elite', cursive;
    color:#FFF;
    text-shadow: 3px 3px 3px #333333;
}




</style>
<script>

function myFunction()
{

// Wait for window load

var firstnum;
var secondnum;
firstnum = window.prompt("Enter any Integer Value:");
secondnum = window.prompt("Enter any second Integer Value:");
var first = parseInt(firstnum);
var second = parseInt(secondnum);
if(first>second)
{
window.alert( first + " is Larger than " + second );
}
else if(second>first)
{
window.alert( second + " is Larger than " + first );
}

else if(first == second)
{
document.writeln("<h1>The numbers "  + first + " and " + second +  " are equal</h1> ");
}
}


</script>

</head>

<body>

<h1></h1>
<input type="button" onclick="myFunction()" value="Show alert box" />
</body>

</html>
4

1 回答 1

1

I can help with the second problem.

If you add an element to your page like:

<div id="output"></div>

and then instead of

document.writeln("<h1>The numbers "  + first + " and " + second +  " are equal</h1> ");

have

var html = "<h1>The numbers "  + first + " and " + second +  " are equal</h1>"
document.getElementById('output').innerHTML = html;

this will print your message over the background like you want.

As the the first problem, I ran an animated gif in the background using your code and it didn't stop when I clicked the alert button, so I don't know what's going on with that. It seems fine.

于 2013-09-15T17:08:42.333 回答