当我对“ canvas”元素的“ class”属性进行硬编码时，我的skycon运行良好，似乎出现了问题。当我尝试从Dark Sky API获取图标数据时，该图标将不会显示。似乎在接收图标数据之前先运行skycons脚本。
我对编码非常陌生，因此我确定可以使用更有效的方法进行编码，所以请不要笑得太厉害。一切都必须在HTML页面中。如果可以，我会将所有内容分开。
这是我的codepen https://codepen.io/scott-pussehl/pen/GPyvPZ
<!DOCTYPE html>
<HTML>
<HEAD>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js"></script>
<TITLE></TITLE>
<STYLE>
a{text-decoration:none;}
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body{
padding:0;
margin:0;
font-family: 'Raleway', Helvetica, Arial, sans-serif !important;
}
h1,h2,h3,h4,h5,h6{
margin:0;
}
p{
margin:0;
}
.content-top {
background: white;
padding: 20px;
color: #0C1147;
}
.current{
float:left;
width:18%;
text-align:left;
padding: .75%;
}
.day{
float:left;
width:14%;
text-align:left;
border-left:2px solid #0C1147;
padding: .75%;
}
.left{
float:left;
width:50%;
text-align:center;
margin: 0;
}
.right{
float:right;
width:50%;
text-align:center;
margin: 0;
}
h6{
font-size: 25px;
margin-bottom: 15px
}
.current p{
font-size: 25pt;
}
p{
font-size: 20pt;
font-weight: bold;
color: #0C1147;
}
.h {
color: LightGray;
}
</STYLE>
<script> /* Scotts Javascript */
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/01c70afc31b9faa06047d80cf607b364/45.164393,-84.930449?exclude=minutely,hourly,flags,alerts?units=us", true);
xhr.send();
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
ctemp = Math.round(response.currently.temperature) + '°';
atmax = Math.round(response.daily.data[0].temperatureMax) + '°';
atmin = Math.round(response.daily.data[0].temperatureMin) + '°';
btmax = Math.round(response.daily.data[1].temperatureMax) + '°';
btmin = Math.round(response.daily.data[1].temperatureMin) + '°';
ctmax = Math.round(response.daily.data[2].temperatureMax) + '°';
ctmin = Math.round(response.daily.data[2].temperatureMin) + '°';
dtmax = Math.round(response.daily.data[3].temperatureMax) + '°';
dtmin = Math.round(response.daily.data[3].temperatureMin) + '°';
etmax = Math.round(response.daily.data[4].temperatureMax) + '°';
etmin = Math.round(response.daily.data[4].temperatureMin) + '°';
document.getElementById("cctemp").innerHTML = ctemp;
document.getElementById("00tmax").innerHTML = atmax;
document.getElementById("00tmin").innerHTML = atmin;
document.getElementById("11tmax").innerHTML = btmax;
document.getElementById("11tmin").innerHTML = btmin;
document.getElementById("22tmax").innerHTML = ctmax;
document.getElementById("22tmin").innerHTML = ctmin;
document.getElementById("33tmax").innerHTML = dtmax;
document.getElementById("33tmin").innerHTML = dtmin;
document.getElementById("44tmax").innerHTML = etmax;
document.getElementById("44tmin").innerHTML = etmin;
document.getElementsByTagName("canvas")[0].className = response.currently.icon;
document.getElementsByTagName("canvas")[1].className = response.daily.data[0].icon;
document.getElementsByTagName("canvas")[2].className = response.daily.data[1].icon;
document.getElementsByTagName("canvas")[3].className = response.daily.data[2].icon;
document.getElementsByTagName("canvas")[4].className = response.daily.data[3].icon;
document.getElementsByTagName("canvas")[5].className = response.daily.data[4].icon;
var d = new Date();
var weekday = new Array(7);
weekday[0] = "SUN";
weekday[1] = "MON";
weekday[2] = "TUE";
weekday[3] = "WED";
weekday[4] = "THU";
weekday[5] = "FRI";
weekday[6] = "SAT";
var n = d.getDay();
da = n;
document.getElementById("1da").innerHTML = weekday[da];
n = d.getDay() + 1;
if (n > 6) {n = 0};
db = n;
document.getElementById("1db").innerHTML = weekday[db];
n = n + 1;
if (n > 6) {n = 0};
dc = n;
document.getElementById("1dc").innerHTML = weekday[dc];
n = n + 1;
if (n > 6) {n = 0};
dd = n;
document.getElementById("1dd").innerHTML = weekday[dd];
n = n + 1;
if (n > 6) {n = 0};
de = n;
document.getElementById("1de").innerHTML = weekday[de];
}
}
</SCRIPT>
</HEAD>
<BODY>
<div class="content-top">
<div class="current">
<div class="left">
<h6>CURRENTLY</h6>
<p id="cctemp"></p>
</div>
<div class="right">
<canvas width="80" height="80" class="rain"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1da"></h6>
<p><span id="00tmax"></span> <span class="h" id="00tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="snow"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1db"></h6>
<p><span id="11tmax"></span> <span class="h" id="11tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="sleet"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1dc"></h6>
<p><span id="22tmax"></span> <span class="h" id="22tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="partly-cloudy-day"></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1dd"></h6>
<p><span id="33tmax"></span> <span class="h" id="33tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="clear-day" ></canvas>
</div>
</div>
<div class="day">
<div class="left">
<h6 id="1de"></h6>
<p><span id="44tmax"></span> <span class="h" id="44tmin"></span></p>
</div>
<div class="right">
<canvas width="70" height="70" class="clear-night" ></canvas>
</div>
</div>
<div class="clear"></div>
</div>
<script>
var icons = new Skycons({
"color": "#888"
}),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for (i = list.length; i--;) {
var weatherType = list[i],
elements = document.getElementsByClassName(weatherType);
for (e = elements.length; e--;) {
icons.set(elements[e], weatherType);
}
}
icons.play();
</script>
</BODY>
</HTML>