javascript 相关问题

Alpine JS 在远离元素时关闭下拉菜单

我正在使用 Alpine JS 作为 TALL 项目的一部分。我这里有一个导航菜单，出于本 Stackoverflow 的目的，我已将其精简为准系统。只能打开一个下拉列表：...

语法错误：请求的模块“./src/app.js”不提供名为“default”的导出

我正在开发一个带有节点后端的全栈项目。我是后端的初学者。 我在代码中遇到错误，无法找到解决方案。在此请求开发人员帮助我解决...

asp.net 文本框客户端在列表视图控件中失去焦点事件

我在asp:list视图控件中有以下代码行，如果用户在第二个文本框中输入任何值，在客户端失去焦点事件我需要计算txtTokensReq * txtQty并显示在lblTotalTokens中...

我不明白为什么我的模态不渲染子组件

这是我的模态结构 这是我的模态结构 <Dialog.Root open={isOpen} defaultOpen={isOpen} onOpenChange={onChange}> <Dialog.Portal> <Dialog.Overlay className="fixed inset-0 bg-neutral-900/90 backdrop-blur-sm" /> <Dialog.Content className="fixed drop-shadow-md border border-neutral-700 top-[50%] left-[50%] max-h-full h-full md:h-auto md:max-h-[85vh] w-full md:w-[90vw] md:max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-md bg-neutral-800 p-[25px] focus:outline-none" > <Dialog.Close asChild> <div className=" text-neutral-400 hover:text-white absolute top-[10px] right-[10px] inline-flex h-[25px] appearance-none items-center justify-center rounded-full focus:outline-none"> <IoMdClose /> </div> </Dialog.Close> <Dialog.Title className="text-white text-2xl font-poppins font-bold text-center"> {title} </Dialog.Title> <Dialog.Description className="text-gray-400 text-lg font-poppins font-semibold mt-2 text-center"> {description} </Dialog.Description> <div > {children} </div> </Dialog.Content> </Dialog.Portal> </Dialog.Root> 这是我的上传模式，我尝试加载我的孩子 <Modal isOpen={true} onChange={() => {}} title="Upload Track" description="Upload a new track to the database." > <div> <input type="file" name="file" id="file" className="hidden" accept=".mp3" /> <label htmlFor="file" className="bg-green-500 text-white font-bold py-2 px-4 rounded-full" > Choose File </label> </div> </Modal> 我不明白为什么模态不加载我的孩子，试图设置一个条件来查看我的孩子是否正在加载，它给了我一个未定义的对象 我测试了你的代码并为我工作，但就你而言，我不知道你如何在模态组件内接收和声明你的道具。所以我将展示我的代码： // Modal import * as Dialog from '@radix-ui/react-dialog'; const Modal = (props) => { return ( <Dialog.Root open={props.isOpen} defaultOpen={props.isOpen} onOpenChange={props.onChange}> <Dialog.Portal> <Dialog.Overlay className="fixed inset-0 bg-neutral-900/90 backdrop-blur-sm" /> <Dialog.Content className="fixed drop-shadow-md border border-neutral-700 top-[50%] left-[50%] max-h-full h-full md:h-auto md:max-h-[85vh] w-full md:w-[90vw] md:max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-md bg-neutral-800 p-[25px] focus:outline-none" > <Dialog.Close asChild> <div className=" text-neutral-400 hover:text-white absolute top-[10px] right-[10px] inline-flex h-[25px] appearance-none items-center justify-center rounded-full focus:outline-none"> </div> </Dialog.Close> <Dialog.Title className="text-white text-2xl font-poppins font-bold text-center"> {props.title} </Dialog.Title> <Dialog.Description className="text-gray-400 text-lg font-poppins font-semibold mt-2 text-center"> {props.description} </Dialog.Description> <div > {props.children} </div> </Dialog.Content> </Dialog.Portal> </Dialog.Root> ) } export default Modal; //App import Modal from "./components/Modal"; function App() { return ( <Modal isOpen={true} onChange={() => {}} title="Upload Track" description="Upload a new track to the database." > <div>CHILDREN</div> <div> <input type="file" name="file" id="file" className="hidden" accept=".mp3" /> <label htmlFor="file" className="bg-green-500 text-white font-bold py-2 px-4 rounded-full" > Choose File </label> </div> </Modal> ); } export default App; 希望这对您有帮助！

客户端不支持 MariaDB-React ts 中服务器请求的身份验证协议“auth_gssapi_client”

当我想启动 Express 服务器时遇到问题，出现以下错误 无法连接到数据库：ConnectionError [SequelizeConnectionError]：（conn：3，no：45025，SQLState：08004）客户端...

Webpack 是否默认删除 Angular 应用程序中的 consol.log() 还是必须使用正确的配置或插件进行设置？

这是我的第一篇文章，希望我能清楚地回答这个问题以及导致我提出这个问题的背景。我是一名新手“网络程序员”（仅“工作”一年半

如何在页面加载期间检测浏览器中加载的文件并执行某些操作

如何等待文件（例如“sunny.png”）并在使用 JavaScript 加载文件时发送警报。 网络选项卡示例 我的初衷是等待整个页面加载，但是

具有相同列跨度的两个不同表

我正在尝试对齐两个不同表的列，这些表包含相同的信息模型，但不是相同的项目。 这导致两个表的列大小不同，这使得

导入 HeadlessUI 的组件在构建然后在另一个项目中使用时会抛出错误

我目前正在使用 React、Tailwind、HeadlessUI 和 Storybook 开发 UI 库。 一旦我完成了组件，并确保它们可以在 Storybook 和 React 开发服务器上工作，我就构建了......

如何使用for循环通过数据参数化Playwright测试？

我希望提高我与 Playwright 的技能，我正在创建此代码来制作“1way-3ways-final way”。 错误： page.goto: net::ERR_ABORTED 位于 https://computer-database.gadling.io/

循环错误【没有可能的多个URL？不用等吗？错误是什么？]

我希望提高我与 Playwright 的技能，我正在创建此代码来制作“1way-3ways-final way”。 错误： page.goto: net::ERR_ABORTED 位于 https://computer-database.gadling.io/

使用JS库将Json数据转换为二维码时出错

我正在尝试将JSON数据转换为二维码，因此当用户扫描它时，应该显示JSON数据。我一直在为此使用 jquery.qrcode.min.js 库。这是 JSON 的示例...

Reactjs，生成pdf文件，设置文件名

是否可以在“@react-pdf/renderer”中设置生成pdf文件的名称：“^2.3.0”？ 当我在工具栏中单击下载时，它可能会使用 uid 名称保存： 现在设置为

SVGGeometryElement.isPointInFill() 不适用于 Chromium，但适用于 Firefox

我正在尝试寻找一种方法来检测画布内的 svg 文件的路径是否被单击。我的代码可以在 Firefox 中运行，但不能在 Chromium 浏览器中运行。我已经包围了c...

如何从在线 URL 检索图像并将其转换为 Node.js 中的 Base64 字符串，而不会遇到 CORS 错误

我要将在线图像作为base64保存到本地存储。 所以我参考了下面的代码。 函数 getBase64Image() { var img = 新图像(); </desc> <question vote="0"> <p>我要将在线图像作为base64保存到本地存储。</p> <p>所以我引用了以下代码。</p> <pre><code> &lt;script&gt; function getBase64Image() { var img = new Image(); img.crossOrigin = &#34;anonymous&#34;; // Set the CORS attribute // Use a CORS proxy to fetch the image var imageUrl = &#34;https://example.com/path/to/your/image.jpg&#34;; var proxyUrl = &#34;https://cors-anywhere.herokuapp.com/&#34;; img.src = proxyUrl + imageUrl; // Ensure the image is fully loaded img.onload = function() { var canvas = document.createElement(&#39;canvas&#39;); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext(&#39;2d&#39;); ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL(&#39;image/jpeg&#39;); // You can also use &#39;image/png&#39; var base64String = dataURL.replace(/^data:image\/(png|jpeg);base64,/, &#39;&#39;); localstorage.setItem(&#34;data&#34;, base64String); }; // Handle the image loading error img.onerror = function() { console.error(&#39;Image failed to load. Please check the URL and CORS policy.&#39;); }; } &lt;/script&gt; </code></pre> <p>但是遇到了CORS错误。</p> <p>图片来源为线上URL，不支持CORS。</p> <p>如何解决此问题并使用 Javascript 或 Node JS 从在线图像中获取 Base64 字符串</p> </question> <answer tick="false" vote="0"> <p>如果在客户端处理图像仍然存在问题，请考虑在服务器端处理图像。这样，您就可以完全绕过 CORS 问题。这是使用 Node.js 和 Express 的基本示例：</p> <pre><code>app.get(&#39;/fetch-image&#39;, async (req, res) =&gt; { const imageUrl = &#39;https://example.com/path/to/your/image.jpg&#39;; try { const response = await axios.get(imageUrl, { responseType: &#39;arraybuffer&#39; }); const base64Image = Buffer.from(response.data, &#39;binary&#39;).toString(&#39;base64&#39;); res.send(base64Image); } catch (error) { res.status(500).send(&#39;Failed to fetch image&#39;); } }); </code></pre> </answer> </body></html>

isPointInFIll 不起作用

我正在尝试以编程方式创建一个像这样的 svg 节点 const 解析器 = new DOMParser() const doc = parser.parseFromString(mySvgAsString, 'image/svg+xml') 常量 svg = doc.children[0] 一切都...

Angular Custom Order Pipe 正确排序数组

我有一个自定义管道，它通过数字类型的 prop 对对象数组进行排序。 使用管道的模板 按管道订购 我有一个自定义管道，它通过数字类型的 prop 对对象数组进行排序。 使用管道的模板 <div *ngFor="let product of products | orderBy:'price'"> 按管道订购 export class OrderByPipe implements PipeTransform { transform(array: any[], field: string): any[] { array.sort((a: any, b: any) => { if (a[field] < b[field]) { return -1; } else if (a[field] > b[field]) { return 1; } else { return 0; } }); return array; } } 管道似乎适用于较小的数组，并且当我使用 forEach 循环遍历每个项目时。但是，当我最后控制台数组并将其返回到模板中时，数组仍然是无序的。 我不完全确定可能导致此问题的原因，谢谢。 也许你根本不需要管道，而需要在组件中提供服务 originalProducts; orderedProducts; ngOnInit() { this.getProducts(); } getProducts() { this.productsService.getProducts() .subscribe((data) => { this.originalProducts = data; this.sortBy('price'); }); } sortBy(field: string) { this.originalProducts.sort((a: any, b: any) => { if (a[field] < b[field]) { return -1; } else if (a[field] > b[field]) { return 1; } else { return 0; } }); this.orderedProducts = this.originalProducts; } 在您的模板中 <div *ngFor="let product of orderedProducts"> 如果您的列表太长，请使用分页。 如果仍有问题，请使用 lodash。 数组的内容是什么？ 如果它们是对象（这似乎很可能），那么您将需要实现一个比较器 - 一个可以比较这些对象的两个实例的函数。 小于 (<) and greater-than (>) 运算符可能不会执行您期望或想要的操作。

如何从 javascript 模块导入 svg 代码？

我正在尝试在 Vanilla ES6 / ES7 中导入 svg 以与 mo.js 一起使用，如本示例 https://mojs.github.io/tutorials/shape-swirl/#custom-shapes 所示。 我尝试将代码放入 javascript modu 中...

将 XYZ 转换为 sRGB

我正在尝试从 CIE XYZ 转换为 sRGB 色彩空间，作为 CIELAB 和 sRGB 色彩空间之间的中介。我正在使用 http://www.brucelindbloom.com/ 和 https://en.wikiped 中的表格...

jQuery 方法来检测一个 div 中加载的所有图像

我在一个 div 中有多个图像，我只想在加载该 div 中的所有图像时才采取一些操作，这听起来很简单，但我无法找到任何简洁的解决方案来执行此操作。 我在一个 div 中有多个图像，并且仅当加载此 div 中的所有图像时才采取一些操作，这听起来很简单，但我无法找到任何简洁的解决方案来执行此操作。 <div class="imgs"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> </div> 我找到了要求jQuery在执行某些操作之前等待所有图像加载的官方方法，建议使用$(window).on("load", function(){})，但我有多个div并且我想采取行动，只要每个div中的所有图像加载时，而不是加载 DOM 中的所有图像时。 我还找到了一些 JavaScript 方法来做到这一点，例如 jQuery 或 Javascript 检查图像是否已加载 和 如何让 Javascript 在继续之前等待所有图像加载？，对于这样一个看似简单的任务来说，这是相当复杂的。 为此目的使用一个简单的计数器怎么样？ jQuery(document).ready(function($) { const imgs = $('.imgs .img'); let loadCounter = 0; imgs.on('load', function() { loadCounter += 1; if (loadCounter === imgs.length) { console.log('every img loaded'); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <div class="imgs"> <img class="img" src="https://picsum.photos/id/237/200/300" /> <img class="img" src="https://picsum.photos/id/238/200/300" /> <img class="img" src="https://picsum.photos/id/239/200/300" /> </div>