<分区>
标签 javascript html css
<分区>
我的网页应该在页面加载时显示幻灯片，但脚本函数似乎不起作用。我试过运行包含 prompt() 和 confirm() 函数的简单脚本，它们工作正常，但自定义函数似乎不起作用。我的“modal.js”脚本也是如此，它应该在单击按钮时显示一个模式框。请帮帮我
<!doctype html>
<html lang = "en">
<head>
<title> Ice Cream </title>
<link rel="stylesheet" href="main_ice.css" />
<script type = "text/javascript" src = "slideShow.js"> </script>
<script src = "modal.js"> </script>
<meta charset = "utf-8" />
</head>
<body>
<div id = "big_wrapper">
<header class= "top_header">
<hgroup>
<h1> ICE Funky </h1>
<h3> ice cream production </h3>
</hgroup>
</header>
<nav class= "nav_bar">
<ul>
<label><li name = "home"> Home </li>
<li> About Us </li>
<li> Products </li>
<li> Services </li>
<li> Contacts </li>
</label>
</ul>
</nav>
<div id = "slideshow">
<span class = "image_slide"><img src = "4072.jpg" width = "500px" height = "300px"/> </span>
<span class = "image_slide"><img src = "26551.jpg" width = "500px" height = "300px"/> </span>
<span class = "image_slide"><img src = "30225.jpg" width = "500px" height = "300px"/> </span>
<span class = "image_slide"><img src = "74223.jpg" width = "500px" height = "300px"/> </span>
<span class = "image_slide"><img src = "74285.jpg" width = "500px" height = "300px"/> </span>
</div>
<button id = "modalButton"> Modal </button>
<div id = "myModal">
<div id = "modal_title"> Main Title </div><br><br>
<div id = "modal_body"> Body </div>
</div>
</div>
</body>
</html>
!------------CSS 文件----------------!
*{
margin:0px;
padding:0px;
}
header, footer, nav, hgroup, aside, article, section{
display : block;
}
body{
width:100%;
display: -webkit-box;
-webkit-box-pack: center;
}
#big_wrapper{
max-width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
.top_header{
position: absolute;
margin: 20px 0px 0px 120px;
border: 2px solid black;
width: 180px;
padding: 25px;
}
.nav_bar{
margin-left: 350px;
margin-top: 85px;
text-align: center;
}
.nav_bar li{
position: relative;
list-style: none;
display: inline-block;
-webkit-box-flex: 1;
margin: 20px;
border: 2px solid white;
padding: 5px;
-webkit-transition: border-left 1s, border-top 3s, border-right 4s,
border-bottom 6s;
}
.nav_bar li:hover{
border-left: 2px solid black;
border-top: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
#slideshow{
position: absolute;
margin-top: 50px;
margin-left: 400px;
width: 500px;
}
.image_slide{
position: absolute;
/*display: none;*/
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 150px;
width: auto;
margin-top: -22px;
padding: 16px;
color: yellow;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next{
/*left: 458px;*/
right: 0px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
#modalButton{
background: rgba(0,256,0,0.5);
padding: 5px;
margin-left: 40px;
margin-top: 40px;
color: chocolate;
}
#myModal{
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background-color: rgba(0,0,0,0.4);
display: none;
}
#modal_title{
width: 95%;
height: 5%;
position: fixed;
bottom: 15%;
left: 30px;
background: rgba(0,256,0,0.4);
}
#modal_body{
width: 95%;
height: 10%;
position: fixed;
top: 85%;
left: 30px;
background: rgba(256,256,256,0.4);
}
!----------------JS 文件(slideShow.js)----------------!
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("image_slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
!----------------JS 文件(modal.js)----------------!
modalButton = getElementById("modalButton");
myModal = getElementById("myModal");
modalButton.onclick = function(){
prompt("hi");
myModal.style.display = "block";
}
最佳答案
首先，如 ricky 所述，您需要使用 document.getElementById("modalButton") 而不是 getElementById("modalButton")。
其次，在解析标记之前先评估您的脚本。将脚本标记从 head 移到 body 标记的末尾，或者将两个文件的内容包装在事件监听器中以进行加载:
window.addEventListener( 'load', function() {
// your code here
} );
例如 modal.js 应该是这样的:
window.addEventListener( 'load', function() {
var modalButton = document.getElementById("modalButton");
var myModal = document.getElementById("myModal");
modalButton.onclick = function(){
prompt("hi");
myModal.style.display = "block";
}
} );
关于Javascript 函数未实现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44964554/