时间戳

首页 > 解决方案 > Javascript 和 CSS 代码字面上出现在我的 HTML 页面上

javascript - Javascript 和 CSS 代码字面上出现在我的 HTML 页面上

问题描述

这是一个简单的日历代码。我的 javascript 和 CSS 代码确实出现在我的日历旁边。有谁知道为什么会发生这样的事情？我使用的是在线 html/css/js 编辑器，当我将代码制作成 HTML 文件时，发生了这种情况。我花了几个小时寻找故障，但找不到任何有问题的地方。

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>ICSI301 - Lab 2</title>
</head>

<body>
        <h1 id="year">2021 School Calendar</h1>
        <div class="calendar">
        </div>
</body>

</html>

<script>

    var monthNamesRy = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var daysOfTheWeekRy = ["S", "M", "T", "W", "T", "F", "S"]

    var d = new Date();
    var year = d.getFullYear();

    var thisMonth = d.getMonth();
    var today = d.getDate();
    //var nthday = d.getDay();
    var daysOfTheMonthDiv = document.querySelectorAll(".daysOfTheMonth");

    for (var month = 0; month < 12; month++) {
        createCalendar(month);
    }

    function createCalendar(month) {
        var monthDiv = createMonthHeader(month);

        var firstDayOfTheMonth = getFirstDayOfTheMonth(year, month);
        var daysinmonth = daysInMonth(year, month)
        var counter = 0, order = 6;

        for (var i = 0; i < firstDayOfTheMonth + 7; i++) {
            order++;
            createDay(month, "&nbsp;", order, monthDiv);
        }
        for (var i = firstDayOfTheMonth; i < daysInMonth(year, month) + firstDayOfTheMonth; i++) {
            counter++;
            order++;
            createDay(month, counter, order, monthDiv);
        }

        for (var i = firstDayOfTheMonth + daysinmonth; i < 6 * 7; i++) {
            order++;
            createDay(month, "&nbsp;", order, monthDiv);
        }
    }

    function createDay(month, counter, order, monthDiv) {

        var day = document.createElement("div");
        if (month == thisMonth && counter == today) {
            day.setAttribute("class", "to day");
        } else {
            day.setAttribute("class", "day");
        }
        day.setAttribute("style", "order:" + order);
        day.innerHTML = counter;
        monthDiv.appendChild(day);
    }

    function createMonthHeader(month) {
        var calendar = document.querySelector(".calendar");

        var monthDiv = document.createElement("div");
        monthDiv.setAttribute("class", "month");
        calendar.appendChild(monthDiv);

        var h4 = document.createElement("h4");
        h4.innerHTML = monthNamesRy[month];
        monthDiv.appendChild(h4);

        for (var i = 0; i < 7; i++) {
            var hday = document.createElement("div");
            hday.setAttribute("class", "day OfWeek");
            hday.setAttribute("style", "order:" + i);
            hday.innerHTML = daysOfTheWeekRy[i].toUpperCase();
            monthDiv.appendChild(hday);
        }

        return monthDiv;
    }

    function daysInMonth(year, month) {
        return new Date(year, month + 1, 0).getDate();
    }

    function getMonthName(month) {
        return monthNamesRy[month];
    }
    function getDayName(day) {
        return daysOfTheWeekRy[day];
    }

    function getFirstDayOfTheMonth(y, m) {
        var firstDay = new Date(y, m, 1);
        return firstDay.getDay();
    }
    function getLastDayOfTheMonth(y, m) {
        var lastDay = new Date(y, m + 1, 0);
        return lastDay.getDay();
    }
</script>

<style>

    body * {
        margin: 0;
        padding: 0;
        font-family: "Times New Roman";
    }

    .calendar, section {
        max-width: 50rem;
    }

    .day {
        width: 1.5em;
        height: 1.5em;
    }

        .day:nth-of-type(-n+7) {
            background-color: #7CFC00;
        }

    .to.day {
        background: aquamarine;
    }

    .month {
        width: calc(1.5em * 8);
        padding: 1em;
    }

    h4 {
        font-size: 1em;
        text-transform: uppercase;
    }

    h1#year {
        font-size: 3em;
        height: 29px;
        font-weight: normal;
        padding: 1em 1em .5em 1em;
        margin-bottom: .5em;
        color: #006400;
    }

    body, body * {
        display: flex;
        justify-content: center;
    }

    h4 {
        justify-content: center;
        flex: 1 0 100%;
    }

    h1 {
        justify-content: center;
        align-self: stretch;
    }

    .calendar, .month {
        flex-wrap: wrap;
    }

    .month {
        align-items: flex-start;
        border: 3px double black;
        margin: 5px;
    }

    .day {
        border: 1px solid black;
        align-items: center;
        justify-content: center;
    }

</style>

标签： javascripthtmlcss

解决方案

这比起初看起来更有趣。可以通过将脚本移到头部来解决问题，但是脚本标签和样式标签的内容通常不会在浏览器中显示。他们在这种情况下显示的原因是 css 正在强制显示这些标签的内容。

浏览器的css有

script {
    display: none;
}

这被以下几行覆盖：

body, body * {
    display: flex;
    justify-content: center;
}

浏览器在构建 DOM 时将无效定位的标签拉入body，然后应用此显示属性......这意味着代码运行，但它也显示在页面上。

它可以通过移动脚本标签来修复，但这实际上并不能解决问题的真正原因

推荐阅读