javascript 相关问题

Expo-AV 陆续播放音频

我正在使用Expo-AV，我正在尝试找到一种简单的方法来依次播放3个音频文件。 我在网上找不到任何东西，有人有Expo-AV的经验吗？ 非常感谢。

为什么 Response 对象不自动包含 Content-Length？

当给定 Blob 时，响应对象将自动在标头中包含 Content-Type。为什么它不自动包含内容长度？

event.preventDefault 无法阻止 chatgpt.com 提示框中的剪贴板粘贴

我正在使用以下代码来阻止粘贴到某些网页 document.addEventListener('粘贴', (事件) => { event.preventDefault(); }); 除了http中的提示框之外，它在大多数情况下都有效...

在添加跨度后如何在可编辑的内容中设置插入符位置；并将插入符号移动到跨度的末尾？

我有一个用于聊天应用程序的内容编辑器。当我标记用户时，我找到当前的 caretPosition 并向该位置添加一个范围，如下所示； 我有一个用于聊天应用程序的内容编辑器。当我标记用户时，我找到当前的 caretPosition 并向该位置添加一个跨度，如下所示； <span class=\"highlight\" contenteditable=\"false\">${userName}</span> 但是，当我用这个跨度替换标签时，我失去了可编辑内容的焦点，并且插入符号位置也丢失了。我尝试过查看这些答案， 答案1 答案2 但是在这两种情况下焦点都会丢失，如果我在 setCursorPosition 函数之前设置 el.focus() ，插入符号只会转到可编辑内容的开头。我的代码； getCaretPositionInnerHTML() { var target = document.createTextNode("\u0001"); document.getSelection().getRangeAt(0).insertNode(target); var position = this.contenteditable.nativeElement.innerHTML.indexOf("\u0001"); target.parentNode.removeChild(target); return position; } saveMention(event, user): void { //lose focus after this event.stopPropagation(); let tempString = this.contenteditable.nativeElement.innerHTML; let index = this.getCaretPositionInnerHTML(); let replacement = this.getSpanFromUserFn(user);// returns the span in question let currentWordLength = this.getCurrentWord(tempString, index);// replace the current word with my span let newString = tempString.substring(0, index - currentWordLength.length) + replacement + tempString.substring(index + 1); this.contenteditable.nativeElement.innerHTML = newString; } ngOnChanges(changes: SimpleChanges) { if (this.caretPosition) { console.log(changes); this.selection.removeAllRanges(); let range = this.setCursorPosition(this.element.nativeElement, document.createRange(), { pos: this.caretPosition, done: false}); this.element.nativeElement.focus(); range.collapse(true); this.sel.addRange(range); } //find the child node and relative position and set it on range setCursorPosition(parent, range, stat) { if (stat.done) return range; if (parent.childNodes.length == 0) { if (parent.textContent.length >= stat.pos) { range.setStart(parent, stat.pos); stat.done = true; } else { stat.pos = stat.pos - parent.textContent.length; } } else { for (var i = 0; i < parent.childNodes.length && !stat.done; i++) { this.currentNode = parent.childNodes[i]; this.setCursorPosition(this.currentNode, range, stat); } } return range; } 我碰巧遇到了一个用例，这就是我最终的结果： let cursorPosition; const getCursorLocation = (ele) => { var target = document.createTextNode("\u0001"); document.getSelection().getRangeAt(0).insertNode(target); var position = ele.innerHTML.indexOf("\u0001"); target.parentNode.removeChild(target); cursorPosition = position; console.log('position', position); return position; }; //find the child node and relative position and set it on range const findingRange = (ind, nodes, position) => { if (nodes[ind].textContent.length >= position) { if (nodes[ind].childNodes.length > 0) { return findingRange(0, nodes[ind].childNodes, position); } const node = nodes[ind].nodeName === "#text" ? nodes[ind] : nodes[ind].firstChild; return { node, offset: position }; } return findingRange( ind + 1, nodes, position - nodes[ind].textContent.length ); }; const updateInput = (input) => { const userInputBox = document.getElementById("listening-input-change"); if (userInputBox) { const currentText = userInputBox.innerHTML; const position = cursorPosition; const newText = currentText.substring(0, position) + input + currentText.substring(position); userInputBox.innerHTML = newText; const range = document.createRange(); //Create a range const sel = window.getSelection(); //get the selection object const startingNode = findingRange( 0, userInputBox.childNodes, currentText.substring(0, position).replace(/<[^>]+>/g, "").length + input.length ); range.setStart(startingNode.node, startingNode.offset); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); userInputBox.focus(); } }; .listening-input-change { background: #fff; border: 1px solid #d4d6db; border-radius: 12px; color: #000; font-size: 14px; font-weight: 400; height: 100%; padding: 12px 12px 40px; } <div contentEditable="true" id='listening-input-change' class="listening-input-change"></div> <button onclick="updateInput('example text inserted')">set caret</button> <script> document.getElementById("listening-input-change").addEventListener("input", function () { const position = getCursorLocation(this); }); </script> let cursorPosition; const getCursorLocation = (ele) => { var target = document.createTextNode("\u0001"); document.getSelection().getRangeAt(0).insertNode(target); var position = ele.innerHTML.indexOf("\u0001"); target.parentNode.removeChild(target); cursorPosition = position; console.log('position', position); return position; }; //find the child node and relative position and set it on range const findingRange = (ind, nodes, position) => { if (nodes[ind].textContent.length >= position) { if (nodes[ind].childNodes.length > 0) { return findingRange(0, nodes[ind].childNodes, position); } const node = nodes[ind].nodeName === "#text" ? nodes[ind] : nodes[ind].firstChild; return { node, offset: position }; } return findingRange( ind + 1, nodes, position - nodes[ind].textContent.length ); }; const updateInput = (input) => { const userInputBox = document.getElementById("listening-input-change"); if (userInputBox) { const currentText = userInputBox.innerHTML; const position = cursorPosition; const newText = currentText.substring(0, position) + input + currentText.substring(position); userInputBox.innerHTML = newText; const range = document.createRange(); //Create a range const sel = window.getSelection(); //get the selection object const startingNode = findingRange( 0, userInputBox.childNodes, currentText.substring(0, position).replace(/<[^>]+>/g, "").length + input.length ); range.setStart(startingNode.node, startingNode.offset); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); userInputBox.focus(); } };函数递归地查找范围的起始节点和偏移量。 然后在更新插入所需的文本后在 updateInput 内调用它。 .listening-input-change { background: #fff; border: 1px solid #d4d6db; border-radius: 12px; color: #000; font-size: 14px; font-weight: 400; height: 100%; padding: 12px 12px 40px; }

将 React 中的轮播图像与外部组件对齐

我正在使用库react-multi-carousel，但是，我在对齐图像时遇到困难，因此第一张图像的左边框与外部的项目对齐，在本例中是 h2，...

如何在运行时读取并保存Vue.js中槽的内容？

我目前正在使用 Vue.js 开发一个项目，并且在使用插槽时遇到问题。 我有两个组件：PageView.vue 和 SlotComponentView.vue 在 SlotComponentView.vue 中，有一个名为 Con 的插槽...

for循环在javascript中生成时间列表

我想生成这个数据列表（00:00 ~ 24:00，每3分钟） [“00:00”、“00:03”、“00:06”、“00:09”、“00:12”、“00:15”、“00:18&qu...

UI 元素在条件渲染时抖动

我遇到的问题是按钮和链接在状态更改时抖动（单击“退出”按钮时）。我尝试了 v-if 和 v-show，但抖动仍然存在。 问题视频：https:...

React 调整大小事件侦听器未使用 useCallBack 更新状态

我不知道我是否错过了 useCallBack 的用途，或者我是否做错了什么。 我有一个钩子来确定我是在台式机、平板电脑还是移动设备上，它会监听

日历事件的可视化。以最大宽度布局事件的算法

我需要你的算法帮助（它将在客户端使用javascript开发，但这并不重要，我最感兴趣的是算法本身）布置日历事件，以便......

Next js 中响应为 401 时重定向到登录页面

我使用 next js 中间件，仅当 middleware.ts 中没有可用令牌时才将用户重定向到登录页面： 从“next/server”导入类型 { NextRequest, NextResponse }; 出口

高效可靠的方法将第二张图像的尺寸调整为与第一张图像相同

我在网页中显示了两个图像标签，它们的大小可能不同。由于图像是动态生成的，因此每次加载时两个图像的大小可能不同。我想调整...

如何绕过 FormSpree 重定向？

我在 Github Pages 服务上建立了我的网站。我正在尝试实施 FormSpree 免费联系表单，但在您提交表单后，它会将您重定向到另一个网站。我想要的东西...

未捕获（承诺中）DOMException：订阅失败 - 没有活动的 Service Worker

我正在尝试订阅用户，但这是我第一次遇到错误。 第二次，它可以工作，因为用户已经处于活动状态 这是我的代码： if（导航器中的“serviceWorker”）...

当 Javascript 中不存在 CONST 时如何声明它

简而言之，我有一个模块想在页面上多次重用。在这个模块中，我有一个事件名称的全局常量。问题出现在这个m的第二次使用的声明处...

完整日历中同一日期的多个活动问题

代码： $('#calendar').fullCalendar({ 事件：<?php echo $datas; ?>， 标题：{ left: '上一个，下一个今天', 中心：'标题'， ...</desc> <question vote="2"> <p>代码：</p> <pre><code>&lt;script&gt; $(&#39;#calendar&#39;).fullCalendar({ events: &lt;?php echo $datas; ?&gt;, header: { left: &#39;prev,next today&#39;, center: &#39;title&#39;, right: &#39;dayGridMonth,timeGridWeek,timeGridDay&#39; }, eventClick: function(event, jsEvent, view) { $(&#34;#edit_delete&#34;).html( &#39;&lt;a href=&#34;&lt;?php echo base_url(); ?&gt;timetable/edit_professor_classes/&#39;+event.id+&#39;&#34; style=&#34;margin-right: 5px;&#34;&gt;&lt;i class=&#34;fa fa-edit btn btn-success&#34;&gt;&lt;/i&gt;&lt;/a&gt;&#39;+&#39;&lt;a href=&#34;&lt;?php echo base_url(); ?&gt;timetable/delete_professor_classes/&#39;+event.id+&#39;&#34;&gt;&lt;i class=&#34;fa fa-trash btn btn-danger&#34;&gt;&lt;/i&gt;&lt;/a&gt;&#39; ), $(&#39;#modalTitle&#39;).html(event.title); $(&#39;#classes&#39;).html(event.classes); $(&#39;#semester&#39;).html(event.semester); $(&#39;#subject&#39;).html(event.subject); $(&#39;#startdate&#39;).html(event.dates); $(&#39;#timestart&#39;).html(event.times); $(&#39;#fullCalModal&#39;).modal(&#39;show&#39;); } }); &lt;/script&gt; </code></pre> <p><a href="https://i.sstatic.net/Anuat.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvQW51YXQucG5n" alt="enter image description here"/></a></p> <p>在这段代码中，我使用 fullcalendar js 创建了一个事件日历，该日历工作正常，但问题是如果我在同一日期添加多个事件，那么它会显示很长时间。我想显示最小值和一些石灰<pre><code>view more event</code></pre>显示我该怎么做？请帮助我。</p> <p>谢谢你</p> </question> <answer tick="true" vote="5"> <p>Fullcalendar.js 提供了限制显示事件数量的方法，使用以下方法来控制事件限制：</p> <pre><code>eventLimit: true, // allow &#34;more&#34; link when too many events eventLimitText: &#34;More&#34;, //sets the text for more events </code></pre> <p><strong>将代码更改为以下内容：</strong></p> <pre><code>&lt;script&gt; $(&#39;#calendar&#39;).fullCalendar({ events: &lt;?php echo $datas; ?&gt;, eventLimit: true, // allow &#34;more&#34; link when too many events eventLimitText: &#34;More&#34;, //sets the text for more events header: { left: &#39;prev,next today&#39;, center: &#39;title&#39;, right: &#39;dayGridMonth,timeGridWeek,timeGridDay&#39; }, eventClick: function(event, jsEvent, view) { $(&#34;#edit_delete&#34;).html( &#39;&lt;a href=&#34;&lt;?php echo base_url(); ?&gt;timetable/edit_professor_classes/&#39;+event.id+&#39;&#34; style=&#34;margin-right: 5px;&#34;&gt;&lt;i class=&#34;fa fa-edit btn btn-success&#34;&gt;&lt;/i&gt;&lt;/a&gt;&#39;+&#39;&lt;a href=&#34;&lt;?php echo base_url(); ?&gt;timetable/delete_professor_classes/&#39;+event.id+&#39;&#34;&gt;&lt;i class=&#34;fa fa-trash btn btn-danger&#34;&gt;&lt;/i&gt;&lt;/a&gt;&#39; ), $(&#39;#modalTitle&#39;).html(event.title); $(&#39;#classes&#39;).html(event.classes); $(&#39;#semester&#39;).html(event.semester); $(&#39;#subject&#39;).html(event.subject); $(&#39;#startdate&#39;).html(event.dates); $(&#39;#timestart&#39;).html(event.times); $(&#39;#fullCalModal&#39;).modal(&#39;show&#39;); } }); </code></pre> <p></p> <p><strong>查看实例</strong></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.addEventListener(&#39;DOMContentLoaded&#39;, function() { var calendarEl = document.getElementById(&#39;calendar&#39;); var calendar = new FullCalendar.Calendar(calendarEl, { plugins: [ &#39;dayGrid&#39; ], timeZone: &#39;UTC&#39;, eventLimit: true, // allow &#34;more&#34; link when too many events eventLimitText:&#34;More Events&#34;, events: &#39;https://fullcalendar.io/demo-events.json?overload-day&#39; }); calendar.render(); });</code></pre> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Example&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css&#34;&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css&#34;&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;calendar&#34;&gt;&lt;/div&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js&#34;&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>在 FullCalendar 的最新版本（v5 及更高版本）中，eventLimit 功能已替换为 dayMaxEvents 属性。</p> <pre><code>&lt;FullCalendar // ... other props ... eventMaxStack={4} dayMaxEvents={true} // Replace eventLimit with dayMaxEvents /&gt; </code></pre> </answer> </body></html>

Browsershot 未拍摄 Chartjs 的快照

我正在尝试截取chartjs库的屏幕截图，该库通过浏览器截图设置了间隔，并且不会执行javascript代码。这是我的代码。我得到的只是一张空白图像。 var canv...

如何使用 JavaScript 更改 R Shiny 中 DT 过滤滑块的值？

我想在JavaScript中修改DT生成的过滤滑块的值。我想更改这些值而不是在其他地方过滤数据，因为最终我想添加预设，以便您...

如果使用 IP 地址访问 Next.js 应用程序，则在当前上下文中无法使用 WebCrypto 的本机实现

如果我尝试从 127.0.0.1:8082 或 localhost:8082 访问我的 Next.js 应用程序，它会正常运行。问题是当我想使用我的机器的 IP 地址（例如 http://10.233.xx.xx:8082/）访问它时，它...

JavaScript 将对象参数传递给可重用函数

我有一个经常使用的函数来查找对象中的参数值... 让 paramDesc = objName.find((e) => e.param1.includes(searchVal)); 返回参数描述.param2; 我想...