我需要在主页上显示日历，让员工将他们的生日添加到日历中，但不会显示日期，持续时间和姓名部分。
以下是主页的代码（不包括css文件等）
<!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<link href="bootstrap-responsive.css" rel="stylesheet" />
<link href="bootstrap-responsive.min.css" rel="stylesheet" />
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap.min.css" rel="stylesheet" />
<script src="bootstrap.js"></script>
<script src="bootstrap.min.js"></script>
<script src="lightbox.js"></script>
<link href="lightbox.css" rel="stylesheet" />
<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
</style>
</head>
<body>
<div id="page">
<nav align="center">
<br /><img src="images/logo.png" /><br /><br />
<a href="home.html">Home | </a>
<a href="meeting.html">Create Meeting | </a>
<a href="#join">Join Meeting</a>
</nav>
<div class="clearfix"><br /><br /></div>
<div class="row">
<div class="column">
<img src="images/img1.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="images/img2.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="images/img3.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="images/img4.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
<div class="column">
<br /><img src="images/img6.jpg" align="right" style="width:100%" onclick="openModal();currentSlide(5)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 5</div>
<img src="images/img1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 5</div>
<img src="images/img2.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 5</div>
<img src="images/img3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 5</div>
<img src="images/img4.jpg" style="width:100%">
</div>
<div class="mySlides" align="center">
<div class="numbertext">5 / 5</div>
<br /><br /><img src="images/img6.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="images/img1.jpg" style="width:100%" onclick="currentSlide(1)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="images/img2.jpg" style="width:100%" onclick="currentSlide(2)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="images/img3.jpg" style="width:100%" onclick="currentSlide(3)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="images/img4.jpg" style="width:100%" onclick="currentSlide(4)" alt="">
</div>
<div class="column">
<br /><br /><img class="demo cursor" src="images/img6.jpg" style="width:100%" onclick="currentSlide(5)" alt="" align="middle">
</div>
</div>
</div>
<script>
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
captionText.innerHTML = dots[slideIndex - 1].alt;
}
</script>
<section align="left">
<img src="images/hdsplitter.png" align="middle" /><br /><br />
<h1 style="color:#0099ff">Welcome to <b>Systeque</b></h1>
<br />
<div class="col-lg-6 col-md-6 col-sm-6">
<div align="left">
<br />
<h3 style="color:#0099ff"><b>Who We Are</b></h3>
<p><b style="color:#0099ff">Systeque</b> was established in 1998 and has grown to be one of South Africa's leading IT Solution and Service Providers. Systeque is based in the Hyde Park, Sandton in Johannesburg. Systeque’s core focus is to provide total solutions to all customers by bringing new and innovative concepts and cost effective ideas to market. Our strengths lie in Infrastructure Architecture, Cloud Computing and Managed Services. Since inception, Systeque has developed in areas that have shown a definite market requirement. With implementations in all business sectors.</p>
<br /><h3 style="color:#0099ff"><b>My role at the Company</b></h3>
<p>As Operations Manager my duties include co-ordination of our technical team to ensure daily operational functions of the business are running, this also entails ensuring the sales function of the business is processing quotations and orders in accordance with client requirements. Client relations being one of my key areas involves consulting with clients on their daily requirements and projects they are running or planning. Other vital areas of my role includes continous research into products, services and technologies that will further streamline our processes and grow our revenue.</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<img src="images/img5.jpg" alt="service" width="450" />
<br /><br /><br />
</div>
</section>
<section align="center">
<h1 style="color:#0099ff"><b>Calender</b></h1>
</section>
</div>
这是分配页面的代码
<html>
<head>
<script type ="text/javascript">
var celebration = new Array();
var months = new Array(12);
var times = new Array(9);
var duration = new Array(9);
var attends = new Array();
var mNum, yNum, dNum, smon, sdate, dif, stimes, sdur;
var Cname, Cmonth, Cdate, Ctime, Cduration, Cvenue, Cnum, Crefresh;
function upDate()
{
document.f1.date.length = 0;
var j;
var mSel = document.f1.month.selectedIndex;
mSel = mSel + mNum;
if((mSel>11) && (mSel<=14))
{
mSel = mSel - 12;
}
if((mSel===0) || (mSel==2) || (mSel==4) || (mSel==6) || (mSel==7) || (mSel==9) || (mSel==11))
{
j = 31;
}
else if((mSel==3) || (mSel==5) || (mSel==8) || (mSel==10))
{
j = 30;
}
else if(mSel==1)
{
if((yNum%4)===0)
{
j = 29;
}
else
{
j = 28;
}
}
else
{
alert("Error with system time");
}
for(var i=0; i<j; i++)
{
var opt = new Option(i+1, i+1, false, false);
document.f1.date.options[i] = opt;
}
if(document.f1.month.selectedIndex===0)
{
for(i=(dNum-1); i>=0; i--)
{
document.f1.date.options[i] = null;
}
if(document.f1.date.length===0)
{
document.f1.month.options[0].disabled = true;
document.f1.month.selectedIndex = 1;
upDate();
}
}
if(document.f1.month.selectedIndex==3)
{
document.f1.date.length = 0;
var dn = dNum;
if(dn>j)
{
dn = j;
}
for(;i<dn; i++)
{
var opt = new Option(i+1, i+1, false, false);
document.f1.date.options[i] = opt;
}
}
capture();
}
function validate()
{
capture();
if(Cname==="")
{
alert("Celebration cannot be created - Name required");
document.f1.n.focus();
}
else if(Cnum==="")
{
alert("Celebration cannot be created - Description required");
document.f1.num.focus();
}
else if(Cvenue==="")
{
alert("Celebration cannot be created - Venue required");
document.f1.ven.focus();
}
else
{
bookCelebration();
}
}
function capture()
{
Cname = document.f1.n.value;
Cnum = document.f1.num.value;
Cmonth = document.f1.month.selectedIndex;
Cmonth = document.f1.month.options[Cmonth].value;
Cmonth = months[Cmonth];
Cdate = document.f1.date.selectedIndex;
Cdate = document.f1.date.options[Cdate].value;
Ctime = document.f1.time.selectedIndex;
Ctime = document.f1.time.options[Ctime].value;
Cduration = document.f1.dur.selectedIndex;
Cduration = document.f1.dur.options[Cduration].value;
Cvenue = document.f1.ven.value;
if(document.f1.refresh.checked === true)
{
Crefresh = "true";
}
else
{
Crefresh = "false";
}
}
function bookMeeting()
{
var index = meetings.length;
meetings[index] = new Array(8);
celebration[index][0] = Cname;
celebration[index][1] = Cnum;
celebration[index][2] = Cmonth;
celebration[index][3] = Cdate;
celebration[index][4] = Ctime;
celebration[index][5] = Cduration;
celebration[index][6] = Cvenue;
celebration[index][7] = Crefresh;
addBooking(index);
}
function addBooking(index)
{
var opt = new Option(Cname, Cnum, Cmonth, Cdate, Ctime, Cduration, Cvenue, Crefresh);
document.f2.nm.options[index] = opt;
alert("Booking successful");
clearInput();
if(celebration.length===0)
{
document.f2.v.disabled = true;
}
else
{
document.f2.v.disabled = false;
}
}
function search()
{
var inp = document.f2.nm.selectedIndex;
var pos;
inp = celebration[inp][0];
for(var i=0; i<celebration.length; i++)
{
if (inp==celebration[i][0])
{
pos = i;
}
}
document.f1.n.value = celebration[pos][0];
document.f1.num.value = celebration[pos][1];
smon = celebration[pos][2];
for (var j=0; j<months.length; j++)
{
if(months[j] == smon)
{
smon = j;
}
}
smon = smon - mNum;
document.f1.month.selectedIndex = smon;
upDate();
sdate = celebration[pos][3];
if (smon===0)
{
dif = sdate - dNum;
dif = dif -1;
}
else
{
dif = sdate - 1;
}
document.f1.date.selectedIndex = dif;
stimes = celebration[pos][4];
for (; j<times.length; j++)
{
if(times[j] == stimes)
{
stimes = j;
}
}
document.f1.time.selectedIndex = stimes;
sdur = celebration[pos][5];
for (; j<duration.length; j++)
{
if(duration[j] == sdur)
{
sdur = j;
}
}
document.f1.dur.selectedIndex = sdur;
document.f1.ven.value = celebration[pos][6];
if(celebration[pos][7]=="true")
{
document.f1.refresh.checked = true;
}
else if(celebration[pos][7]=="false")
{
document.f1.refresh.checked = false;
}
document.f2.join.disabled = false
}
function joinCelebration()
{
var index = attends.length;
attends[index] = new Array(5);
attends[index][0] = window.prompt("Enter first name");
attends[index][1] = window.prompt("Enter surname");
attends[index][2] = window.prompt("Enter email address");
attends[index][3] = window.prompt("Enter office number");
attends[index][4] = window.prompt("Enter celebration name");
var x = document.f2.nm.selectedIndex;
attends[index][4] = document.f2.nm.options[x].value;
y = attends[index][4];
var nat = 0;
for(var a=0; a<attends.length;a++)
{
if(attends[a][4] = y)
{
nat = nat +1;
}
}
document.f3.atnd.value = nat;
var g = celebration[index][5];
var drt;
for (var h=0; h<duration.length; h++)
{
if(duration[h] == g)
{
drt = h;
}
}
if(drt < 2)
{
document.f3.sgref.value = "Tea & Biscuits";
}
else if(drt < 4)
{
document.f3.sgref.value = "Finger Lunch";
}
else
{
document.f3.sgref.value = "Sit down Lunch";
}
clearInput();
}
function popMonths()
{
months[1] = "January";
months[2] = "February";
months[3] = "March";
months[4] = "April";
months[5] = "May";
months[6] = "June";
months[7] = "July";
months[8] = "August";
months[9] = "September";
months[10] = "October";
months[11] = "November";
months[12] = "December";
}
function popDuration()
{
duration[0] = "30 mins";
duration[1] = "1 hour";
duration[2] = "2 hours";
duration[3] = "3 hours";
duration[4] = "4 hours";
duration[5] = "5 hours";
duration[6] = "6 hours";
duration[7] = "7 hours";
duration[8] = "8 hours";
}
function curDate()
{
var now = new Date();
mNum = now.getMonth();
yNum = now.getFullYear();
dNum = now.getDate();
}
function updateMonth()
{
var opt1 = new Option(months[mNum], mNum, false, false);
document.f1.month.options[0] = opt1;
var opt2 = new Option(months[mNum + 1], mNum + 1, false, false);
document.f1.month.options[1] = opt2;
var opt3 = new Option(months[mNum + 2], mNum + 2, false, false);
document.f1.month.options[2] = opt3;
var opt4 = new Option(months[mNum + 3], mNum + 3, false, false);
document.f1.month.options[3] = opt4;
}
function upDate()
{
document.f1.date.length = 0;
var j;
var mSel = document.f1.month.selectedIndex;
mSel = mSel + mNum;
if((mSel>11) && (mSel<=14))
{
mSel = mSel - 12;
}
if((mSel===0) || (mSel==2) || (mSel==4) || (mSel==6) || (mSel==7) || (mSel==9) || (mSel==11))
{
j = 31;
}
else if((mSel==3) || (mSel==5) || (mSel==8) || (mSel==10))
{
j = 30;
}
else if(mSel==1)
{
if((yNum%4)===0)
{
j = 29;
}
else
{
j = 28;
}
}
else
{
alert("Error with system time");
}
for(var i=0; i<j; i++)
{
var opt = new Option(i+1, i+1, false, false);
document.f1.date.options[i] = opt;
}
if(document.f1.month.selectedIndex===0)
{
for(i=(dNum-1); i>=0; i--)
{
document.f1.date.options[i] = null;
}
if(document.f1.date.length===0)
{
document.f1.month.options[0].disabled = true;
document.f1.month.selectedIndex = 1;
upDate();
}
}
if(document.f1.month.selectedIndex==3)
{
document.f1.date.length = 0;
var dn = dNum;
if(dn>j)
{
dn = j;
}
for(; i<dn; i++)
{
var opt = new Option(i+1, i+1, false, false);
document.f1.date.options[i] = opt;
}
}
capture();
}
function popTimes()
{
times[0] = "8:00am";
times[1] = "9:00am";
times[2] = "10:00am";
times[3] = "11:00am";
times[4] = "12:00pm";
times[5] = "1:00pm";
times[6] = "2:00pm";
times[7] = "3:00pm";
times[8] = "4:00pm";
}
function upTimes()
{
for(var i=0; i<times.length; i++)
{
var opt = new Option(times[i]);
document.f1.time.options[i] = opt;
}
}
function upDur()
{
for(var i=0; i<duration.length; i++)
{
var opt = new Option(duration[i]);
document.f1.dur.options[i] = opt;
}
}
function clearInput()
{
initialize();
document.f1.n.value = "";
document.f1.num.value = "";
document.f1.ven.value = "";
document.f1.refresh.checked = false;
}
function initialize()
{
popMonths();
popTimes();
curDate();
popDuration();
updateMonth();
upDate();
upTimes();
upDur();
document.f1.n.focus();
if(celebration.length===0)
{
document.f2.v.disabled = true;
}
else
{
document.f2.v.disabled = false;
}
}
</script>
</head>
<body onload = "initialize()">
<form name = "f1">
<h1> Create a celebration </h1>
<table border = "0" cellpadding = "5">
<tr>
<td>
Birthday of
<input type = "text" name = "n"/>
</td>
</tr>
<tr>
<td>
Birthday Message
<input type = "text" name = "num" onchange = "capture()"/>
</td>
</tr>
<tr>
<td>
Date: Month
<select name = "month" onchange = "upDate()"/>
<option value = "0">
Nothing
</option>
</select>
</td>
<td>
Date
<select name = "date" onchange = "capture()"/>
<option value = "0">
Nothing
</option>
</select>
</td>
</tr>
<tr>
<td>
Time
<select name = "time" onchange = "capture()"/>
<option value = "0">
Nothing
</option>
</select>
</td>
<td>
Duration
<select name = "dur" onchange = "capture()"/>
<option value = "0">
Nothing
</option>
</select>
</td>
</tr>
<tr>
<td>
Venue
<input type = "text" name = "ven" onchange = "capture()"/>
</td>
<td>
Refreshments
<input type = "checkbox" name = "refresh" onchange = "capture()" onclick = "capture()"/>
</td>
</tr>
<tr>
<td align = "center">
<input type = "button" value = "Create" onclick = "validate()"/>
</td>
<td align = "right">
<input type = "button" name = "del" value = "Delete" disabled = "true" onclick = "deleteBooking()"/>
<input type = "button" value = "Clear" onclick = "clearInput()"/>
</td>
</tr>
</table>
</form>
<form name = "f2">
<h1> Sign-up for celebration </h1>
<table border = "0" cellpadding = "5">
<tr>
<td>
Name
<select name = "nm"/>
<option value = "0">
None
</option>
</select>
</td>
</tr>
<tr>
<td align = "center">
<input type = "button" value = "Search" name = "v"onclick = "search()"/>
</td>
<td align = "center">
<input type = "button" name = "join" value = "Join" disabled = "true"/ onclick = "joinCelebration()">
</td>
</tr>
</table>
</form>
<form name = "f3">
<h1>Celebration details</h1>
<table border = "0" cellpadding = "5">
<tr>
<td>
Number of attendees
<input type = "text" name = "atnd"/>
</td>
</tr>
<tr>
<td>
Suggested refreshments
<input type = "text" name = "sgref"/>
</td>
</tr>
</table>
</form>
</body>
</html>
当您点击任何下拉列表时，它会显示“无”而不是选项。
答案 0 :(得分：0)
这可能是因为你错过了jquery文件。当你使用bootstrap时，jquery是必须的。您是否在此处查看了入门级模板：http://getbootstrap.com/docs/4.1/getting-started/introduction/
答案 1 :(得分：0)
找到解决方案 - 下拉列表未显示JavaScript代码中的选项的原因是因为针对0的测试需要具有===。
if((mSel===0) || (mSel==2) || (mSel==4) || (mSel==6) || (mSel==7) || (mSel==9) || (mSel==11))
{
然而，现在calander没有显示在主页上。分配页面必须是为工作人员创建生日庆祝的页面，主页必须有日历，显示已经创建的庆祝活动的链接。
这是主要的事情所以它需要捕获并显示它。