1. 首頁
  2. 問答
  3. Chrome不顯示我的網站

Chrome不顯示我的網站

2016-11-13 83 views
-3

網站不在Chrome上加載JavaScript我不知道爲什麼，而Mozilla正確顯示它。 不知道什麼是錯的。Chrome不顯示我的網站

網站主要功能 1.獲取客戶的地理位置（經緯度第一長並找到最近的城市） 2. openweathermap API獲取天氣數據網站 3.顯示它。

Link to website

// Taken and modifed from https://roessland.com/blog/free-code-camp-3-a-random-quote-machine/ 
 
$(document).ready(function() { 
 
// geo 
 

 
if (navigator.geolocation) { 
 
navigator.geolocation.getCurrentPosition(function(position) { 
 
var lat_lat = position.coords.latitude; 
 
var lon_lon = position.coords.longitude; 
 
//google maps 
 
var geocoder = new google.maps.Geocoder(); 
 
var latitude = lat_lat; 
 
var longitude = lon_lon; 
 
var latLng = new google.maps.LatLng(latitude,longitude); 
 
geocoder.geocode({  
 
     latLng: latLng  
 
     }, 
 
     function(responses) 
 
     {  
 
      if (responses && responses.length > 0) 
 
      {  // starting weather API 
 
       var addressas = (responses[2].address_components[4].long_name); //get address 
 

 
       $.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?q="+addressas+"&mode=json&units=metric&cnt=10&APPID=5b18b37cb72f7fbdc5714dc6b3798007 ",function(result){ 
 
        // Get and convert temperatures from celsius to farenghate 
 
        
 
        var curentDayTemp = Math.round(result.list[0].temp.day); 
 
        var curentNightTemp = Math.round(result.list[0].temp.night); 
 
        var secDayTemp = Math.round(result.list[1].temp.day); 
 
        var secNightTemp = Math.round(result.list[1].temp.night); 
 
        var thirdDayTemp = Math.round(result.list[2].temp.day); 
 
        var thirdNightTemp = Math.round(result.list[2].temp.night); 
 
        var forthDayTemp = Math.round(result.list[3].temp.day); 
 
        var forthNightTemp = Math.round(result.list[3].temp.night); 
 

 
        // feting celsius to far     
 
        function toFar(cels) { 
 
        return cels*1.8 + 32; 
 
        } 
 

 
        $("p.city").html(result.city.name); 
 
        $("div.today > p.cur-weather").html(result.list[0].weather[0].description); 
 
        $("div.today > p.max-temp-cel").html("Day "+ curentDayTemp+" ℃"); 
 
        $("div.today > p.min-temp-cel").html("Night "+ curentNightTemp+" ℃"); 
 
        $("div.today > p.max-temp-far").html("Day "+ Math.round(toFar(curentDayTemp))+" ℉"); 
 
        $("div.today > p.min-temp-far").html("Night "+ Math.round(toFar(curentNightTemp))+" ℉"); 
 
        $("div.today > p.humidity").html("Humidity: "+result.list[0].humidity); 
 
        $("div.today > p.wind-speed").html("Wind speed: "+ result.list[0].speed); 
 
        $("div.today > p.pressure").html("Pressure: "+ result.list[0].pressure); 
 
        $("div.today > p.clouds").html("Clouds: "+ result.list[0].clouds+"%"); 
 
        // 2nd day 
 
        $("div.2nd-day > p.cur-weather").html(result.list[1].weather[0].description); 
 
        $("div.2nd-day > p.max-temp-cel").html("Day "+ secDayTemp+" ℃"); 
 
        $("div.2nd-day > p.min-temp-cel").html("Night "+ secNightTemp+" ℃"); 
 
        $("div.2nd-day > p.max-temp-far").html("Day "+ Math.round(toFar(secDayTemp))+" ℉"); 
 
        $("div.2nd-day > p.min-temp-far").html("Night "+ Math.round(toFar(secNightTemp))+" ℉"); 
 
        $("div.2nd-day > p.humidity").html("Humidity: "+result.list[1].humidity); 
 
        $("div.2nd-day > p.wind-speed").html("Wind speed: "+ result.list[1].speed); 
 
        $("div.2nd-day > p.clouds").html("Clouds: "+ result.list[1].clouds+"%"); 
 
        // 3rd day 
 
        $("div.3rd-day > p.cur-weather").html(result.list[2].weather[0].description); 
 
        $("div.3rd-day > p.max-temp-cel").html("Day "+ thirdDayTemp+" ℃"); 
 
        $("div.3rd-day > p.min-temp-cel").html("Night "+ thirdNightTemp+" ℃"); 
 
        $("div.3rd-day > p.max-temp-far").html("Day "+ Math.round(toFar(thirdDayTemp))+" ℉"); 
 
        $("div.3rd-day > p.min-temp-far").html("Night "+ Math.round(toFar(thirdNightTemp))+" ℉"); 
 
        $("div.3rd-day > p.humidity").html("Humidity: "+result.list[2].humidity); 
 
        $("div.3rd-day > p.wind-speed").html("Wind speed: "+ result.list[2].speed); 
 
        $("div.3rd-day > p.clouds").html("Clouds: "+ result.list[2].clouds+"%"); 
 
        // 4th day 
 
        $("div.4th-day > p.cur-weather").html(result.list[3].weather[0].description); 
 
        $("div.4th-day > p.max-temp-cel").html("Day "+ forthDayTemp+" ℃"); 
 
        $("div.4th-day > p.min-temp-cel").html("Night "+ forthNightTemp+" ℃"); 
 
        $("div.4th-day > p.max-temp-far").html("Day "+ Math.round(toFar(forthDayTemp))+" ℉"); 
 
        $("div.4th-day > p.min-temp-far").html("Night "+ Math.round(toFar(forthNightTemp))+" ℉"); 
 
        $("div.4th-day > p.humidity").html("Humidity: "+result.list[3].humidity); 
 
        $("div.4th-day > p.wind-speed").html("Wind speed: "+ result.list[3].speed); 
 
        $("div.4th-day > p.clouds").html("Clouds: "+ result.list[3].clouds+"%"); 
 
        
 

 

 
        // add dates 
 
        var today = new Date(); 
 
        var toD = today.getDate(); 
 
        var toM = today.getDate()+1; 
 
        var toAT = today.getDate()+2; 
 
        var toATT = today.getDate()+3; 
 
        var mm = today.getMonth(); 
 
        var yyyy = today.getFullYear(); 
 
today = yyyy+'-'+mm+'-'+toD; 
 
tomorow = yyyy+'-'+mm+'-'+toM; 
 
dayAfterTomorow = yyyy+'-'+mm+'-'+toAT; 
 
dayAfterTomorowTomorow = yyyy+'-'+mm+'-'+toATT; 
 
$("p.today-time").html(today); 
 
$("p.sec-time").html(tomorow); 
 
$("p.thrd-time").html(dayAfterTomorow); 
 
$("p.forth-time").html(dayAfterTomorowTomorow); 
 

 
        
 
      $('.celsius').click(function() { 
 
       var $this = $(this); 
 
    $this.toggleClass('fahrenheit celsius'); 
 
    if($this.hasClass('fahrenheit')){ 
 
     $this.text('Fahrenheit');  
 
    } else { 
 
     $this.text('Celsius'); 
 
    } 
 
    $('.far-cel-toggle').toggleClass('hide show'); 
 
}); 
 
      
 
     
 
        // Add class to body for background 
 
        var str = result.list[0].weather[0].id; 
 
        var chClass = document.getElementById("tarback"); 
 
        chClass.className += "a"+str;  
 
        // Add class for weather icons 
 
        var str1 = result.list[1].weather[0].id; 
 
        var str2 = result.list[2].weather[0].id; 
 
        var str3 = result.list[3].weather[0].id; 
 
        var icClass = document.getElementById("wi-ic"); 
 
        icClass.className += "wi wi-owm-"+str; 
 
        var icClass = document.getElementById("wi-ic1"); 
 
        icClass.className += "wi wi-owm-"+str1; 
 
        var icClass = document.getElementById("wi-ic2"); 
 
        icClass.className += "wi wi-owm-"+str2; 
 
        var icClass = document.getElementById("wi-ic3"); 
 
        icClass.className += "wi wi-owm-"+str3; 
 
        
 

 

 
     }); 
 

 
      } 
 
      else 
 
      {  
 
      alert('Not getting Any address for given latitude and longitude.');  
 
      } 
 
     } 
 

 
); 
 

 
}); 
 

 
} 
 

 
});
/* thunderstorm */ 
 
body.a200, body.a201, body.a202, body.a210, body.a211, body.a212, body.a221, body.a230, body.a231, body.a232 { 
 
\t background-image: url(https://simsim.lt/fcc/img/thunderstorm.jpg); 
 
} 
 
/* Drizzle */ 
 
body.a300, body.a301, body.a302, body.a310, body.a311, body.a312, body.a313, body.a314, body.a321 { 
 
\t background-image: url(https://simsim.lt/fcc/img/drizzle.jpg); 
 
} 
 
/* Rain */ 
 
body.a500, body.a501, body.a502, body.a503, body.a504, body.a511, body.a520, body.a521, body.a522, body.a531 { 
 
\t background-image: url(https://simsim.lt/fcc/img/rain.jpg); 
 
} 
 
/* Snow */ 
 
body.a906, body.a903, body.a600, body.a601, body.a602, body.a611, body.a612, body.a615, body.a616, body.a620, body.a621, body.a622 { 
 
\t background-image: url(https://simsim.lt/fcc/img/snow.jpg); 
 
} 
 
/* Atmosphere */ 
 
body.a701, body.a711, body.a721, body.a731, body.a741, body.a751, body.a761, body.a762, body.a771, body.a781 { 
 
\t background-image: url(https://simsim.lt/fcc/img/fog.jpg); 
 
} 
 
/* Clear sky */ 
 
body.a800 { 
 
\t background-image: url(https://simsim.lt/fcc/img/clear-sky.jpeg); 
 
} 
 
/* Clouds */ 
 
body.a801, body.a802, body.a803, body.a804 { 
 
\t background-image: url(https://simsim.lt/fcc/img/clouds.jpg); 
 
} 
 
/* hurricane */ 
 
body.a961, body.a960, body.a902, body.a962, body.a900, body.a901 { 
 
\t background-image: url(https://simsim.lt/fcc/img/hurricane.jpg); 
 
} 
 
/* hot */ 
 
body.a904 { 
 
\t background-image: url(https://simsim.lt/fcc/img/hot.jpg); 
 
} 
 
/* windy */ 
 
body.a905, body.a954, body.a955, body.a956, body.a958, body.a957, body.a959 { 
 
\t background-image: url(https://simsim.lt/fcc/img/windy.jpg); 
 
} 
 
/* Clam */ 
 
body.a951, body.a952, body.a953 { 
 
\t background-image: url(https://simsim.lt/fcc/img/clam.jpg); 
 
} 
 
.block-warp { 
 
\t background-color: rgba(0, 0, 0, 0.7); 
 
\t border-radius: 5px; 
 
\t margin: 2% 0 0 0; 
 
\t padding: 1%; 
 
} 
 
.last-3 p, .last-3 i { 
 
    color: darkseagreen; 
 
} 
 
.strong {font-weight: bold;} 
 
.main i, .main p { color: beige; } 
 
.icon-wrap, .icon, 
 
.icon-wrap, .wi { 
 
    font-size: 50px; 
 
padding: 0% 0 1% 0;} 
 
.link {text-align: center;} 
 
.hide {display: none;} 
 

 
#buttonas{ 
 
    display: block; 
 
    margin:1% auto; 
 
    font-family: 'Oswald', sans-serif; 
 
    background-color: transparent; 
 
border: black 3px solid; 
 
width: 10%; 
 
line-height: 2em; 
 
}
<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="https://simsim.lt/fcc/style.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
     <link href="https://fonts.googleapis.com/css?family=Oswald|Shrikhand" rel="stylesheet"> 
 
    <link rel="stylesheet" type="text/css" href="http://simsim.lt/fcc/css/weather-icons.css"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
    <script type="text/javascript"> 
 
     
 
    </script> 
 
    
 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
    </head>   
 
    <body id="tarback" class=""> 
 
     <div class="warp container-fluid"> 
 
     <div class="link strong red"><a class="test" href="https://freecodecamp.com">Free code camp</a> and <a href="http://openweathermap.org/">Open Weather map API</a></div> 
 
     <div> 
 
      <button id="buttonas" class="celsius">Celsius</button> 
 
      </div> 
 
      <div class="block-warp"> <!-- Main block--> 
 
      <div class="row text-center"> 
 
       <div class="today main strong"> 
 
       <p class="today-time"></p> 
 
       <p class="city h1"></p> 
 
       <p class="cur-weather h3"></p> <!-- curent temp --> 
 
       <i id="wi-ic" class=""></i> 
 
       <div class="row"> 
 
       <div class="col-xs-4 col-sm-1 today col-md-offset-5"> 
 
       <p class="far-cel-toggle curent-temp-min min-temp-cel show"></p> 
 
       <p class="far-cel-toggle curent-temp-min min-temp-far hide"></p> 
 
       </div> 
 
       <div class="col-xs-2 col-sm-1 today"> 
 
        <p class="far-cel-toggle curent-temp-max max-temp-cel show"></p> 
 
        <p class="far-cel-toggle curent-temp-max max-temp-far hide"></p> 
 
        </div> 
 
        </div> 
 
        <div class="row"> 
 
       <div class="col-xs-4 col-sm-1 today col-md-offset-5"> 
 
       <p class="humidity"></p> 
 
       </div> 
 
       <div class="col-xs-2 col-sm-1 today"> 
 
        <p class="wind-speed"></p> 
 
        </div> 
 
        </div> 
 
       <div class="row"> 
 
       <div class="col-xs-4 col-sm-1 today col-md-offset-5"> 
 
       <p class="clouds"></p> 
 
       </div> 
 
       <div class="col-xs-2 col-sm-1 today"> 
 
        <p class="pressure"></p> 
 
        </div> 
 
        </div> 
 
       
 
       </div> <!-- today ends --> 
 
      </div><!-- row ends --> 
 
      </div><!-- inner warp ends --> 
 
      <div class="last-3"> 
 
      <div class="row text-center"> 
 
      <div class="col-xs-2 col-md-2 col-md-offset-2 block-warp"> 
 
       <div class="2nd-day"> 
 
       <p class="sec-time"></p> 
 
       <p class="cur-weather h4"></p> <!-- curent temp --> 
 
       <i id="wi-ic1" class=""></i> 
 
       <p class="cur-temp"></p> 
 
       <p class="far-cel-toggle min-temp-cel show"></p> 
 
       <p class="far-cel-toggle min-temp-far hide"></p> 
 
       <p class="far-cel-toggle max-temp-cel show"></p> 
 
       <p class="far-cel-toggle max-temp-far hide"></p> 
 
       <p class="humidity"></p> 
 
       <p class="wind-speed"></p> 
 
       <p class="clouds"></p> 
 
       </div><!-- 2nd day ends --> 
 
      </div><!-- coll ends --> 
 
      <div class="col-xs-2 col-md-2 col-md-offset-1 block-warp"> 
 
       <div class="3rd-day"> 
 
       <p class="thrd-time"></p> 
 
       <p class="cur-weather h4"></p> <!-- curent temp --> 
 
       <i id="wi-ic2" class=""></i> 
 
       <p class="cur-temp"></p> 
 
       <p class="far-cel-toggle min-temp-cel show"></p> 
 
       <p class="far-cel-toggle min-temp-far hide"></p> 
 
       <p class="far-cel-toggle max-temp-cel show"></p> 
 
       <p class="far-cel-toggle max-temp-far hide"></p> 
 
       <p class="humidity"></p> 
 
       <p class="wind-speed"></p> 
 
       <p class="clouds"></p> 
 
       </div><!-- 3rd day ends --> 
 
      </div><!-- coll ends --> 
 
      <div class="col-xs-2 col-md-2 col-md-offset-1 block-warp"> 
 
       <div class="4th-day"> 
 
       <p class="forth-time"></p> 
 
       <p class="cur-weather h4"></p> <!-- curent temp --> 
 
       <i id="wi-ic3" class=""></i> 
 
       <p class="cur-temp"></p> 
 
       <p class="far-cel-toggle min-temp-cel show"></p> 
 
       <p class="far-cel-toggle min-temp-far hide"></p> 
 
       <p class="far-cel-toggle max-temp-cel show"></p> 
 
       <p class="far-cel-toggle max-temp-far hide"></p> 
 
       <p class="humidity"></p> 
 
       <p class="wind-speed"></p> 
 
       <p class="clouds"></p> 
 
       </div><!-- 4th day ends --> 
 
      </div><!-- coll ends --> 
 
      </div><!-- row ends --> 
 
     </div> 
 
     </div> 
 
     
 
    
 
    </body> 
 
    
 
    </html>

來源

2016-11-13 EdenLT

+1

限制因原因而設置。請不要將您的codepen作爲代碼發佈到這裏，只是爲了獲得限制。其實郵編*在這裏* ... – Li357

+0

對不起，安德魯你看到即時新在這裏，只是尋找幫助，我可以發佈地址？在評論中？或者只是在這裏發佈整個代碼？ – EdenLT

+1

發佈網址很好，但不要將其作爲代碼發佈，請將其作爲常規鏈接發佈。然後包括相關的代碼*在帖子中* – Li357

回答

1

您只能在Chrome中使用地理位置的FOM一個安全的網站（即HTTPS協議）：

See documentation：

注意：從Chrome 50開始，Geolocation API只能在HTTPS等安全上下文中使用。如果您的網站位於非安全來源（例如HTTP）上，則獲取用戶位置的請求將不再起作用。

來源

2016-11-13 01:11:08 nicovank

+0

是的，我只是上傳'我的網頁和它的工作，如果允許加載不安全的內容頁面。 只需openweathermap API即可免費使用http訪問 – EdenLT

相關問題

 相關問題