使用 JSandHtml 創建日歷
[英]Creating a calendar with JSandHtml
問題描述
我希望我的代碼在提示用戶輸入后顯示日歷 output 應該是對應於星期一到星期日的月份和日期的數字。 我無法找出我缺少的東西我還沒有編寫 css 文件這就是它不會在 Visual Studio 代碼中的瀏覽器/實時服務器上顯示任何內容的原因嗎？ 請幫我
這是我的 html 代碼：
<!DOCTYPE HTML>
<html lang="em">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Git Demonstration</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/my.js"></script>
</body>
</html>
這是我的 java 腳本代碼：
var inpMonth, inpDay;
inpMonth = prompt("Month 1-12")
inpDay = prompt("Start Day 1-7")
function Calendar(element, month, day) {
const days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
let mName = ''
if (month == 1)
mName = 'JANUARY'
else if (month == 2)
mName = 'FEBRUARY'
else if (month == 3)
mName = 'MARCH'
else if (month == 4)
mName = 'APRIL'
else if (month == 5)
mName = 'MAY'
else if (month == 6)
mName = 'JUNE'
else if (month == 7)
mName = 'JULY'
else if (month == 8)
mName = 'AUGUST'
else if (month == 9)
mName = 'SEPTEMBER'
else if (month == 10)
mName = 'OCTOBER'
else if (month == 11)
mName = 'NOVEMBER'
else if (month == 12)
mName = 'DECEMBER'
else
{
mName = "Invalid Input"
}
let WeekC = 0
let CDays = 1
let Adder = 1
let tblCreate =
`<table>
<tr>
<td colspan = "7"id="month" style="text-align:center; font-size: larger;">
${mName}
</td>
</tr>
<tr>
<th style="color:white; background-color: black; text-align:center;">
SUN
</th>
<th style="text-align:center">
MON
</th>
<th style="color:white; background-color: black; text-align:center">
TUE
</th>
<th style="text-align:center">
WED
</th>
<th style="color:white; background-color: black; text-align:center">
THU
</th>
<th style="text-align:center">
FRI
</th>
<th style="color:white; background-color: black; text-align:center">
SAT
</th>
</tr>`
if(month > 12 || day > 7)
{
element.innerHTML = ('<h3 style="text-align: center; color: red; background-color:black;">Invalid Input!</h3>')
}
else if(month == 0 || day == 0)
element.innerHTML = ('<h3 style="text-align: center; color: red; background-color:black;">Invalid Input!</h3>')
else
{
if(days[month-1] == 31)
{
if(day >= 6)
{
for (let i = 0; i < 42; i++)
{
if (WeekC == 0)
{
tblCreate += '<tr>'
}
if (Adder <= day - 1)
{
tblCreate += "<td></td>"
Adder++
}
else if (CDays > days[month - 1])
tblCreate += "<td></td>"
else
{
if (CDays <= days[month - 1])
{
tblCreate += `<td>${CDays}</td>`
CDays++
}
else
tblCreate += "<td></td>"
}
if (WeekC == 6)
{
tblCreate += '</tr>'
WeekC = 0
}
else
{
WeekC++
}
}
}
else{
for (let i = 0; i < 35; i++)
{
if (WeekC == 0)
{
tblCreate += '<tr>'
}
if (Adder <= day - 1)
{
tblCreate += "<td></td>"
Adder++
}
else if (CDays > days[month - 1])
tblCreate += "<td></td>"
else
{
if (CDays <= days[month - 1])
{
tblCreate += `<td>${CDays}</td>`
CDays++
}
else
tblCreate += "<td></td>"
}
if (WeekC == 6)
{
tblCreate += '</tr>'
WeekC = 0
}
else
{
WeekC++
}
}
}
}
else if(days[month-1] == 28)
{
if(day >= 6)
{
for (let i = 0; i < 35; i++)
{
if (WeekC == 0)
{
tblCreate += '<tr>'
}
if (adder <= day - 1)
{
tblCreate += "<td></td>"
Adder++
}
else if (CDays > days[month - 1])
tblCreate += "<td></td>"
else
{
if (CDays <= days[month - 1])
{
tblCreate += `<td>${CDays}</td>`
CDays++
}
else
tblCreate += "<td></td>"
}
if (WeekC == 6)
{
tblCreate += '</tr>'
WeekC = 0
}
else
{
WeekC++
}
}
}
else
{
for (let i = 0; i < 28; i++)
{
if (WeekC == 0)
{
tblCreate += '<tr>'
}
if (Adder <= day - 1)
{
tblCreate += "<td></td>"
Adder++
}
else if (CDays > days[month - 1])
tblCreate += "<td></td>"
else
{
if (CDays <= days[month - 1])
{
tblCreate += `<td>${CDays}</td>`
CDays++
}
else
tblCreate += "<td></td>"
}
if (WeekC == 6)
{
tblCreate += '</tr>'
WeekC = 0
}
else
{
WeekC++
}
}
}
}
else{
if(day >= 6){
for (let i = 0; i < 35; i++)
{
if (WeekC == 0)
{
tblCreate += '<tr>'
}
if (Adder <= day - 1)
{
tblCreate += "<td></td>"
Adder++
}
else if (CDays > days[month - 1])
tblCreate += "<td></td>"
else
{
if (CDays <= days[month - 1])
{
tblCreate += `<td>${CDays}</td>`
CDays++
}
else
tblCreate += "<td></td>"
}
if (WeekC == 6)
{
tblCreate += '</tr>'
WeekC = 0
}
else
{
WeekC++
}
}
}
else
{
for (let i = 0; i < 35; i++)
{
if (WeekC == 0)
{
tblCreate += '<tr>'
}
if (Adder <= day - 1)
{
tblCreate += "<td></td>"
Adder++
}
else if (CDays > days[month - 1])
tblCreate += "<td></td>"
else
{
if (CDays <= days[month - 1])
{
tblCreate += `<td>${CDays}</td>`
CDays++
}
else
tblCreate += "<td></td>"
}
if (WeekC == 6)
{
tblCreate += '</tr>'
WeekC = 0
}
else
{
WeekC++
}
}
}
}
tblCreate += '</table>'
element.innerHTML = tblCreate ;
}
}
Calendar(Cal, inpMonth, inpDay)
1 個解決方案
解決方案1
0 已采納 2021-03-09 14:20:56
您的 html 代碼中似乎缺少 html 元素，並在 javascript 中鏈接到它。
像這樣將元素添加到您的 html 代碼中。
<!DOCTYPE HTML>
<html lang="em">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Git Demonstration</title>
</head>
<body>
<div id="calendar-element"></div>
<script src="js/my.js"></script>
</body>
</html>
並添加您的元素鏈接變量。
var inpMonth, inpDay, calendarElement;
inpMonth = prompt("Month 1-12")
inpDay = prompt("Start Day 1-7")
calendarElement = document.getElementById('calendar-element')
/* here is your function */
Calendar(calendarElement, inpMonth, inpDay)
創建日歷控件的想法
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.