-1

我的网页加载了背景，然后我点击链接，它给了我预期的 javascript，但是一旦它完成并输出结果，它就会进入一个空白的白色屏幕，显示我的结果。我希望结果以背景显示在我的网页上。我已经尝试过，但无济于事。这是我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function myFunction()
{

var accountnum;
var beginningBal;
var itemsCharged;
var credits;
var creditLimit;
var sum;

accountnum = window.prompt("Enter the account number:");

beginningBal = window.prompt("Enter the beginning balance:");

itemsCharged = window.prompt("Total of all items charged:");

credits = window.prompt("Total credits applied to this account:");

creditLimit = window.prompt("Enter the credit limit: ");

var zero = parseInt (accountnum);
var first = parseInt(beginningBal);
var second = parseInt(itemsCharged);
var third = parseInt (credits);
var fourth = parseInt (creditLimit);
var sum = first + second - third;
var diff = fourth - sum;
if (sum < fourth)
{
    document.writeln("<h1>Your account number is:" + zero);
    document.writeln("<h1>Your beginning balance is: $" + first);
    document.writeln("<h1>Total of items charged: $" + second);
    document.writeln("<h1>Total credits applies to this account: $" + third);
    document.writeln("<h1>Your credit limit is: $" + fourth);
    document.writeln("<h1>Your account balance is: $" + sum);
    document.writeln("<h1>Your credit is: $" + diff);
    document.getElementById('output').innerHTML = html;

}
else if (sum > fourth)
{
    document.writeln("<h1>Your account number is:" + zero);
    document.writeln("<h1>Your beginning balance is: $" + first);
    document.writeln("<h1>Total of items charged: $" + second);
    document.writeln("<h1>Total credits applies to this account: $" + third);
    document.writeln("<h1>Your new account balance is: $" + sum);
    document.writeln("<h1>Your credit limit is: $" + fourth);
    document.writeln("<h1>Your new balance is: $" + diff);
    document.writeln("<h1>Your credit is exceeded!");
    document.getElementById('output').innerHTML = html;
}
else if (sum == fourth)
{
    document.writeln("<h1>Your account number is:" + zero);
    document.writeln("<h1>Your beginning balance is: $" + first);
    document.writeln("<h1>Total of items charged: $" + second);
    document.writeln("<h1>Total credits applies to this account: $" + third);
    document.writeln("<h1>Your account balance is: $" + sum);
    document.writeln("<h1>Your credit limit is: $" + fourth);
    document.writeln("<h1>Your new balance is: $" + diff);
    document.writeln("<h1>You are out of credit!");
    document.getElementById('output').innerHTML = html;
}
}

</script>
<style>
#output{
    height:43px;

}
html{
     background: url(images/nxerainbowgrid.jpg) no-repeat center center fixed;
     z-index:-9999; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/nxerainbowgrid.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/nxerainbowgrid.jpg', sizingMethod='scale')";
}
</style>
</head>

<body>
<a href="#" onClick="myFunction()"><p>CLICK HERE TO HAVE FUN!!!</p></a>
<div id="output"></div>
</body>
</html>
4

1 回答 1

1

虽然这不是最好的方法。或正确的方法。你不应该重复很​​多代码。并使用提示。以下可能是临时解决方案

定义 html 并将 ccs 样式更改为 body。在这种情况下。背景图像将应用于页面主体

 var html;
 if(sum<forth){
    html ="<h1> Your account number is:" + zero + "</h1>";
    html ="<h1>Your beginning balance is: $" + first + "</h1>";
    html ="<h1>Total of items charged: $" + second + "</h1>";
    html ="<h1>Total credits applies to this account: $" + third + "</h1>";
    html ="<h1>Your credit limit is: $" + fourth + "</h1>";
    html ="<h1>Your account balance is: $" + sum + "</h1>";
    html ="<h1>Your credit is: $" + diff + "</h1>";
    document.getElementById('output').innerHTML = html;
}    


 body{
    background: url(index.jpeg) no-repeat center center fixed;
    /*keep all other. only change the tag name*/
}
于 2013-09-23T03:05:12.557 回答