javascript 相关问题

是否可以绕过浏览器/选项卡关闭时弹出的浏览器自定义对话框？

我是新来反应的，我试图在选项卡/窗口关闭事件上触发我自己的自定义对话框组件。 我到处检查过，发现 beforeunload 的用法正是实现这一目标所需要的......

良好的实践获取数据nextjs（客户端或服务器）

首先我想说的是，尽管我拥有多年的 React 和 AWS 经验，但我对使用 Next.js 还比较陌生。 我们决定对我们的应用程序进行彻底重构

setTimeout 的匿名回调函数存储在哪里？

我有一个简单的程序，如下所示： console.log("程序开始执行！"); 设置超时（（）=> { console.log("我一秒钟后就跑了！"); }, 1000); 控制台...

从值下方的索引添加 JavaScript 数组中的对象中的数字并返回值

从匹配条件的某个索引返回数组总和的最佳方法是什么。 例如，我想从索引 1 中查找值小于或等于 4 的每个数组的总和； ...

Datatables jQuery 事件在第二页上工作，而不是在其余页面上工作

我制作了以下 jQuery 事件，当您在第二页上分页时，该事件实际上起作用。 但是，它不会在第三页和其余页面上触发，没有 console.log 错误。 问题很明显...

SVG 渐变与 D3

我正在尝试实现以下 svg 渐变 我能达到的最接近的是 如果有人可以提供帮助，我将非常感激 <p>我正在尝试实现以下 svg 渐变</p> <p><a href="https://i.sstatic.net/ysi4dE0w.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQveXNpNGRFMHcucG5n" alt="objective gradient"/></a></p> <p>我能达到的最接近的是</p> <p><a href="https://i.sstatic.net/nluV7LPN.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvbmx1VjdMUE4ucG5n" alt="enter image description here"/></a></p> <p>如果有人能帮忙，我将非常感激</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.4/d3.min.js&#34;&gt;&lt;/script&gt; &lt;!DOCTYPE html&gt; &lt;html lang=&#34;en&#34;&gt; &lt;head&gt; &lt;meta charset=&#34;UTF-8&#34;&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;&gt; &lt;title&gt;Speed Arc&lt;/title&gt; &lt;script src=&#34;https://d3js.org/d3.v7.min.js&#34;&gt;&lt;/script&gt; &lt;style&gt; html, body { height: 100%; margin: 0; display: flex; justify-content: center; align-items: center; } #speed-arc { display: flex; justify-content: center; align-items: center; } .background { fill: lightgray; } .path { fill: url(#arcBackground); } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;speed-arc&#34;&gt;&lt;/div&gt; &lt;script&gt; // Set the dimensions and margins of the graph var width = 500, height = 500, margin = 0; // The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin. var radius = Math.min(width, height) / 2 - margin; // Append the svg object to the div called &#39;speed-arc&#39; var svg = d3.select(&#34;#speed-arc&#34;) .append(&#34;svg&#34;) .attr(&#34;width&#34;, width) .attr(&#34;height&#34;, height) .append(&#34;g&#34;) .attr(&#34;transform&#34;, &#34;translate(&#34; + width / 2 + &#34;,&#34; + height / 2 + &#34;)&#34;); // Create background arc var backgroundArc = d3.arc() .innerRadius(160) .outerRadius(170) .startAngle(-0.75 * Math.PI) .endAngle(0.75 * Math.PI); // Create foreground arc var arc = d3.arc() .innerRadius(160) .outerRadius(170) .cornerRadius(5) .startAngle(-0.75 * Math.PI); // Append background arc svg.append(&#34;path&#34;) .attr(&#34;class&#34;, &#34;background&#34;) .attr(&#34;d&#34;, backgroundArc); // Append foreground arc var path = svg.append(&#34;path&#34;) .datum({ endAngle: -0.75 * Math.PI }) .attr(&#34;class&#34;, &#34;path&#34;) .attr(&#34;d&#34;, arc) .attr(&#34;fill&#34;, &#34;url(#arcBackground)&#34;); // Create the gradient for the arc var gradient = svg.append(&#34;defs&#34;) .append(&#34;linearGradient&#34;) .attr(&#34;id&#34;, &#34;arcBackground&#34;) .attr(&#34;x1&#34;, &#34;0%&#34;) .attr(&#34;x2&#34;, &#34;100%&#34;) .attr(&#34;y1&#34;, &#34;0%&#34;) .attr(&#34;y2&#34;, &#34;0%&#34;); gradient.append(&#34;stop&#34;) .attr(&#34;offset&#34;, &#34;0%&#34;) .attr(&#34;stop-color&#34;, &#34;#F95247&#34;); // Red gradient.append(&#34;stop&#34;) .attr(&#34;offset&#34;, &#34;20%&#34;) .attr(&#34;stop-color&#34;, &#34;#FD7A4F&#34;); // Orange-red gradient.append(&#34;stop&#34;) .attr(&#34;offset&#34;, &#34;50%&#34;) .attr(&#34;stop-color&#34;, &#34;#F8E23D&#34;); // Yellow gradient.append(&#34;stop&#34;) .attr(&#34;offset&#34;, &#34;75%&#34;) .attr(&#34;stop-color&#34;, &#34;#B6E359&#34;); // Light green gradient.append(&#34;stop&#34;) .attr(&#34;offset&#34;, &#34;100%&#34;) .attr(&#34;stop-color&#34;, &#34;#15DA88&#34;); // Green // Create the arc scale var arcScale = d3.scalePow() .exponent(0.3) .domain([0, 15]) .range([-0.75 * Math.PI, 0.75 * Math.PI]) .clamp(true); // Function to update the arc function updateArc(speed) { var arcTween = function(transition, speed) { transition.attrTween(&#34;d&#34;, function(d) { var interpolate = d3.interpolate(d.endAngle, arcScale(speed)); return function(t) { d.endAngle = interpolate(t); return arc(d); }; }); }; path.transition() .duration(750) .call(arcTween, speed); } // Example usage: update the arc with a speed value updateArc(15); // You can call updateArc function with different values to animate the arc &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <p></p> </question> <answer tick="false" vote="0"> <p>SVG 中没有<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient" rel="nofollow noreferrer">圆锥梯度</a>，因此您需要从更多的<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient" rel="nofollow noreferrer">线性梯度</a>构建梯度。在这里，我使用 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray" rel="nofollow noreferrer">Stroke-dasharray</a> 创建四个不同的圆形切片，每个切片都有自己的渐变。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>img, svg { border: thin solid black; }</code></pre> <pre><code>&lt;img width=&#34;300&#34; src=&#34;https://i.sstatic.net/ysi4dE0w.png&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;300&#34; viewBox=&#34;0 0 100 63&#34;&gt; &lt;defs&gt; &lt;linearGradient id=&#34;lg1&#34; x1=&#34;0&#34; y1=&#34;1&#34; x1=&#34;1&#34; y1=&#34;0&#34;&gt; &lt;stop offset=&#34;35%&#34; stop-color=&#34;#FD7A4F&#34; /&gt;&lt;!--Orange-red--&gt; &lt;stop offset=&#34;65%&#34; stop-color=&#34;#F95247&#34; /&gt;&lt;!--red--&gt; &lt;/linearGradient&gt; &lt;linearGradient id=&#34;lg2&#34; x1=&#34;0&#34; y1=&#34;1&#34; x1=&#34;1&#34; y1=&#34;0&#34;&gt; &lt;stop offset=&#34;35%&#34; stop-color=&#34;#F8E23D&#34; /&gt;&lt;!--Yellow--&gt; &lt;stop offset=&#34;65%&#34; stop-color=&#34;#FD7A4F&#34; /&gt;&lt;!--Orange-red--&gt; &lt;/linearGradient&gt; &lt;linearGradient id=&#34;lg3&#34; x1=&#34;0&#34; y1=&#34;1&#34; x1=&#34;1&#34; y1=&#34;0&#34;&gt; &lt;stop offset=&#34;35%&#34; stop-color=&#34;#B6E359&#34; /&gt;&lt;!--Light green--&gt; &lt;stop offset=&#34;65%&#34; stop-color=&#34;#F8E23D&#34; /&gt;&lt;!--Yellow--&gt; &lt;/linearGradient&gt; &lt;linearGradient id=&#34;lg4&#34; x1=&#34;0&#34; y1=&#34;1&#34; x1=&#34;1&#34; y1=&#34;0&#34;&gt; &lt;stop offset=&#34;35%&#34; stop-color=&#34;#15DA88&#34; /&gt;&lt;!--Green--&gt; &lt;stop offset=&#34;65%&#34; stop-color=&#34;#B6E359&#34; /&gt;&lt;!--Light green--&gt; &lt;/linearGradient&gt; &lt;/defs&gt; &lt;g transform=&#34;translate(50 35)&#34; stroke-width=&#34;5&#34; fill=&#34;none&#34; stroke-linecap=&#34;round&#34;&gt; &lt;circle transform=&#34;rotate(135)&#34; stroke=&#34;url(#lg1)&#34; r=&#34;29.5&#34; pathLength=&#34;360&#34; stroke-dasharray=&#34;60 360&#34; stroke-dashoffset=&#34;-15&#34; /&gt; &lt;circle transform=&#34;rotate(195)&#34; stroke=&#34;url(#lg2)&#34; r=&#34;29.5&#34; pathLength=&#34;360&#34; stroke-dasharray=&#34;60 360&#34; stroke-dashoffset=&#34;-15&#34; /&gt; &lt;circle transform=&#34;rotate(255)&#34; stroke=&#34;url(#lg3)&#34; r=&#34;29.5&#34; pathLength=&#34;360&#34; stroke-dasharray=&#34;60 360&#34; stroke-dashoffset=&#34;-15&#34; /&gt; &lt;circle transform=&#34;rotate(315)&#34; stroke=&#34;url(#lg4)&#34; r=&#34;29.5&#34; pathLength=&#34;360&#34; stroke-dasharray=&#34;60 360&#34; stroke-dashoffset=&#34;-15&#34; /&gt; &lt;/g&gt; &lt;/svg&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

lint-stage 无法看到文件

我的项目结构如下： 项目 - .哈士奇 - 源代码 - 全部文件 - 包.json 这是我从 package.json 中进行的 lint-staged 操作 "lint-staged": "^12.1.7", 。 。 。 &q...

禁用 Typescript 文件中的突出显示？

当我单击 className 值时，它会突出显示 Vs Code 中的整个文本。我尝试禁用 VS Code 中的所有突出显示设置，但找不到任何解决方案。我想禁用 typecr 中的突出显示...

使用剪辑路径为透明div添加边框

让我们考虑以下几点： .六角形{ 位置：绝对； 宽度：200px； 高度：200px； 背景颜色：rgba(32,78,64,0.25); z 索引：...

如何在QML中创建延迟函数？

我想在javascript中创建一个延迟函数，它需要一个延迟时间量的参数，这样我就可以使用它在我的QML中的JavaScript行之间引入延迟

如何使用PKG创建可执行文件（由于Node 20而出错）

我正在尝试将这个简单的代码转换为可执行文件，我没有创建任何 .json 文件，只是创建 .js 文件。 这是我第一次使用 .JS，每次运行 pkg script.js 都会返回错误...

JSON.stringify() 在值上带单引号，在键上不带引号

在 Javascript 中：打印 json 对象 var myObject = 新对象; myObject.type = "菲亚特"; myObject.model = "500"; myObject.color = "白色"; 以下格式 { 类型：'菲亚特',

图片无法加载

我正在开发一个项目，用户上传他们的图像（路径保存在MySQL中），图像本身保存在名为uploads的目录中。我的 HTML CSS 和 JavaScript 文件存储在 /va...

当父级中单击按钮时如何将数据从子级传递到父级

我是角度新手。我有一个大表格。我想让它模块化。这就是为什么我创建了多个较小的子组件以及我在主父组件中使用的所有组件选择器。我...

Flex - 项目应仅占用与文本一样多的空间

我有一个弹性容器和 2 件物品。浅蓝色物品有多个跨度。我想要实现的是使浅蓝色项目的最大宽度与文本跨度一样大。弹性项目应该...

在Firefox中拖动到窗口外时如何检测dragleave事件

当拖动到窗口之外时，Firefox 无法正确触发 Dragleave 事件： https://bugzilla.mozilla.org/show_bug.cgi?id=665704 https://bugzilla.mozilla.org/show_bug.cgi?id=656164 ...

如果开始时间在 22:00 至 24:00 之间，则以月份模式显示 2 天的完整日历 4.0 事件

在全日历4.0中，一个事件的时间为： “start”：“2020-JULY-09 23:40”，在月份模式下占用 2 个单元格 july-08 和 July-9th，如附图所示，在日模式下也是

引导表从ajax jquery click更新mysql数据库

我从这个示例 https://codepen.io/fjfalah/pen/WEppVa 在 bootstrap 中创建了一个表，以显示来自 mysql 数据库的我的表。至于从数据库读取数据没有问题，我...

Firebase 实时数据库在 Axios GET 请求后返回未定义

我正在尝试从 firebase 实时数据库接收我的不和谐机器人的数据。我正在使用 firebase REST API 和 axios 包来满足我的请求。 请求返回 200，没问题，但是...

为什么我可以在线看到我的discord js bot但无法使用它

我对 javascript 很陌生，我尝试实现一个不和谐的机器人。我只是按照教程从网站“discordjs.guide”创建一个机器人，但我的机器人没有响应。 我不