我有一个名为fadeIn
的函数,我希望在满足条件之前将其返回。
我尝试在else行中添加警告以及clearInterval(myVar)
,但它只是保持警报。
CSS:
* {
background-color: black;
padding: 0;
margin: 0;
height: 100%;
}
#title {
background-color: white;
height: 50px;
}
audio {
display: none;
}
#audio-icon {
width: 50px;
background-color: white;
}
#focus {
background-color: black;
margin: auto;
width: 100%;
height: 700px;
border: 5px, solid, grey;
border-style: inset;
border-radius: 10px;
}
#text-box {
background-color: black;
width: 100%;
height: 200px;
margin-top: 500px;
float: left;
border: 5px, solid, grey;
border-style: inset;
border-radius: 10px;
}
#command-line {
background-color: black;
width: 100%;
height: 50px;
margin-top: 150px;
float: left;
border: 5px, solid, grey;
border-style: inset;
border-radius: 10px;
}
#element {
opacity: 0.1;
}
HTML:
<audio id="background-audio" controls autoplay="autoplay" loop>
<source src="Darkness.mp3" type="audio/mpeg">
</audio>
<div id="title">
<img id="audio-icon" src="unmute.png" onclick="mute()">
<img id="element" src="123.png">
</div>
<div id="focus">
<div id="text-box">
<div id="command-line"></div>
</div>
</div>
JavaScript的:
function fadeIn() {
var myVar = setInterval(fadeIn, 500);
var element = document.getElementById('element');
if (element.style.opacity < 1) {
element.style.opacity -= '-0.1';
} else {
clearInterval(myVar);
}
}
function mute() {
var audio = document.getElementById('background-audio');
var img = document.getElementById('audio-icon');
if (audio.muted) {
audio.muted = false;
img.src = 'unmute.png';
} else {
audio.muted = true;
img.src = 'mute.png';
}
}
document.onload = fadeIn();
更新:
我把变量放在函数之外,所有突然间我的代码似乎都能正常工作。不知道这是怎么可能的,因为我已经尝试过了。我的代码根本不运行,alert
会保持警报。无论如何,感谢所有的帮助。这是我的第一个问题,除了一些错别字以及我列出我的代码的方式之外,我真的不知道为什么我会被投票,所以欢迎任何反馈意见!这是我目前的工作代码:
<script>
var myVar = setInterval(fadeIn, 500);
var element = document.getElementById('element');
function fadeIn() {
console.log(element.style.opacity)
if (element.style.opacity < 1) {
element.style.opacity -= '-0.1';
} else {
clearInterval(myVar);
}
}
function mute() {
var audio = document.getElementById('background-audio');
var img = document.getElementById('audio-icon');
if (audio.muted) {
audio.muted = false;
img.src = 'unmute.png';
} else {
audio.muted = true;
img.src = 'mute.png';
}
}
document.onload = fadeIn();
</script>
答案 0 :(得分:0)
你调用fadIn func onload(没关系)然后你创建一个队列来每隔半秒执行一次该函数,在每次迭代中你创建另一个队列来每半秒执行一次函数....迟早你要用这个来杀死浏览器。
您正在寻找的可能更像是:
function fadeIn() {
if (opacity < 1) {
opacity += 0.1;
setTimeout(fadeIn, 500);
}
}
document.onLoad = fadeIn();
如果不是为了学习JavaScript,你应该使用CSS过渡而不是JavaScript来做fadeIn / fadeOut之类的事情。
答案 1 :(得分:0)
请参阅代码段.it将使用1
停止覆盖率。请访问console.log
var myVar;
var element = document.getElementById('element');
function fadeIn() {
console.log(element.style.opacity)
if (element.style.opacity < 1) {element.style.opacity -= -0.1;
}
else {
clearInterval(myVar);
}
}
function mute(){
var audio = document.getElementById('background-audio');
var img = document.getElementById('audio-icon');
if (audio.muted) {
audio.muted = false;
img.src = 'unmute.png';
}
else {
audio.muted = true;
img.src = 'mute.png';
}
}
window.onload =function(){
myVar = setInterval(fadeIn, 500);
}
* {
background-color: black;
padding: 0;
margin: 0;
height: 100%;
}
#title {
background-color: white;
height: 50px;
}
audio {
display: none;
}
#audio-icon {
width: 50px;
background-color: white;
}
#focus {
background-color: black;
margin: auto;
width: 100%;
height: 700px;
border: 5px, solid, grey;
border-style: inset;
border-radius: 10px;
}
#text-box {
background-color: black;
width: 100%;
height: 200px;
margin-top: 500px;
float: left;
border: 5px, solid, grey;
border-style: inset;
border-radius: 10px;
}
#command-line {
background-color: black;
width: 100%;
height: 50px;
margin-top: 150px;
float: left;
border: 5px, solid, grey;
border-style: inset;
border-radius: 10px;
}
#element {
opacity: 0.1;
}
<audio id="background-audio" controls autoplay="autoplay" loop>
<source src="Darkness.mp3" type="audio/mpeg">
</audio>
<div id="title">
<img id="audio-icon" src="unmute.png" onclick="mute()">
<img id="element" src="123.png">
</div>
<div id="focus">
<div id="text-box">
<div id="command-line"></div>
</div>
</div>
var myVar ;
var element = document.getElementById('element');
function fadeIn() {
console.log(element.style.opacity)
if (element.style.opacity < 1) {
element.style.opacity -= -0.1;
}
else {
clearInterval(myVar);
}
}
window.onload= function (){
myVar = setInterval(fadeIn, 100);
}
<p id="element">hi</p>
答案 2 :(得分:0)
这里的问题是,setInterval
的调用与if条款无关,并且您发送了未观察到的时间间隔,在fadeIn
中您无权访问的时间间隔功能块。
在这种情况下,你也可以使用setTimeout
代替它,因为它只是异步评估它的第一个参数,因为你不能以你处理它们的方式访问这些间隔。
注意:您的淡入条件是错误的,因为您在降低元素不透明度时其不透明度仅大于1
...我只是将1
更改为{{} 1}}。
0
现在,如果您要停止淡入操作,可以使用var element, lastFadeInTimeout;
element = document.getElementById('element');
function fadeIn() {
// The element is not totally
// transparent yet
if (element.style.opacity > 0) {
element.style.opacity -= 0.1;
// Let's wait 500ms to fade the element
// again, only once
lastFadeInTimeout = setTimeout(fadeIn, 500);
}
}
拨打clearTimeout
,其中lastFadeInTimeout
是淡入操作创建的上次超时的标识符
lastFadeInTimeout