将javascript输出消息返回到html体中

时间:2013-09-15 16:23:46

标签: javascript html css html5

显示网页背景,在网页上我想要一个图像,当点击它运行一个javascript警告,要求输入两个整数。如果一个更多/更少,那么它将在javascript警报窗口中显示输出。如果它相等则返回说“数字”和“”相等。“

第一个问题:一旦点击按钮,我的.gif背景会在弹出javascript警告窗口后停止运行。我想在java警报进行时保持我的.gif动画运行。 (即.gif是海浪)

这一部分是正确的:如果一个更多/更少,那么它会在javascript警告窗口中显示输出。

第二个问题:如果它是相等的,它会返回说“数字”和“”相等。它确实给了我正确的输出,除非它返回值我的.gif消失了,而我所拥有的只是说“数字”和“”是平等的。在一个空白的网页上。我希望它能在.gif背景的网页上显示这句话。

<!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>

1 个答案:

答案 0 :(得分:1)

我可以帮助解决第二个问题。

如果您向页面添加元素,例如:

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

然后代替

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

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

这将在您的背景上打印您的消息。

作为第一个问题,我使用你的代码在后台运行了一个动画gif,当我点击警告按钮时它并没有停止,所以我不知道发生了什么。看起来很好。