在javascript中通过onlick按钮操作的字幕框

我是JavaScript新手，很难完成我的学业。这是我当前的代码：在javascript中通过onlick按钮操作的字幕框

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
    background-color: white; 
    width: 200px; 
    border: 25px solid blue; 
    padding: 25px; 
    margin: 25px; 
    position: relative; 
    left: 35%; 
} 
h2 { 
    text-align: center; 
    } 
</style> 
<body> 
<br><br> 
<button onclick="myFunction()">Sunday</button><br> 
<button onclick="myFunction2()">Monday</button><br> 
<button onclick="myFunction3()">Tuesday</button><br> 
<button onclick="myFunction4()">Wednesday</button><br> 
<button onclick="myFunction5()">Thursday</button><br> 
<button onclick="myFunction6()">Friday</button><br> 
<button onclick="myFunction7()">Saturday</button><br> 
<p id="demo"></p> 

<script> 
function myFunction() { 
    document.getElementById("demo").innerHTML ="<div><h2>Sunday</h2></div>"; 
} 
function myFunction2() { 
    document.getElementById("demo").innerHTML = "<div><h2>Monday</h2></div>"; 
} 
function myFunction3() { 
    document.getElementById("demo").innerHTML = "<div><h2>Tuesday</h2>  </div>"; 
} 
function myFunction4() { 
    document.getElementById("demo").innerHTML = "<div><h2>Wednesday</h2>  </div>"; 
} 
function myFunction5() { 
    document.getElementById("demo").innerHTML = "<div><h2>Thursday</h2></div>"; 
} 
function myFunction6() { 
    document.getElementById("demo").innerHTML = "<div><h2>Friday</h2>  </div>"; 
} 
function myFunction7() { 
    document.getElementById("demo").innerHTML = "<div><h2>Saturday</h2>  </div>"; 
} 
</script> 

</body> 
</html>

蓝色的矩形形状有往下走，从页面的顶部开始点击任何按钮之后，和之后达到botttom像是刚触碰它，颜色的盒子需要倒置。我知道的是它是大框，但我不知道它的正确代码。我知道这很多，这就是我寻求帮助的原因。任何意见赞赏:)感谢

来源

2016-12-14 maymail09

如果你想在盒子只是第一个按钮，点击后滑下，那么这段代码会为你做它：

function myFunction() { 
 
    document.getElementById("demo").innerHTML ="<div><h2>Sunday</h2></div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#40A824"; 
 
} 
 
function myFunction2() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Monday</h2></div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#003399"; 
 
} 
 
function myFunction3() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Tuesday</h2>  </div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#9233DF"; 
 
} 
 
function myFunction4() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Wednesday</h2>  </div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#CA4B98"; 
 
} 
 
function myFunction5() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Thursday</h2></div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#5DA233"; 
 
} 
 
function myFunction6() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Friday</h2>  </div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#5B1C5A"; 
 
} 
 
function myFunction7() { 
 
    document.getElementById("demo").innerHTML = "<div><h2>Saturday</h2>  </div>"; 
 
    document.getElementById("demo").style.marginTop = "10%"; 
 
    document.querySelector("div").style.borderColor = "#F4292A"; 
 
}

div { 
 
    background-color: white; 
 
    width: 200px; 
 
    border: 25px solid blue; 
 
    padding: 25px; 
 
    margin: 25px; 
 
    position: relative; 
 
    left: 35%; 
 
} 
 
h2 { 
 
    text-align: center; 
 
} 
 

 
#demo { 
 
    position: absolute; 
 
    margin-top: -387px; 
 
    transition: .5s; 
 
}

<br><br> 
 
<button onclick="myFunction()">Sunday</button><br> 
 
<button onclick="myFunction2()">Monday</button><br> 
 
<button onclick="myFunction3()">Tuesday</button><br> 
 
<button onclick="myFunction4()">Wednesday</button><br> 
 
<button onclick="myFunction5()">Thursday</button><br> 
 
<button onclick="myFunction6()">Friday</button><br> 
 
<button onclick="myFunction7()">Saturday</button><br> 
 
<p id="demo"></p>

虽然这在全屏浏览器中工作，对于不同大小的屏幕，这不是一个可靠的解决方案。运行代码片段会产生不希望的结果，因此您最好复制代码并将其粘贴到HTML页面中。

来源

2016-12-14 15:07:08

在javascript中通过onlick按钮操作的字幕框

回答

相关问题