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

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

转载作者：行者123 更新时间：2023-12-01 23:30:52

这是一个简单的日历代码。我的 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>

最佳答案

将脚本和样式移到头部
改变这个

    var daysOfTheMonthDiv = document.querySelectorAll(".daysOfTheMonth");

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

到

    window.addEventListener("load",function() { // wait for page load
      var daysOfTheMonthDiv = document.querySelectorAll(".daysOfTheMonth");
      for (var month = 0; month < 12; month++) {
        createCalendar(month);
      }
    })

作为Chris noticed ，你有一个非常颠覆性的风格条目

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

我把它移到了另一种体型的正下方，现在必须添加

script,
style {
  display: none
}

停止干扰

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>ICSI301 - Lab 2</title>
  <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();
    window.addEventListener("load", function() {
      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";
    }
    
    body,
    body * {
      display: flex;
      justify-content: center;
    }
    
    script,
    style {
      display: none
    }
    
    .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;
    }
    
    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>
</head>

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

  <div class="calendar"></div>

</body>

</html>

关于Javascript 和 CSS 代码字面上出现在我的 HTML 页面上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66291127/

文章推荐： Scala:如何使子类(在其他实例上)可以访问 protected 方法？

文章推荐： .net - 元组和值元组

iphone - 出现 Storyboard之前的选项卡栏项目标题
我的应用程序从一个有 5 个选项卡的选项卡栏 Controller 开始。一开始，第一个出现了它的名字，但其他四个没有名字，直到我点击它们。然后根据用户使用的语言显示名称。如何在选项卡栏出现之前设置选
javascript - 为什么我的数据表没有在函数内部使用 $.each 出现？
我有嵌套数组 json 对象(第 1 层、第 2 层和第 3 层)。我的问题是数据表没有出现。任何相关的 CDN 均已导入。该表仅显示部分。我引用了很多网站，但都没有解决我的问题。之前我使用标准表来
swift - PFLoginViewController 出现
我正在尝试设置要显示的 Parse PFLoginViewController。这是我的一个 View Controller 的类。 import UIKit import Parse import
java - 图形未绘制/出现
我遇到了这个问题，我绘制的对象没有出现在 GUI 中。我知道它正在被处理，因为数据被推送到日志文件。但是，图形没有出现。这是我的一些代码: public static void main(Strin
java - 出现 - TreeMap
我有一个树状图，其中包含出现这样的词...... TreeMap occurrence = new TreeMap (); 字符串 = 单词整数 = 出现次数。我如何获得最大出现次数 - 整数，
java - 出现 do-while 错误
因此，我提示用户输入变量。如果变量小于 0 且大于 10。如果用户输入 10，我想要求用户再次输入数字。我问时间的时候输入4，它说你输入错误。但在第二次尝试时效果很好。例如:如果我输入 25，它会打印
出现 CSS 溢出滚动条但不工作
我已经用 css overflow 属性做了一个例子。在这个例子中我遇到了一个溢出滚动的问题。滚动条出现了，但没有工作意味着每当将光标移动到滚动条时，在这个滚动条不活动的时间。我对此一无所知，所以请帮
Javascript 出现/消失对象
我现在正在做一个元素。当您单击一个元素时，会出现以下信息，我想知道如何在您单击下一个元素而不重新单击同一元素时使其消失....例如，我的元素中有披萨，我想单击肉披萨看到浇头然后点击奶酪披萨看到浇头和肉
python简单路由器url匹配器，如何重新匹配第一个 "/"出现
我有一个路由器模块，它将主题与正则表达式进行比较，并将出现的事件与一致的键掩码链接起来。 (它是一个简单的 url 路由过滤，如 symfony http://symfony.com/doc/curr
出现 PHP 错误但代码仍然正确执行
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: mysql_fetch_array() expects parameter 1 to be resource, bo
ios - 出现 View 时工具栏跳到位
我在底部有一个带有工具栏的 View ，我正在使用 NavigationLink 导航到该 View 。但是当 View 出现时，工具栏显示得有点太低了。大约半秒钟后，它突然跳到位。它只会在应用程序启
SwiftUI 出现 AVAudioPlayer 播放多次
我试图在我的应用程序上为背景音乐添加一个 AVAudioPlayer，我正在主屏幕上启动播放器，尝试在应用程序打开时开始播放但出现意外行为... 它播放并立即不断创建新玩家并播放这些玩家，因此同时播放
Haskell，不知道为什么输入 ‘if’ * 出现*解析错误
这是获取一个数字，获取其阶乘并将其加倍，但是由于基本情况，如果您输入 0，它会给出 2 作为答案，因此为了绕过它，我使用了 if 语句，但收到错误输入“if”时解析错误。如果你们能提供帮助，我真的很感
java - 出现 DeadObjectException 并且应用程序崩溃
暂停期间抛出异常 android.os.DeadObjectException 在 android.os.BinderProxy.transactNative( native 方法) 在 androi
java - 出现 NoSuchElementException 并且我找不到解决方法
我已经为猜词游戏编写了一些代码。它从用户输入中读取字符并在单词中搜索该字符；根据字符是否在单词中，程序返回并控制一些变量。代码如下: import java.util.Random; import
出现 java.lang.NullPointerException
我是自动化领域的新手。这是我的简单 TestNG 登录代码，当我以 TestNG 身份运行该代码时，它会出现 java.lang.NullPointerException，双击它会突出显示我导航到 U
java - 当我尝试从另一个类向引用的类添加一些值时，出现 nullPointerException
我是c#程序员，我习惯了c#的封装语法和其他东西。但是现在，由于某些原因，我应该用java写一些东西，我现在正在练习java一天!我要创建一个为我自己创建一个虚拟项目，以便让自己更熟悉 Java 的
java - ClassPathXmlApplicationContext 出现 NoClassDefFoundError？
我正在使用 Intellij，我的源类是 main.com.coding，我的资源文件是 main.com.testing。我将 spring.xml 文件放入资源文件中。我的测试类位于 test.
python - pytest 出现 ModuleNotFoundError
我想要我的tests folder separate到我的应用程序代码。我的项目结构是这样的 myproject/ myproject/ myproject.py moduleon
java - 当我尝试比较数据库中的值和编辑文本输入时，出现 NullPointerException
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 6 年前。因此，我尝试比较 2 个值，一个

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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