1. 首頁
  2. 問答
  3. 如何通過亞馬遜網絡服務更改雅虎天氣api的字體或圖標

如何通過亞馬遜網絡服務更改雅虎天氣api的字體或圖標

2017-08-01 48 views
2

基於此codepen示例，我想要改變其他人的天氣圖標，如this，這些圖標生成font-family: weather;，然後根據每個字母爲例：如何通過亞馬遜網絡服務更改雅虎天氣api的字體或圖標

.icon-0:before { content: ":"; } 
.icon-1:before { content: "p"; } 
.icon-2:before { content: "S"; } 
.icon-3:before { content: "Q"; } 
.icon-4:before { content: "S"; }

的Html代碼：

<div id="weather"></div>

JS代碼：

// v3.1.0 
//Docs at http://simpleweatherjs.com 
$(document).ready(function() { 
    $.simpleWeather({ 
    location: 'Austin, TX', 
    woeid: '', 
    unit: 'f', 
    success: function(weather) { 
     html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>'; 
     html += '<ul><li>'+weather.city+', '+weather.region+'</li>'; 
     html += '<li class="currently">'+weather.currently+'</li>'; 
     html += '<li>'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul>'; 

     $("#weather").html(html); 
    }, 
    error: function(error) { 
     $("#weather").html('<p>'+error+'</p>'); 
    } 
    }); 
});

CSS代碼：

@font-face { 
    font-family: 'weather'; 
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot'); 
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'), 
     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'), 
     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'), 
     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

... 
}

來源

2017-08-01 Pr_co

回答

0

你必須做的模板陣列將其所有的代碼，使每個代碼都有特定的模板，然後將代碼傳給這將生成HTML功能該代碼。看下面的代碼片斷，我已經爲Cloud-Rain Icon做了一個例子，同樣你可以創建其他模板。

// v3.1.0 
 
function getTemplate2(ico1, ico2) { 
 
    return '<section><div class="icon">\ 
 
    <div class="' + ico1 + '">\ 
 
     <div class="' + ico2 + '">\ 
 
     <div></div><div></div>\ 
 
     <div></div><div></div>\ 
 
     <div></div><div></div>\ 
 
     <div></div><div></div>\ 
 
     </div>\ 
 
    </div>\ 
 
    <div class="' + ico1 + '">\ 
 
    <div class="' + ico2 + '">\ 
 
     <div></div><div></div>\ 
 
     <div></div><div></div>\ 
 
     <div></div><div></div>\ 
 
     <div></div><div></div>\ 
 
     </div>\ 
 
    </div> \ 
 
    </div></section>'; 
 
} 
 

 
function getIcon(code) { 
 
    switch (code) { 
 
    case 27: 
 
    default: 
 
     // calling doe cloud-rain, 
 
     return getTemplate2('cloud', 'rain'); 
 
    } 
 
} 
 
//Docs at http://simpleweatherjs.com 
 
$(document).ready(function() { 
 
    $.simpleWeather({ 
 
    location: 'Austin, TX', 
 
    woeid: '', 
 
    unit: 'f', 
 
    success: function(weather) { 
 
     html = getIcon(weather.code); 
 
     html += '<h2><i class="icon-' + weather.code + '"></i> ' + weather.temp + '&deg;' + weather.units.temp + '</h2>'; 
 
     html += '<ul><li>' + weather.city + ', ' + weather.region + '</li>'; 
 
     html += '<li class="currently">' + weather.currently + '</li>'; 
 
     html += '<li>' + weather.wind.direction + ' ' + weather.wind.speed + ' ' + weather.units.speed + '</li></ul>'; 
 

 
     $("#weather").html(html); 
 
    }, 
 
    error: function(error) { 
 
     $("#weather").html('<p>' + error + '</p>'); 
 
    } 
 
    }); 
 
});
/* 
 
    Docs at http://http://simpleweatherjs.com 
 

 
    Look inspired by http://www.degreees.com/ 
 
    Used for demo purposes. 
 

 
    Weather icon font from http://fonts.artill.de/collection/artill-weather-icons 
 

 
    DO NOT hotlink the assets/font included in this demo. If you wish to use the same font icon then download it to your local assets at the link above. If you use the links below odds are at some point they will be removed and your version will break. 
 
*/ 
 

 
@font-face { 
 
    font-family: 'weather'; 
 
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot'); 
 
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 

 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #1192d3 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/austin-2.jpg) no-repeat bottom right; 
 
    background-size: cover; 
 
} 
 

 
body { 
 
    padding: 45px 0; 
 
    font: 13px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
} 
 

 
#weather { 
 
    width: 500px; 
 
    margin: 0px auto; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
} 
 

 
i { 
 
    color: #fff; 
 
    font-family: weather; 
 
    font-size: 150px; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    line-height: 1.0; 
 
    text-transform: none; 
 
} 
 

 
.icon-0:before { 
 
    content: ":"; 
 
} 
 

 
.icon-1:before { 
 
    content: "p"; 
 
} 
 

 
.icon-2:before { 
 
    content: "S"; 
 
} 
 

 
.icon-3:before { 
 
    content: "Q"; 
 
} 
 

 
.icon-4:before { 
 
    content: "S"; 
 
} 
 

 
.icon-5:before { 
 
    content: "W"; 
 
} 
 

 
.icon-6:before { 
 
    content: "W"; 
 
} 
 

 
.icon-7:before { 
 
    content: "W"; 
 
} 
 

 
.icon-8:before { 
 
    content: "W"; 
 
} 
 

 
.icon-9:before { 
 
    content: "I"; 
 
} 
 

 
.icon-10:before { 
 
    content: "W"; 
 
} 
 

 
.icon-11:before { 
 
    content: "I"; 
 
} 
 

 
.icon-12:before { 
 
    content: "I"; 
 
} 
 

 
.icon-13:before { 
 
    content: "I"; 
 
} 
 

 
.icon-14:before { 
 
    content: "I"; 
 
} 
 

 
.icon-15:before { 
 
    content: "W"; 
 
} 
 

 
.icon-16:before { 
 
    content: "I"; 
 
} 
 

 
.icon-17:before { 
 
    content: "W"; 
 
} 
 

 
.icon-18:before { 
 
    content: "U"; 
 
} 
 

 
.icon-19:before { 
 
    content: "Z"; 
 
} 
 

 
.icon-20:before { 
 
    content: "Z"; 
 
} 
 

 
.icon-21:before { 
 
    content: "Z"; 
 
} 
 

 
.icon-22:before { 
 
    content: "Z"; 
 
} 
 

 
.icon-23:before { 
 
    content: "Z"; 
 
} 
 

 
.icon-24:before { 
 
    content: "E"; 
 
} 
 

 
.icon-25:before { 
 
    content: "E"; 
 
} 
 

 
.icon-26:before { 
 
    content: "3"; 
 
} 
 

 
.icon-27:before { 
 
    content: "a"; 
 
} 
 

 
.icon-28:before { 
 
    content: "A"; 
 
} 
 

 
.icon-29:before { 
 
    content: "a"; 
 
} 
 

 
.icon-30:before { 
 
    content: "A"; 
 
} 
 

 
.icon-31:before { 
 
    content: "6"; 
 
} 
 

 
.icon-32:before { 
 
    content: "1"; 
 
} 
 

 
.icon-33:before { 
 
    content: "6"; 
 
} 
 

 
.icon-34:before { 
 
    content: "1"; 
 
} 
 

 
.icon-35:before { 
 
    content: "W"; 
 
} 
 

 
.icon-36:before { 
 
    content: "1"; 
 
} 
 

 
.icon-37:before { 
 
    content: "S"; 
 
} 
 

 
.icon-38:before { 
 
    content: "S"; 
 
} 
 

 
.icon-39:before { 
 
    content: "S"; 
 
} 
 

 
.icon-40:before { 
 
    content: "M"; 
 
} 
 

 
.icon-41:before { 
 
    content: "W"; 
 
} 
 

 
.icon-42:before { 
 
    content: "I"; 
 
} 
 

 
.icon-43:before { 
 
    content: "W"; 
 
} 
 

 
.icon-44:before { 
 
    content: "a"; 
 
} 
 

 
.icon-45:before { 
 
    content: "S"; 
 
} 
 

 
.icon-46:before { 
 
    content: "U"; 
 
} 
 

 
.icon-47:before { 
 
    content: "S"; 
 
} 
 

 
#weather h2 { 
 
    margin: 0 0 8px; 
 
    color: #fff; 
 
    font-size: 100px; 
 
    font-weight: 300; 
 
    text-align: center; 
 
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15); 
 
} 
 

 
#weather ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#weather li { 
 
    background: #fff; 
 
    background: rgba(255, 255, 255, 0.90); 
 
    padding: 20px; 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
} 
 

 
#weather .currently { 
 
    margin: 0 20px; 
 
} 
 

 

 
/** Custom icons */ 
 

 
section { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    align-items: center; 
 
    min-height: 24em; 
 
    justify-content: center; 
 
    margin: 1px; 
 
} 
 

 
.icon { 
 
    flex: none; 
 
    position: relative; 
 
    border-radius: 3rem; 
 
    height: 16.25rem; 
 
    width: 16.25rem; 
 
    display: inline-block; 
 
    margin: 2px auto; 
 
    background: linear-gradient(to bottom, #1d65f0 0%, #1ad3fd 100%); 
 
} 
 

 
.cloud:after, 
 
.cloud:before { 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: 2; 
 
    background: #fff; 
 
} 
 

 
.cloud { 
 
    z-index: 1; 
 
    width: 9.75rem; 
 
    height: 3.75rem; 
 
    background: #fff; 
 
    border-radius: 6.25rem; 
 
    -webkit-border-radius: 6.25rem; 
 
    -moz-border-radius: 6.25rem; 
 
    position: absolute; 
 
    top: 7.9375rem; 
 
    left: 1.75rem; 
 
    opacity: 0.9; 
 
    box-shadow: 0 0 17px 5px rgba(240, 240, 240, 0.7), inset -1px 8px 1px rgba(230, 230, 230, 0.5); 
 
} 
 

 
.cloud:after { 
 
    width: 4.6875rem; 
 
    height: 4.6875rem; 
 
    top: -1.9375rem; 
 
    left: 0.75rem; 
 
    border-radius: 6.25rem; 
 
    box-shadow: inset -5px 10px 4px rgba(230, 230, 230, 0.5); 
 
} 
 

 
.cloud:before { 
 
    width: 5.625rem; 
 
    height: 5.625rem; 
 
    top: -2.8125rem; 
 
    right: 1.5625rem; 
 
    z-index: 1; 
 
    border-radius: 12.5rem; 
 
    box-shadow: -10px 30px 0px #fff, inset -5px 0px 4px rgba(230, 230, 230, 0.5); 
 
} 
 

 
.cloud:nth-child(2) { 
 
    z-index: 0; 
 
    background: #fff; 
 
    opacity: 0.4; 
 
    transform: scale(0.5) translate(-8rem, -7rem); 
 
    animation: cloud 8s linear infinite; 
 
} 
 

 
.cloud:nth-child(2)>.rain div { 
 
    z-index: -1; 
 
} 
 

 
.rain div { 
 
    content: ' '; 
 
    position: absolute; 
 
    z-index: 1; 
 
    display: block; 
 
    top: 110%; 
 
    left: 50%; 
 
    height: 0.5rem; 
 
    width: 0.5rem; 
 
    background: #4d90fe; 
 
    background: linear-gradient(to bottom, #3987c9 0%, #e1e5ed 100%); 
 
    border-radius: 100% 0 80% 80%/80% 0 100% 80%; 
 
    transform: rotate(-30deg); 
 
    opacity: 0; 
 
    animation: rain 0.7s infinite ease-in; 
 
} 
 

 
.rain div:nth-child(2) { 
 
    left: 25%; 
 
    animation-delay: 0.3s; 
 
} 
 

 
.rain div:nth-child(3) { 
 
    left: 70%; 
 
    top: 105%; 
 
    animation-delay: 0.6s; 
 
} 
 

 
.rain div:nth-child(4) { 
 
    left: 40%; 
 
    top: 105%; 
 
    z-index: -1; 
 
    animation-delay: 0.9s; 
 
} 
 

 
.rain div:nth-child(5) { 
 
    left: 90%; 
 
    top: 80%; 
 
    animation-delay: 1.2s; 
 
} 
 

 
.rain div:nth-child(6) { 
 
    left: 20%; 
 
    top: 80%; 
 
    animation-delay: 1.5s; 
 
} 
 

 
.rain div:nth-child(7) { 
 
    left: 55%; 
 
    top: 75%; 
 
    animation-delay: 1.9s; 
 
} 
 

 
.rain div:nth-child(1) { 
 
    left: 75%; 
 
    top: 75%; 
 
    animation-delay: 2.2s; 
 
} 
 

 
@keyframes rain { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    10% { 
 
    opacity: 1; 
 
    } 
 
    80% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: translate(-30px, 100px) skewY(-30deg); 
 
    } 
 
} 
 

 
@keyframes cloud { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    25% { 
 
    opacity: 0.7; 
 
    } 
 
    50% { 
 
    opacity: 0.8; 
 
    } 
 
    75% { 
 
    opacity: 0.8; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: scale(0.7) translate(120%, -7rem); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script> 
 
<!-- Docs at http://http://simpleweatherjs.com --> 
 
<div id="weather"></div>

來源

2017-08-01 09:15:55

+0

感謝您的回答，但我有一些問題，'= HTML調用getIcon（weather.code）;'不加'

..'我的代碼，當我添加所有的div手動它的工作原理我看到動畫的標誌，第二個問題什麼是27開關的情況下，它代表的溫度？，你可以更新你的答案與開關案件的一個例子請 –

+0

我也有這個錯誤控制檯'jQuery沒有定義' –

相關問題

 相關問題