如何清除 div 内容 onclick？ [复制]答案

【问题标题】：How to clear div content onclick? [duplicate]如何清除 div 内容 onclick？ [复制]
【发布时间】：2015-04-07 03:50:06
【问题描述】：

我正在制作一个纯粹使用 Javascript 的日历，但是当显示上个月和下个月时，当前内容仍然存在。它应该替换 div 内容。此外，当前日期应该是唯一显示红色字体的日期。

<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>

【问题讨论】：

标签： javascript

【解决方案1】：

我认为如果您可以使用容器元素并设置其内容而不是使用 document.write() 会更好

<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>

【讨论】：

是否可以将事件添加到某个日期？

【解决方案2】：

如果您想清除任何 HTML 元素，您只需请勿使用document.write()，它会清除整个页面。

它是document.write()，无论如何它总是在那里。尽量不要使用 document.write()

请改用createElement('div')。它更干净，您可以跟踪元素，并且它们是静态的，除非您希望它们更改。一切尽在您的掌控之中。

 document.getElementById('Clear_This_Div_id').innerHTML = '';

这通常会清除元素

【讨论】：

【解决方案3】：

无需更改代码的大部分其他部分，您只需更改

document.write(text);

到

document.getElementsByTagName('body')[0].innerHTML = text;

这将在放入新内容之前清除以前的内容，因为您每次都输入body。

【讨论】：