为什么在 HTML 终端模拟器中创建颜色命令会创建（大部分）白色屏幕？

发布于 2025-01-11 08:51:27 字数 1242 浏览 0 评论 0原文

我正在制作一个 HTML 终端，并且已经完成了大部分样式设计。不过，我正在尝试添加一个命令，这会改变颜色。您可以运行这些代码片段，看看我为什么要问这个问题，但是当您输入颜色然后输入颜色时，它不会执行我想要执行的操作，它只会给您一个（大部分）白色屏幕。

$('body').terminal({
  iam: function(name) {
    this.echo('Hello, ' + name +
      '. Welcome to Coding Class!');
  },
  echo: function(what) {
    this.echo(what)
  },
  link: function(link) {
    window.location.replace("http://www." + link);
  },
  color: function(color) {
    var body = document.querySelector("body");
    body.className = "test";

    var temp = document.querySelectorAll(".test");

    for (var i = 0; i < temp.length; i++) {
      temp[i].style.color = color;
      temp[i].style.fontSize = "40px";
    }
  }
}, {
  greetings: 'Hi!',
  prompt: 'root> '
})

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js">
  </script>
  <script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js">
  </script>
  <link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" />
</head>

<body>

</body>

原文

I am making an HTML terminal, and have done most of the styling. I am trying to add one command, though, which will change the color. You can run these code snippets, and see why I'm asking this, but when you type in color and then a color, instead of doing what I'm trying to make it do, it just gives you a (mostly) white screen.

$('body').terminal({
  iam: function(name) {
    this.echo('Hello, ' + name +
      '. Welcome to Coding Class!');
  },
  echo: function(what) {
    this.echo(what)
  },
  link: function(link) {
    window.location.replace("http://www." + link);
  },
  color: function(color) {
    var body = document.querySelector("body");
    body.className = "test";

    var temp = document.querySelectorAll(".test");

    for (var i = 0; i < temp.length; i++) {
      temp[i].style.color = color;
      temp[i].style.fontSize = "40px";
    }
  }
}, {
  greetings: 'Hi!',
  prompt: 'root> '
})

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js">
  </script>
  <script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js">
  </script>
  <link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" />
</head>

<body>

</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

纸短情长 2025-01-18 08:51:27

要以更简单的方式更改终端的颜色，您还可以执行以下操作：

color: function(clr) {
$("div, ul, li").css("background-color", clr);
},

To change the terminal's color in a more simple way you could also do:

color: function(clr) {
$("div, ul, li").css("background-color", clr);
},

回复收藏 0 原文

难理解 2025-01-18 08:51:27

let $ = jQuery.noConflict();
$('body').terminal({
    iam: function(name) {
        this.echo('Hello, ' + name +
            '. Welcome to Coding Class!');
    },
    echo: function(what) {
        this.echo(what)
    },
    link: function(link) {
        window.location.replace("http://www." + link);
    },
    color: function(color) {
        var body = document.querySelector("body");
        body.classList.add('test');// add class name `test` to body.

        var temp = document.querySelectorAll(".test");

        for (var i = 0; i < temp.length; i++) {
            temp[i].style.setProperty('--background', color);// use set variable instead of `background-color`.
            //temp[i].style.backgroundColor = color;// not recommended
            temp[i].style.fontSize = "40px";
        }
    }
}, {
    greetings: 'Hi!',
    prompt: 'root> '
})

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js">
  </script>
  <script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js">
  </script>
  <link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" />
</head>

<body>

</body>

我将向您展示如何在 body 中使用 add() CSS 类名。

为了在命令 color 上更改背景颜色，我将代码更改为使用 setProperty() 来设置 CSS 变量，因为 CSS 文件本身已经在使用该变量（在 < code>.terminal 类），这样更容易。

let $ = jQuery.noConflict();
$('body').terminal({
    iam: function(name) {
        this.echo('Hello, ' + name +
            '. Welcome to Coding Class!');
    },
    echo: function(what) {
        this.echo(what)
    },
    link: function(link) {
        window.location.replace("http://www." + link);
    },
    color: function(color) {
        var body = document.querySelector("body");
        body.classList.add('test');// add class name `test` to body.

        var temp = document.querySelectorAll(".test");

        for (var i = 0; i < temp.length; i++) {
            temp[i].style.setProperty('--background', color);// use set variable instead of `background-color`.
            //temp[i].style.backgroundColor = color;// not recommended
            temp[i].style.fontSize = "40px";
        }
    }
}, {
    greetings: 'Hi!',
    prompt: 'root> '
})

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js">
  </script>
  <script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js">
  </script>
  <link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" />
</head>

<body>

</body>

I'm showing you how to use add() CSS class name to body.

To make background color change on command color, I change the code to use setProperty() to set CSS variable instead because the CSS file itself is already use that variable (in .terminal class) and it is easier this way.

回复收藏 0 原文

~没有更多了~