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

Question

基于此codepen示例，我想更改其他人的天气图标，例如 this ，这些图标是用 font-family: Weather; 生成的，并根据每个字母示例进行替换:

.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;
}

...
}

Answer 1

您必须为所有代码创建一个模板数组，以便每个代码都有特定的模板，然后将代码传递给一个函数，该函数将为该代码生成 HTML。请参阅下面的代码片段，我为云雨图标制作了示例，类似地您可以创建其他模板。

// 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>