javascript - 使用 JSandHtml 创建日历
问题描述
我希望我的代码在提示用户输入后显示日历,输出应该是对应于月份的数字和对应于星期一到星期日的日期。我无法找出我缺少的东西我还没有编写一个 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)
解决方案
您的 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)
推荐阅读
- python - For循环直到最后才进行
- android - 代码不适用于 Android/Oxygen OS 相关手机,但适用于 Galaxy 手机
- mongodb - MongoDB 中嵌入式/嵌套字段的 GraphQL 查询
- javascript - AngularJS md-select 将两个选择值联系在一起
- mysql - MySQL 更新数据库命令不起作用
- postgresql - 如何在 PostgreSQL 中将字符变化(varcar)与 UUID 进行比较?
- spring - 电子邮件已发送但超时
- python - python pandas df_train["x"] 和 df_train[["x"]] 的区别
- xml - XPath 查询 - 返回与用于过滤的元素相同的属性
- embedded-linux - 在受限嵌入式系统上使用 sshd 启动子系统进程