使用 JSandHtml 创建日历
[英]Creating a calendar with JSandHtml
问题描述
I wanted my code to display the calendar after prompting the user to place an input the output should be numbers corresponding to month and days corresponding to Monday to Sunday.
我希望我的代码在提示用户输入后显示日历 output 应该是对应于星期一到星期日的月份和日期的数字。 I was not able to find out what I am lacking with also am I am still yet to compose a css file is this the reason why It won't show anything on browser / live server in visual studio code?我无法找出我缺少的东西我还没有编写 css 文件这就是它不会在 Visual Studio 代码中的浏览器/实时服务器上显示任何内容的原因吗？ Please help me请帮我
This is my html code:这是我的 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>
This is my java script code:这是我的 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
It seems you are missing html element in your html code and link to it in javascript.您的 html 代码中似乎缺少 html 元素，并在 javascript 中链接到它。
Add element to your html code like so.像这样将元素添加到您的 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>
And add your element link variable.并添加您的元素链接变量。
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.
相关问题
创建日历控件的想法 - Ideas for creating a Calendar control
在 javascript 中创建日历 - creating a calendar in javascript
在 javascript / html 中创建日历 - creating a calendar in javascript / html
用 Javascript (Html) 创建日历 - Creating a calendar in Javascript (Html)
在 HTML 中创建日历 - Creating a calendar in HTML
创建 js 日历的问题 - Problems creating js calendar
创建带有时刻和反应的日历组件 - Creating a calendar component with moment and react
完整日历创建简单事件 - Full Calendar creating simple event
创建日历-限制列数 - Creating calendar - restrain number of columns
使用Kendo UI-创建日历 - Using Kendo UI - Creating the Calendar
相关标签