主页 / coding / 问题

问题[javascript](coding)

Martin Hope
levent001
Asked: 2025-02-18 14:59:37 +0800 CST
  • 7

我正在 HTML 表中显示正确和错误答案的结果。 在此处输入图片描述

每个问题都有一个“解释链接”作为表格的最后一列。如果单击，我希望在右侧旁边打开一个新的 DIV 或 SPAN（根据需要展开）。它将显示该特定问题的详细解释。它将包含可以使用 h2、h3、p 标签格式化的 HTML 文本，也可能包含图像（“<img src”类型）。再次单击相同或不同的问题“解释链接”应关闭打开的 DIV 或 SPAN。

这是我尝试过的：

JavaScript的：

<script>
    $(function () {
        $('#button-1').click(function(){
            $('#popup-1').animate({height:'500px'}, 500);
        });
    });
</script>

HTML：

<tr><td>Q.2<td>C<td>C<td>&#9989;<td><a href='#' id="button-1">Explain</a><span id='popup-1'>Explanation of answer<br>Goes<br>here<br>including images: <img src='img-explain-q2.jpg'></img></span>

样式表：

#popup-1{
    height: 0px;
    width: 100%;
    float: right;
    overflow: hidden;
    background: #efefef;
}

对于哪里出了问题以及需要做出哪些弥补，您有什么意见吗？

javascript
Martin Hope
LionLive
Asked: 2025-02-18 08:40:39 +0800 CST
  • 3

作为研究的一部分，我将为我的网站实现类似的主题更改。我设法以圆形的形式实现了平滑的主题更改。但我不明白如何以混乱的条带形式进行主题更改，如果您有技能或知识，请告诉我。我附上了我获得的转换的压缩代码，用于紧凑启动。

    const container = document.querySelector(".cards");

    for (let i = 1; i <= 6; i++) {
        const card = document.createElement("div");
        card.className = "card";

        const title = document.createElement("h2");
        title.textContent = `Title${i}`;

        const paragraph = document.createElement("p");
        paragraph.textContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

        card.appendChild(title);
        card.appendChild(paragraph);
        container.appendChild(card);
    }

    document.addEventListener("DOMContentLoaded", () => {
        const btn = document.querySelector(".toggle-button");

        const isDarkMode = () => document.documentElement.getAttribute("data-theme") === "dark";
        const setDarkMode = (enabled) => {
            document.documentElement.setAttribute("data-theme", enabled ? "dark" : "light");
        };

        btn.addEventListener("click", async () => {
            if (!document.startViewTransition || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
                return setDarkMode(!isDarkMode());
            }

            await document.startViewTransition(() => {
                setDarkMode(!isDarkMode());
            }).ready;

            const {top, left, width, height} = btn.getBoundingClientRect();
            const right = window.innerWidth - left;
            const bottom = window.innerHeight - top;
            const maxRadius = Math.hypot(Math.max(left, right), Math.max(top, bottom));

            document.documentElement.animate(
                {
                    clipPath: [
                        `circle(0px at ${left + width / 2}px ${top + height / 2}px)`,
                        `circle(${maxRadius}px at ${left + width / 2}px ${top + height / 2}px)`,
                    ],
                },
                {
                    duration: 1500,
                    easing: "ease-in",
                    pseudoElement: "::view-transition-new(root)",
                }
            );
        });

        setDarkMode(isDarkMode());
    });
      :root {
          color-scheme: dark;
          --theme-text: white;
          --theme-bg: black;

          --bg-card: #29292d;
          --border-card: #3b3b41;
      }

      [data-theme="light"] {
          color-scheme: light;
          --theme-text: black;
          --theme-bg: white;

          --bg-card: #dedfe1;
          --border-card: #cacbcc;
      }

      ::view-transition-old(root),
      ::view-transition-new(root) {
          animation: none;
          mix-blend-mode: normal;
      }

      body {
          background: var(--theme-bg);
      }

      .header {
          display: flex;
          justify-content: end;
          margin-bottom: 10px;
      }

      .cards {
          display: grid;
          gap: 16px;
          grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .card {
          border: 1px solid var(--border-card);
          color: var(--theme-text);
          background: var(--bg-card);
          border-radius: 14px;
          padding: 6px 10px;
      }
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div class="header">
  <button class="toggle-button">Change theme</button>
</div>

<div class="cards"></div>

</body>
</html>

javascript
Martin Hope
Alex
Asked: 2025-02-15 01:50:24 +0800 CST
  • 5

有没有办法让回调参数有类型，而不是any？

type Listener = {
  callback: (...data: any[]) => void,
  once: boolean;
}

class EventEmitter{

  eventMap: Map<string, Listener[]> = new Map();


  on(event: string, callback: Listener["callback"], once: boolean = false) {
    const listeners = this.eventMap.get(event) ?? [];
    listeners.push({ callback, once });
    this.eventMap.set(event, listeners);
    return this;
  }

  once(event: string, callback: Listener['callback']): this {
    this.on(event, callback, true);
    return this;
  }

  emit(event: string, ...data: any[]) {
    const listeners = this.eventMap.get(event) ?? [];

    for (let i = 0; i < listeners.length; i++) {
      const { callback, once } = listeners[i];

      callback(...data);
      if (once) {
        listeners.splice(i, 1);
        this.eventMap.set(event, listeners);
      }
    }
  }
}

Emit 必须接受任何内容，因为它是入口点。假设我这样调用：

events.emit("x", 1, true); 
events.emit("y", "test");

我想要回调来x查看实际的类型，例如：

events.on("x", (arg1, arg2) => { // <= args should have types number and bool

和

events.on("y", (arg1) => { // <= args should have type string
javascript
Martin Hope
user500665
Asked: 2025-02-14 11:02:35 +0800 CST
  • 4

我有两个范围输入。第一个输入永远不应高于第二个输入，第二个输入永远不应低于第一个输入。

我的脚本的问题是滑块会跳动或突然跳到最小值或最大值。如果我将限制更改为固定数字，它会完美运行，但输入值则不行……

以下是我尝试过的一个例子：

function minRange(input) {
    let limit = document.getElementById('max').value;           
    if(input.value >= limit) {
        input.value = limit;
    };
};

function maxRange(input) {
    let limit = document.getElementById('min').value;   
    if(input.value <= limit) {
        input.value = limit;
    };
};
<div><input id="min" type="range" min="0" max="100" value="0" step="1" onInput="minRange(this)" /></div>
<div><input id="max" type="range" min="0" max="100" value="100" step="1" onInput="maxRange(this)" /></div>

javascript
Martin Hope
David Jeong
Asked: 2025-02-14 08:12:22 +0800 CST
  • 6

我正在使用 JavaScript 的Fetch API，如下所示： fetch(URL)

我的浏览器（Chrome）似乎会自动将If-None-Match和If-Modified-Since标头添加到请求中。虽然根据fetch 规范（我认为），这些标头应该会触发预检请求，但没有发送任何预检请求。当浏览器自动添加此类标头而不是我将其添加到fetch函数中时，这是预料之中的吗？

我注意到，当我手动向函数添加标题If-None-Match时，浏览器会发送预检请求：If-Modified-Sincefetch

fetch(cdnUrl, {
  "headers": {
    "If-None-Match": "blah"
  }
})
javascript
Martin Hope
aphenine
Asked: 2025-02-14 01:16:47 +0800 CST
  • 6

我有一个网站，其中的模态框通过 React Portal 运行，它们运行良好，由一个流行的库提供支持。然而，在一个地方，由于各种合理的原因，我们有一个自定义模态框，它不在门户内，也不是由库支持的。

为了方便使用，我尝试将模态框本身设置为 role="modal" 和 aria-modal="true"，以提示屏幕阅读器应忽略背景。但是，背景并没有被忽略。 此网站提到有时确实需要在背景上使用 aria-hidden。在检查 React Portal 和库如何执行此操作时，它会向正文添加 aria-hidden 属性。所以我想我会试一试。

但是，当我创建一个 useEffect 来执行此操作并调用时document.body.setAttribute('aria-hidden', 'true')，它只是忽略了我。我知道代码可以工作，我可以设置其他属性，但不能设置这个属性。你们有人知道为什么会这样吗？

编辑：关于我为什么要这样做的澄清，这是来自的 HTML 树react-modal，我们使用的我上面提到的库，每周下载量为 170 万次：

图像显示了一个打开的 react-modal 模式，其 body 上有 aria-hidden

我很想知道他们为什么这么做，尤其是当模态框是被隐藏的主体的子项时。正如其中一条评论指出的那样，这违反了 Aria 指南，似乎不应该起作用，很奇怪，但实际上确实有效。

javascript
Martin Hope
XCZ_Mike
Asked: 2025-02-14 00:43:19 +0800 CST
  • 6

我正在尝试制作一个聊天应用程序，只需按一下按钮，您就可以看到消息的时间戳滑入。

我的时间戳总是占用 200px 的大小，而另一个占用其余的大小。

我们将 div1 称为时间戳 (200px)，将 div2 称为消息 (占用剩余空间)。

我尝试在第一个 div1 上使用翻译并移动，很快意识到 div2 不会自动调整大小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .chat-container {
            display: flex;
            height: 50vh;
            width: 50vw;
            background-color: #f0f0f0;
        }
        #div1 {
            background-color: #0004ff;
            height: 100%;
            width: 200px;
            text-align: center;
            
            position: relative;
            left:-200px;
            transition: left 1s;
        }
        #div2 {
            background-color: #ff0000;
            height: 100%;
            text-align: center;
            width: calc(100% - 200px); /* 100% - 200px or auto would work*/
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div id="div1">
            <p>div1</p>
        </div>
        <div id="div2">
            <p>div2</p>
        </div>
    </div>
    <button id="button">animation</button>
    <script>
        let actived = false;
        document.getElementById("button").addEventListener("click", function() {
            const div1 = document.getElementById("div1");
            const div2 = document.getElementById("div2");
            div1.style.left = actived ? "-200px" : "0px";
            actived = !actived;
        });
    </script>
</body>
</html>

因此我尝试调整 div2 的大小，但这样做之后calc(100% - 200px)大小却不一样了！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .chat-container {
            display: flex;
            height: 50vh;
            width: 50vw;
            background-color: #f0f0f0;
            overflow: hidden;
        }
        #div1 {
            background-color: #0004ff;
            height: 100%;
            width: 200px;
            text-align: center;
            
            position: relative;
            left:-200px;
            transition: left 1s;
        }
        #div2 {
            background-color: #ff0000;
            height: 100%;
            text-align: center;
            width: calc(100% - 200px); /* 100% - 200px or auto would work*/

            position: relative;
            transition: width 1s;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div id="div1">
            <p>div1</p>
        </div>
        <div id="div2">
            <p>div2</p>
        </div>
    </div>
    <button id="button">animation</button>
    <script>
        let actived = false;
        document.getElementById("button").addEventListener("click", function() {
            const div1 = document.getElementById("div1");
            const div2 = document.getElementById("div2");
            div1.style.left = actived ? "-200px" : "0px";
            div2.style.width = actived ? "100%" : "calc(100% - 200px)";
            actived = !actived;
        });
    </script>
</body>
</html>

100%父元素减去 div1 的大小怎么会不是剩余的大小呢？我好困惑啊。

请告诉我应该使用什么方法以及为什么100% - 200px不对齐。

javascript
Martin Hope
Manny
Asked: 2025-02-13 22:15:01 +0800 CST
  • 5

我有三个文件：

App.svelte：

<script>
    import Component from "./Component.svelte"
    import { items } from "./store.js"
    
    $items.set("a", { name: "John", index: "a" })
    $items.set("b", { name: "Jack", index: "b" })
</script>

<h1>DIV each:</h1>
{#if $items && $items.size > 0}
    {#each $items.values() as item}
        <div>Name: {item.name}</div>
    {/each}
{/if}

<h1>Component each:</h1>
{#if $items && $items.size > 0}
    {#each $items.values() as item}
        <div><Component index={item.index} /></div>
    {/each}
{/if}

Component.svelte：

<script>
    import { items } from "./store.js"
    let { index = null } = $props()
    
    let data = $state($items.get(index))
</script>

<div><input bind:value={data.name} /></div>

store.js：

import { writable } from "svelte/store";
import { SvelteMap } from "svelte/reactivity";

export let items = writable(new SvelteMap([]))

我想知道如何在 SvelteMap 中保持反应性items。当输入值发生变化时，它应该在 SvelteMap 中更新（因为它已绑定）。我不知道如何处理这种反应性。

这里有游乐场。

javascript
Martin Hope
John Sall
Asked: 2025-02-13 22:07:06 +0800 CST
  • 5

这是AppContext.jsx文件内容：

import { createContext } from "react";

export const AppContext = createContext()

export const AppContextProvider = (props) => {

    const value = {

    }
    
    return (
        <AppContext.Provider value={value}>
            {props.childern}
        </AppContext.Provider>
    )
}

这是app.jsx文件内容：

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Home from './pages/student/Home'
import CoursesList from './pages/student/CoursesList'

function App() {

  return (
    <>
      <div>
      <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
    <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/course-list' element={<CoursesList />} />
      </Routes>
    
      </div>
      
    
    </>
  )
}

export default App

这是main.jsx文件：

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { AppContextProvider } from './context/AppContext.jsx'
import { BrowserRouter } from 'react-router-dom'

createRoot(document.getElementById('root')).render(

 <BrowserRouter>
    <AppContextProvider>
      <App />
    </AppContextProvider>
  </BrowserRouter>,
  
)

当我删除<AppContextProvider>组件时，网页内容再次显示。发生了什么？我的控制台中没有错误

javascript
Martin Hope
Lucas
Asked: 2025-02-13 17:58:35 +0800 CST
  • 5

我有一个创建数据透视表的脚本，但我不想显示小计，只显示最终总计。

function main(workbook: ExcelScript.Workbook) {
    let sheet = workbook.getActiveWorksheet(); // Downloading the active sheet

    // Finding the range with the data (I assume it starts with A1)
    let dataRange = sheet.getRange("A1").getSurroundingRegion();

    // Checking that the scope is correct
    if (!dataRange) {
        console.log("No data found.");
        return;
    }

    // Creating a pivot table on the same sheet
    let pivotTable = sheet.addPivotTable("February", dataRange, sheet.getRange("H1"));
    
    let rowHierarchy = pivotTable.addRowHierarchy(pivotTable.getHierarchy("Posting date"));

    // Pivot table configuration
    pivotTable.addColumnHierarchy(pivotTable.getHierarchy("Project no."));
    pivotTable.addColumnHierarchy(pivotTable.getHierarchy("Name"));
    pivotTable.addColumnHierarchy(pivotTable.getHierarchy("Task No."));


    // Dodanie wartości (Ilość)
    let qtyHierarchy = pivotTable.getHierarchy("Time");
    let dataField = pivotTable.addDataHierarchy(qtyHierarchy);
    dataField.setSummarizeBy(ExcelScript.AggregationFunction.sum);
    // Hiding subtotals for "Project No." and "Name"

    // Alternate formatting (lines)
    let pivotRange = pivotTable.getLayout().getRange();
    let rowCount = pivotRange.getRowCount();

    for (let i = 1; i < rowCount; i += 2) { // Every second line
        let row = pivotRange.getCell(i, 0).getEntireRow();
        row.getFormat().getFill(); 
    }

    console.log("The pivot table has been created.");
}

我希望不显示总计，但希望显示列线和行线。

javascript