0
请记住，我是非常新的编码，并试图淡入淡出一些图片。当我在控制台中输入fadeOut（）时，“叠加”将消失。但是，当我在控制台中输入fadeIn（）时，什么都不会发生。FadeIn FadeOut错误
<html>
<head>
<title>Weather</title>
<style>
body{
margin: 0 auto;
width: 800px;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: black;
}
body.CLEAR_DAY {background-image: url(Clear_Day.jpg);}
body.PARTLY_CLOUDY_DAY {background-image: url(Sun.jpg);}
body.FOG {background-image: url();}
body.SNOW {background-image: url();}
body.WIND {background-image: url();}
body.PARTLY_CLOUDY_NIGHT {background-image: url();}
body.RAIN {background-image: url();}
div.box{
width:600px;
height:650px;
margin:30px 50px;
background:#3399FF;
border-bottom: 6px solid #000;
border-left: 3px solid #000;
border-right: 3px solid #000;
border-radius: 0px 0px 50px 50px;
border-top:6px solid #000;
-moz-border-radius:50px 50px;
-webkit-border-radius:50px 50px;
float:left;
/*padding:10px;*/
text-align: center;
position:relative;
}
div.box h1
{
margin: 0 auto;
font-weight:bold;
color:#000;
font-size:75px;
text-align: center;
}
div.box h2
{
margin: 0 auto;
font-weight:bold;
color:#000;
font-size:40px;
text-align: center;
}
div
{
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:0px 20px 0px 20px;
}
div.CLEAR_DAY
{
background-image: url();
background-position: center;
background-repeat: no-repeat;
}
div.box canvas
{
position:absolute;
top:325px;
margin-top:-100px;
left:40px;
}
#overlay
{
background-color: red;
opacity:1;
width:100%;
height: 100%;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body onload="updateWeatherDisplay()">
<div id="overlay"></div>
<div id="box" class="box">
<select id="choice" onchange="updateWeatherDisplay()">
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday" selected>Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>
<h1 id="day"></h1>
<h2 id="temperature"></h2>
<canvas id="condition" width="600" height="300"></canvas>
</div>
<script src="skycons.js"></script>
<script>
var skycons = new Skycons({"color": "black"});
skycons.add("condition", Skycons.CLEAR_DAY);
skycons.play();
var temperatures=["127°","34°","79°","-183°","0°","91°","213°"];
var icons=[Skycons.WIND,Skycons.PARTLY_CLOUDY_NIGHT,Skycons.RAIN,Skycons.CLEAR_DAY,Skycons.PARTLY_CLOUDY_DAY,Skycons.FOG,Skycons.SNOW];
var backgrounds=["WIND","PARTLY_CLOUDY_NIGHT","RAIN","CLEAR_DAY","PARTLY_CLOUDY_DAY","FOG","SNOW"];
function fadeOut()
{
var overlay=document.getElementById("overlay");
var style = window.getComputedStyle(overlay);
var opacity=style.getPropertyValue("opacity");
if(opacity>0){
overlay.style.opacity = opacity - 0.01
setTimeout(fadeOut,10);
}
}
function fadeIn()
{
var overlay=document.getElementById("overlay");
var style = window.getComputedStyle(overlay);
var opacity=style.getPropertyValue("opacity");
if(opacity<1){
overlay.style.opacity = opacity + 0.01
setTimeout(fadeIn,10);
}
}
function updateWeatherDisplay()
{
var selectedDay = document.getElementById("choice").selectedIndex;
var daysOfTheWeek = document.getElementById("choice").options;
document.getElementById("day").innerHTML = daysOfTheWeek[selectedDay].text;
document.getElementById("temperature").innerHTML = temperatures[selectedDay];
skycons.set("condition", icons[selectedDay]);
document.getElementsByTagName("body")[0].className=backgrounds[selectedDay];
}
</script>
</body>
</html>
我也在做这个项目只是为了好玩。提前致谢！
你可以给小提琴演示 –
将来，最好把它降低到可重复性最低的测试用例，并将它发布到JSFiddle或JSBin上。 –