1. 首页
  2. 问答
  3. 如何通过亚马逊网络服务更改雅虎天气api的字体或图标

如何通过亚马逊网络服务更改雅虎天气api的字体或图标

2017-08-01 46 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没有定义' –

相关问题

 相关问题