Javascript 如何在单击时清除div内容？
我纯粹是从Javascript制作日历，但当上个月和下个月显示时，当前内容仍然存在。它应该替换div内容。此外，当前日期应该是唯一显示红色字体的日期Javascript 如何在单击时清除div内容？,javascript,Javascript,我纯粹是从Javascript制作日历，但当上个月和下个月显示时，当前内容仍然存在。它应该替换div内容。此外，当前日期应该是唯一显示红色字体的日期 <html> <head><script> var now = new Date(); var year = now.getFullYear(); var month = now.getMonth(); var monthName = getMon
<html>
<head><script>
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var monthName = getMonthName(month);
var time = now.toLocaleTimeString();
var date = now.getDate();
now = null;
var calElem = document.getElementById("cal");
function febDays(year) {
if (year % 4 == 0) {
return 29;
} else {
return 28;
}
}
function getDays(month, year) {
var days = new Array(12);
days[0] = 31;
days[1] = febDays(year);
days[2] = 31;
days[3] = 30;
days[4] = 31;
days[5] = 30;
days[6] = 31;
days[7] = 31;
days[8] = 30;
days[9] = 31;
days[10] = 30;
days[11] = 31;
return days[month];
}
function getMonthName(month) {
var mn = new Array(12);
mn[0] = "January";
mn[1] = "February";
mn[2] = "March";
mn[3] = "April";
mn[4] = "May";
mn[5] = "June";
mn[6] = "July";
mn[7] = "August";
mn[8] = "September";
mn[9] = "October";
mn[10] = "November";
mn[11] = "December";
return mn[month];
}
function monthName(month) {
var mn = new Array(12);
mn[0] = "Jan";
mn[1] = "Feb";
mn[2] = "Mar";
mn[3] = "Apr";
mn[4] = "May";
mn[5] = "Jun";
mn[6] = "Jul";
mn[7] = "August";
mn[8] = "September";
mn[9] = "October";
mn[10] = "November";
mn[11] = "December";
return mn[month];
}
function setCal() {
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
function previousMonth() {
document.getElementById('cal').innerHTML = "";
month--;
var monthName = getMonthName(month);
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
if (monthName === "January"){
year--;
month = 11;
monthName = getMonthName(month);
firstDay = new Date(year, month, 1);
startDay = firstDay.getDay();
firstDay = null;
days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
}
function nextMonth() {
document.getElementById('cal').innerHTML = "";
month++;
var monthName = getMonthName(month);
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
if (monthName === "December"){
year++;
month = 0;
monthName = getMonthName(month);
firstDay = new Date(year, month, 1);
startDay = firstDay.getDay();
firstDay = null;
days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
}
function drawCal(startDay, lastDate, date, monthName, year, month) {
var headerHeight = 50;
var border = 2;
var cellspacing = 4;
var headerSize = "+3";
var colWidth = 60;
var dayCellHeight = 25;
var cellHeight = 40;
var todayColor = "red";
var text = "";
text += '<div id="cal">';
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>';
text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>';
text += '<FONT SIZE=' + headerSize + '>';
text += monthName + ' ' + year;
text += '</FONT>';
text += '</TH>';
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
var closeCol = '</TD>';
var weekDay = new Array(7);
weekDay[0] = "Sunday";
weekDay[1] = "Monday";
weekDay[2] = "Tuesday";
weekDay[3] = "Wednesday";
weekDay[4] = "Thursday";
weekDay[5] = "Friday";
weekDay[6] = "Saturday";
text += '<TR ALIGN="center" VALIGN="center">';
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol;
}
text += '</TR>';
var digit = 1;
var curCell = 1;
for (var row = 1; row <= Math.ceil((lastDate + startDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">';
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break;
if (curCell < startDay) {
text += '<TD></TD>';
curCell++;
} else {
if (digit == date) {
text += '<TD HEIGHT=' + cellHeight + '>';
text += '<FONT COLOR="' + todayColor + '">';
text += digit + " ";
text += '</FONT>';
text += '</TD>';
} else
text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>';
digit++;
}
}
text += '</TR>';
}
text += '</TABLE>';
text += '</CENTER>';
text += '</div>';
text += '<button onclick="previousMonth()"><</button>';
text += '<button onclick="nextMonth()">></button>';
document.write(text);
}
</script></head>
<body onload="setCal()">
</body>
</html>
var now=新日期（）；
var year=now.getFullYear（）；
var month=now.getMonth（）；
var monthName=getMonthName（月）；
var time=now.toLocaleTimeString（）；
var date=now.getDate（）；
现在=空；
var calElem=document.getElementById（“cal”）；
功能二月（年）{
如果（第%4年==0）{
返回29；
}否则{
返回28；
}
}
函数getDays（月、年）{
var天数=新阵列（12）；
天数[0]=31天；
天[1]=二月（年）；
天数[2]=31天；
天数[3]=30天；
天数[4]=31天；
天数[5]=30天；
天数[6]=31天；
天数[7]=31天；
天数[8]=30天；
天[9]=31天；
天[10]=30；
天[11]=31；
返回天数[月]；
}
函数getMonthName（月）{
var mn=新数组（12）；
mn[0]=“一月”；
mn[1]=“二月”；
mn[2]=“三月”；
mn[3]=“四月”；
mn[4]=“可以”；
mn[5]=“6月”；
mn[6]=“7月”；
mn[7]=“八月”；
mn[8]=“9月”；
mn[9]=“10月”；
mn[10]=“11月”；
mn[11]=“12月”；
返回mn[月]；
}
功能月名（月）{
var mn=新数组（12）；
mn[0]=“Jan”；
mn[1]=“Feb”；
mn[2]=“Mar”；
mn[3]=“Apr”；
mn[4]=“可以”；
mn[5]=“Jun”；
mn[6]=“七月”；
mn[7]=“八月”；
mn[8]=“9月”；
mn[9]=“10月”；
mn[10]=“11月”；
mn[11]=“12月”；
返回mn[月]；
}
函数setCal（）{
var firstDay=新日期（年、月、1）；
var startDay=firstDay.getDay（）；
第一天=空；
var天数=getDays（月、年）；
提款（开始日期+1，天，日期，月，年，月）；
}
函数上个月（）{
document.getElementById（'cal'）.innerHTML=“”；
月--；
var monthName=getMonthName（月）；
var firstDay=新日期（年、月、1）；
var startDay=firstDay.getDay（）；
第一天=空；
var天数=getDays（月、年）；
提款（开始日期+1，天，日期，月，年，月）；
如果（月名==“一月”）{
年--；
月=11；
monthName=getMonthName（月）；
第一天=新日期（年、月、1）；
startDay=firstDay.getDay（）；
第一天=空；
天=天（月、年）；
提款（开始日期+1，天，日期，月，年，月）；
}
}
函数nextMonth（）{
document.getElementById（'cal'）.innerHTML=“”；
月份++；
var monthName=getMonthName（月）；
var firstDay=新日期（年、月、1）；
var startDay=firstDay.getDay（）；
第一天=空；
var天数=getDays（月、年）；
提款（开始日期+1，天，日期，月，年，月）；
如果（月名==“12月”）{
年份++；
月份=0；
monthName=getMonthName（月）；
第一天=新日期（年、月、1）；
startDay=firstDay.getDay（）；
第一天=空；
天=天（月、年）；
提款（开始日期+1，天，日期，月，年，月）；
}
}
函数drawCal（开始日期、最后日期、日期、月、年、月）{
var水头=50；
var-border=2；
var细胞间距=4；
var headerSize=“+3”；
var-colWidth=60；
var dayCellHeight=25；
var-cellHeight=40；
var todayColor=“红色”；
var text=“”；
文本+=”；
文本+=”；
文本+=”；
文本+=”；
文本+=月名+''+年；
文本+=”；
文本+=”；
var openCol=''；
var closeCol=''；
var weekDay=新数组（7）；
工作日[0]=“周日”；
工作日[1]=“周一”；
工作日[2]=“星期二”；
工作日[3]=“星期三”；
工作日[4]=“周四”；
工作日[5]=“周五”；
工作日[6]=“周六”；
文本+=”；
对于（var dayNum=0；dayNum<7；++dayNum）{
text+=openCol+weekDay[dayNum]+closeCol；
}
文本+=”；
变量位数=1；
var-curCell=1；
对于（var row=1；row，如果要清除任何HTML元素，只需
不要使用document.write（）
它会清除整个页面
它是document.write（）
无论发生什么，它总是保持在那里。请尽量不要使用document.write（）
改用createElement（'div'）
。它更干净，你可以跟踪元素，它们是静态的，除非你想改变它们。一切都在你的控制之下
document.getElementById('Clear_This_Div_id').innerHTML = '';
这通常会清除元素我认为如果可以使用容器元素并设置其内容，而不是使用document.write（）会更好
var now=新日期（）；
var year=now.getFullYear（）；
var month=now.getMonth（）；
var monthName=getMonthN
<html>
<head><script>
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var monthName = getMonthName(month);
var time = now.toLocaleTimeString();
var date = now.getDate();
now = null;
var calElem = document.getElementById("cal");
function febDays(year) {
if (year % 4 == 0) {
return 29;
} else {
return 28;
}
}
function getDays(month, year) {
var days = new Array(12);
days[0] = 31;
days[1] = febDays(year);
days[2] = 31;
days[3] = 30;
days[4] = 31;
days[5] = 30;
days[6] = 31;
days[7] = 31;
days[8] = 30;
days[9] = 31;
days[10] = 30;
days[11] = 31;
return days[month];
}
function getMonthName(month) {
var mn = new Array(12);
mn[0] = "January";
mn[1] = "February";
mn[2] = "March";
mn[3] = "April";
mn[4] = "May";
mn[5] = "June";
mn[6] = "July";
mn[7] = "August";
mn[8] = "September";
mn[9] = "October";
mn[10] = "November";
mn[11] = "December";
return mn[month];
}
function monthName(month) {
var mn = new Array(12);
mn[0] = "Jan";
mn[1] = "Feb";
mn[2] = "Mar";
mn[3] = "Apr";
mn[4] = "May";
mn[5] = "Jun";
mn[6] = "Jul";
mn[7] = "August";
mn[8] = "September";
mn[9] = "October";
mn[10] = "November";
mn[11] = "December";
return mn[month];
}
function setCal() {
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
function previousMonth() {
document.getElementById('cal').innerHTML = "";
month--;
var monthName = getMonthName(month);
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
if (monthName === "January"){
year--;
month = 11;
monthName = getMonthName(month);
firstDay = new Date(year, month, 1);
startDay = firstDay.getDay();
firstDay = null;
days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
}
function nextMonth() {
document.getElementById('cal').innerHTML = "";
month++;
var monthName = getMonthName(month);
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
if (monthName === "December"){
year++;
month = 0;
monthName = getMonthName(month);
firstDay = new Date(year, month, 1);
startDay = firstDay.getDay();
firstDay = null;
days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
}
function drawCal(startDay, lastDate, date, monthName, year, month) {
var headerHeight = 50;
var border = 2;
var cellspacing = 4;
var headerSize = "+3";
var colWidth = 60;
var dayCellHeight = 25;
var cellHeight = 40;
var todayColor = "red";
var text = "";
text += '<div id="cal">';
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>';
text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>';
text += '<FONT SIZE=' + headerSize + '>';
text += monthName + ' ' + year;
text += '</FONT>';
text += '</TH>';
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
var closeCol = '</TD>';
var weekDay = new Array(7);
weekDay[0] = "Sunday";
weekDay[1] = "Monday";
weekDay[2] = "Tuesday";
weekDay[3] = "Wednesday";
weekDay[4] = "Thursday";
weekDay[5] = "Friday";
weekDay[6] = "Saturday";
text += '<TR ALIGN="center" VALIGN="center">';
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol;
}
text += '</TR>';
var digit = 1;
var curCell = 1;
for (var row = 1; row <= Math.ceil((lastDate + startDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">';
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break;
if (curCell < startDay) {
text += '<TD></TD>';
curCell++;
} else {
if (digit == date) {
text += '<TD HEIGHT=' + cellHeight + '>';
text += '<FONT COLOR="' + todayColor + '">';
text += digit + " ";
text += '</FONT>';
text += '</TD>';
} else
text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>';
digit++;
}
}
text += '</TR>';
}
text += '</TABLE>';
text += '</CENTER>';
text += '</div>';
text += '<button onclick="previousMonth()"><</button>';
text += '<button onclick="nextMonth()">></button>';
document.getElementById('calc').innerHTML=text;
}
</script></head>
<body onload="setCal()">
<div id="calc"></div>
</body>
</html>
document.write(text);
document.getElementsByTagName('body')[0].innerHTML = text;