【发布时间】：2014-02-14 05:09:37
【问题描述】：
请记住，我对编码非常陌生，并且正在尝试淡入和淡出一些图片。当我在控制台中输入 fadeOut() 时，“覆盖”消失了。但是，当我在控制台中输入 fadeIn() 时，什么也没有发生。
<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 上。
标签： javascript jquery html