通过在JavaScript上通过OnLick Button操作在CSS内部

我是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>

单击任何按钮后，蓝色矩形状的形状必须从页面的顶部开始，然后像触摸它一样到达瓶装后，盒子的颜色必须倒置。我知道的是它是字幕，但我不知道适合的代码。我知道这是很多，这就是为什么我寻求帮助的原因。任何评论都会感谢:)谢谢

如果要在单击第一个按钮之后盒子向下滑动，则此代码将为您完成：

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

相关内容

最新更新

热门标签：