Javascript一直隐藏我的网络背景

Javascript keeps hiding my web background

本文关键字：网络 背景 我的 隐藏 一直 Javascript      更新时间：2023-09-26

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

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

定义 HTML 并将 CCS 样式更改为正文。 在这种情况下。 背景图像将适合页面的正文

 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*/
}
相关文章：