Question

我是javascript的新手，很难完成我的学业。这是我目前的代码：

 <!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>

蓝色矩形的形状必须在点击任何按钮后立即从页面顶部开始向下，并且在它到达底部之后就像触摸它一样，盒子的颜色需要反转。我所知道的是它是大帐篷但我不知道它的正确代码。我知道这很多，这就是我寻求帮助的原因。感谢任何评论:)谢谢

Answer 1

如果您希望在第一个按钮单击后立即向下滑动框，则此代码将为您执行此操作：

 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页面中。

通过javascript上的onlick按钮操作在css内部选框

1 个答案: