Question

我的网页加载了背景，然后我点击了链接，它给了我预期的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>

Answer 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*/
}

Javascript一直隐藏着我的网页背景

1 个答案: