我试图在访问我的网站时随机更改背景。
我将一些图像保存为 1.jpg、2.jpg 等，并尝试随机生成一些 javascript。谁能猜出为什么这行不通？我知道您将无法看到照片，但任何帮助都将非常有用。
这是 jsbin - 注意在 css 的#topContainer 中选择了背景
https://jsbin.com/qodukozuqi/edit?html,output
<script type="text/javascript">
function randomBackground () {
var randomPicture = [Math.floor(Math.random() * 4)+ '.jpg'];
}
return randomPicture;
</script>
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Tenor+Sans::latin', 'Rock+Salt::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
<script type="text/javascript">
function randomBackground () {
var randomPicture = [Math.floor(Math.random() * 4)+ '.jpg'];
return randomPicture;
}
</script>
<title>NaturallyPizza</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Tenor+Sans|Rock+Salt' rel='stylesheet' type='text/css'/>
<style>
.navbar-collapse{
color: white;
}
.navbar-brand {
font-size: 1.5em;
font-family: 'Rock Salt', sans-serif;
color: white;
}
.navbar-default {
margin-top: 30px;
background-color: transparent;
border: hidden;
font-family: 'Tenor Sans', sans-serif;
}
.listing a{
font-size: 1.5em;
color: white;
}
#topContainer {
background-image: url("images/background/"+randomPicture);
height: 500px;
width: 100%;
opacity: 0.95;
background-size: cover;
color: white;
}
.navbar-default .navbar-brand {
color: white;
}
@media (max-width: 760px) {
.navbar-default {
background-color: lightgrey;
opacity: 0.95;
}
}
#topRow {
margin-top: 130px;
font-family: 'Tenor Sans', sans-serif;
}
.center {
text-align: center;
}
.title {
font-size: 3em;
color: white;
}
.backing {
background-color: grey;
opacity: 0.6;
border-radius: 10px;
}
.marginTop {
margin-top: 30px;
}
.jumbotron {
background-image: url("images/background/1.jpg");
background-size: cover;
}
</style>
</head>
<body>
<script type="text/javascript">alert(randomBackground);</script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar color-me"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">NaturallyPizza</a>
</div> <!-- class="navbar-header" -->
<div class="collapse navbar-collapse navbar-right listing">
<ul class="nav navbar-nav">
<li class="color-me"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> <!-- class="collapse navbar-collapse" -->
</div>
</div> <!-- class="navbar navbar-default" -->
<div class="container-fluid contentContainer" id="topContainer">
<div class="row-fluid">
<div class="col-md-8 col-md-offset-2 backing" id="topRow">
<h1 class="title marginTop center">Learn to make great Pizza!</h1>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(".contentContainer").css("min-height", $(window).height());
</script>
</body>
</html>
最佳答案
不能在 CSS 中使用 JS，必须直接使用 javascript 设置样式(将此代码放在页面末尾，#topContainer 之后):
<script>
var el = document.getElementById('topContainer');
el.style.backgroundImage = 'url(images/background/' + Math.floor(Math.random() * 4) + '.jpg)';
</script>
关于javascript - 使用 Javascript 和 CSS 的随机背景生成器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32567420/