[英]Random background generator with Javascript and CSS
I'm trying to make the background change randomly when coming to my site. 我试图在进入网站时随机更改背景。
I saved some images as 1.jpg, 2.jpg etc and I tried to do a bit of javascript random. 我将一些图像另存为1.jpg,2.jpg等,然后尝试随机执行一些javascript。 Can any one suss why this would not work? 谁能猜到为什么这行不通? I know you won't be able to see the photos, but any help would be great. 我知道您将无法看到这些照片,但是任何帮助都会很棒。
Here is the jsbin - notice the background is selected in #topContainer in css 这是jsbin-注意在CSS的#topContainer中选择了背景
https://jsbin.com/qodukozuqi/edit?html,output https://jsbin.com/qodukozuqi/edit?html,output
<script type="text/javascript">
function randomBackground () {
var randomPicture = [Math.floor(Math.random() * 4)+ '.jpg'];
}
return randomPicture;
</script>
Here is the full code: 这是完整的代码:
<!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>
Your return statement is outside of your function. 您的return语句不在函数范围内。
Just use this 只是用这个
function randomBackground() {
var randomPicture = [Math.floor(Math.random() * 4) + '.jpg'];
return randomPicture;
}
jsFiddle : https://jsfiddle.net/hbhz3x4L/ jsFiddle: https ://jsfiddle.net/hbhz3x4L/
You cannot use JS inside a CSS, you have to set the style directly with javascript (put this code at the end of the page, after #topContainer
): 您不能在CSS内使用JS,必须直接使用javascript设置样式(将此代码放在页面末尾的#topContainer
之后):
<script>
var el = document.getElementById('topContainer');
el.style.backgroundImage = 'url(images/background/' + Math.floor(Math.random() * 4) + '.jpg)';
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.