JavaScript - 顯示/隱藏功能
[英]JavaScript - show/ hide function
問題描述
我是 JavaScript 的新手，我不知道如何處理這個家庭作業 -
“修改頁面以隱藏所有圖像，直到單擊“開始”按鈕。單擊后，開始按鈕應變為停止按鈕並顯示“停止”字樣，單擊時隱藏圖像。一旦隱藏，該按鈕應變為開始按鈕並顯示“開始”一詞並再次像開始按鈕一樣起作用。請注意，有一個按鈕可以更改文本以及根據節目當前是停止還是開始而改變的內容。”
我知道我應該使用顯示/隱藏效果，但我真的不知道如何將它們應用於代碼？
<!doctype html>
<html>
<head>
<title>Slide Show</title>
<!-- will remove the 404 error for favicon.ico from console -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- using jQuery -->
<link href="simpleImageV2.css" rel="stylesheet" type="text/css">
<script src="jquery-3.3.1.min.js"></script>
<script src="simpleImagesV2.js"></script>
</head>
<body bgcolor="black" onload="preLoadImages()">
<div id="setSize">
<img name="campus_pic" src="images/fall_1_480x640.png" width="480" height="640">
</div>
<br />
<br />
<button id="startShow">Start the Show</button>
<button id="stopShow">Stop the Show</button>
</body>
</html>
JavaScript -
/*global $ */
var i = 0, myTimer, campus;
function preLoadImages() {
"use strict";
if (document.images) {
campus = new Array(); // global variable
campus[0] = new Image();
campus[0][0] = "images/fall_1_480x640.png";
campus[0][1] = "480";
campus[0][2] = "640";
campus[1] = new Image();
campus[1][0] = "images/winter_1_640x480.png";
campus[1][1] = "640";
campus[1][2] = "480";
campus[2] = new Image();
campus[2][0] = "images/spring_1_640x480.png";
campus[2][1] = "640";
campus[2][2] = "480";
campus[3] = new Image();
campus[3][0] = "images/summer_1_480x640.png";
campus[3][1] = "480";
campus[3][2] = "640";
} else {
window.alert("This browser does not support images");
}
}
1 個解決方案
解決方案1
1 已采納 2019-04-04 20:30:24
你可以像下面這樣使用jQuery：
/*global $ */ var i = 0, myTimer, campus; function preLoadImages() { "use strict"; if (document.images) { campus = new Array(); // global variable campus[0] = new Image(); campus[0][0] = "images/fall_1_480x640.png"; campus[0][1] = "480"; campus[0][2] = "640"; campus[1] = new Image(); campus[1][0] = "images/winter_1_640x480.png"; campus[1][1] = "640"; campus[1][2] = "480"; campus[2] = new Image(); campus[2][0] = "images/spring_1_640x480.png"; campus[2][1] = "640"; campus[2][2] = "480"; campus[3] = new Image(); campus[3][0] = "images/summer_1_480x640.png"; campus[3][1] = "480"; campus[3][2] = "640"; } else { window.alert("This browser does not support images"); } } function init() { $('#stopShow').hide(); } $(document).ready(function () { $("#startShow").click(function () { var images = ['<div>']; campus.forEach(function (img) { images.push('<img src="' + img[0] +'" height="' + img[1] + '" width="' + img[2] + '" />'); }); images.push('</div>'); $("#images").html(images.join('')); $('#startShow').hide(); $('#stopShow').show(); }); $("#stopShow").click(function () { $("#images").html(''); $('#stopShow').hide(); $('#startShow').show(); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!doctype html> <html> <head> <title>Slide Show</title> <!-- will remove the 404 error for favicon.ico from console --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- using jQuery --> <link href="simpleImageV2.css" rel="stylesheet" type="text/css"> <script src="jquery-3.3.1.min.js"></script> <script src="simpleImagesV2.js"></script> </head> <body bgcolor="black" onload="preLoadImages(); init();"> <div id="setSize"> <img name="campus_pic" src="images/fall_1_480x640.png" width="480" height="640"> </div> <br /> <br /> <div id="images"></div> <button id="startShow">Start the Show</button> <button id="stopShow">Stop the Show</button> </body> </html>
Javascript顯示和隱藏功能
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.