我正在制作免费代码阵营的天气应用程序，它在我的笔记本电脑上工作正常（使用notepad ++和firefox，在chrome上不起作用），除了它没有改变背景图像（第一个问题），第二个：当我把我的代码在codepen中它根本不起作用。请帮忙。以下是我笔的链接：
https://codepen.io/Rits_Verma/pen/mEKxrE?editors=1111
<!DOCTYPE html>
<html lang="en">
<head>
<title>Local Weather Page</title>
<meta charset="utf-8" />
<!--<script src="test.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="sc.js"></script>
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> -->
<link href="css/style.css" rel="stylesheet">
<link href="css/css/weather-icons.css" rel="stylesheet">
<link href="css/font" rel="stylesheet">
<!-- <link href="http://fonts.googleapis.com/css?family=Cardo:400,400italic|Radley|Tangerine" rel="stylesheet"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
</head>
<body>
<div class="jumbotron text-center">
<h1><i class="wi wi-day-rain-mix"></i> Weather App</h1>
</div>
<div class="container-fluid">
<div class="row text-center">
<h1><span class="city"></span></h1>
</div>
<div class="row text-center">
<h1 class="toggle"><a href="#"><span class="temp"></a></span></h1>
</div>
<div class="row text-center">
<h1><span class="clouds"></span></h1>
</div>
</div>
<footer>
Coded with <i class="fa fa-fw fa-heart fa-spin" style = "color:red;font-size:24px;"></i> by <a href="https://twitter.com/RituSkVerma" target="_blank">RITU</a>
</footer>
</body>
</html>
CSS
body {
width: 100%;
height: 100%;
background-size: cover;}
.jumbotron {
padding: 0.5em 0.6em;
background-color: rgba(0, 0, 0, 0.5);
h1 {
font-size: 2em;
color:#f6f8f9;
}
p {
font-size: 1.2em;
.btn {
padding: 0.5em;
}
}
}
.jumbotron h1{
color:#f6f8f9;
}
h1{
font-family: 'Special Elite', cursive;
font:18px;
}
footer{
position: fixed;
bottom: 0px;
width:100%;
padding:10px;
/* padding: 2px 0 4px 0; */
text-align: center;
font-family: 'Special Elite', cursive;
background-color: #333;
color: white;
}
footer a{
color:white;
}
a {
color:#f6f8f9;
text-decoration: none !important;
}
a:active {
color:white;
text-decoration: none !important;
}
a:visited {
color:white;
text-decoration: none !important;
}
a:hover {
color:white;
text-decoration: none !important;
}
/*media queries */
/*
@media screen and (max-width: 480px) {
body {
width: 100%;
height: 670px;
background-size: cover;}
}
@media screen and (max-width: 320px) {
body {
width: 100%;
height: 100%;
background-size: cover;}
}
*/
JS
$(document).ready(function(){
/* $("body").css("background-image", "url('img/giphy.gif')"); */
var lattitude;
var longitude;
var toggleC = true;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lattitude = position.coords.latitude;
longitude = position.coords.longitude;
/* $("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
*/console.log("lat "+lattitude);
var api='http://api.openweathermap.org/data/2.5/weather?lat='+lattitude+'&lon='+longitude+'&appid=518b05d055aad92f54e053f3b2221c12';
console.log(api);
$.getJSON(api, function(data){
var weatherType=data.weather[0].description;
var kelvin = data.main.temp;
var celcius = Math.round(kelvin-273.15);
var fahren = Math.round(kelvin*(9/5)-459.67);
var city=data.name;
/* var cl=data.clouds.all; */
console.log("Hello "+weatherType);
/* console.log("city "+city);
console.log("temp "+celcius);
console.log("temp "+fahren); */
console.log("temp "+data.main);
$('.city').text(city);
$('.temp').text(fahren+'\xB0'+" F");
$('.clouds').text(weatherType);
$('.toggle').on('click', function() {
if (toggleC == true) {
toggleC = false;
$('.temp').text(fahren + '\xB0' + " F");
} else if (toggleC == false) {
toggleC = true;
$('.temp').text(celcius +'\xB0' +" C");
}
});
if(weatherType=="clear sky" ||"calm") {
$("body").css({"backgroundImage": "url('img/resort-863129.jpg')","backgroundRepeat":"no-repeat"});
$("a").css("color","black");
}
else if(weatherType=="scattered clouds" ||"few clouds"||"broken clouds" ||"overcast clouds") {
$("body").css({"backgroundImage": "url('img/pigs-and-garden-011.jpg')"});
$("a").css("color","black");
}
else if(weatherType=="shower rain" || "light intensity shower rain" ||"ragged shower rain"||"light rain"||"light intensity drizzle" ||"drizzle" ||"heavy intensity drizzle" ||"light intensity drizzle rain "||"drizzle rain" ||"heavy intensity drizzle rain" ||"shower rain and drizzle" || "heavy shower rain and drizzle" || "shower drizzle" ||"light intensity shower rain" ||"heavy intensity shower rain") {
$("body").css({"backgroundImage": "url('img/gif___running_through_the_rain_by_turst67-d6scius.gif')","backgroundRepeat":"no-repeat"});
}
else if(weatherType=="very heavy rain" ||"moderate rain"||"heavy intensity rain" ||"very heavy rain" ||"extreme rain" ||"freezing rain" ||"heavy intensity shower rain") {
$("body").css({"backgroundImage": "url('img/rain-758107.jpg')"});
}
else if(weatherType=="thunderstorm" ||"light thunderstorm" ||"heavy thunderstorm"||"ragged thunderstorm") {
$("body").css("background-image","url('img/giphy (1).gif')");
$("h1,h2").css("color","white");
}
else if(weatherType=="thunderstorm with rain" ||"thunderstorm with light rain" ||"thunderstorm with heavy rain" || "thunderstorm with light drizzle" ||"thunderstorm with drizzle" || "thunderstorm with heavy drizzle") {
$("body").css("background-image", "url('img/maxresdefault.jpg')");
}
else if(weatherType=="snow" ||"light snow"||"heavy snow"||"sleet"||"shower sleet"||"light rain and snow"||"rain and snow"||"light shower snow"||"shower snow" ||"heavy shower snow") {
$("body").css({"backgroundImage": "url('img/crystals-335429.jpg')","backgroundRepeat":"no-repeat","backgroundPosition":"fixed center bottom no-repeat"});
$("a").css({"color":"#161d24"});
}
else if(weatherType=="mist" ||"smoke" || "haze" || "sand,dust whirls"||"fog"||"sand"||"dust"|| "volcanic ash" ||"squalls") {
$("body").css("background-image", "url('img/mist.jpg')");
}
else if(weatherType=="tornado" ||"tropical storm") {
$("body").css("background-image", "url(img/thunderstorm_an.gif)");
$("h1").css("color","#f6f8f9");
}
else if(weatherType=="hurricane"||" severe gale" ||"violent storm"){
$("body").css("background-image","url(img/hurricane.gif)");
$("h1").css("color","#f6f8f9");
}
else if(weatherType=="hot"){
$("body").css("background-image","url(img/sunset-473345.jpg)");
$("a").css("color","black");
}
else if(weatherType=="windy"){
$("body").css("background-image","url(img/grass-354737.jpg)")
$("h1").css("color","#f6f8f9");
}
else if(weatherType=="light breeze") {
$("body").css("background-image","url(img/sunset-731307.jpg)")
$("h1").css("color","black");
}
else if(weatherType=="fresh breeze" ||"gentle breeze" ||"moderate breeze") {
$("body").css("background-image","url(img/grass-520912_1920.jpg)")
$("h1").css("color","#f6f8f9");
}
else {
$("body").css("background-image","url('img/sunrise-1292301_1920.jpg')","backgroundRepeat","no-repeat","backgroundPosition","fixed center bottom no-repeat");
}
});
});
}
});