按钮是图形用户界面中的简单元素，可以将鼠标点击或手指点击（在移动设备上）作为输入。
我需要制作一个程序，用 Windows 通知来提醒我，我发现这可以通过以下代码简单地完成。 我不在乎我使用什么库 从 win10toast 导入
我正在尝试做一个图像滑块，但我正在努力使用上一个按钮，除了上一个按钮之外的所有代码都工作得很好。请问你能帮帮我吗？ ... 我正在尝试做一个图像滑块，但我正在努力使用上一个按钮，除了上一个按钮之外的所有代码都工作得很好。你能帮我一下吗？ <body> <div> <img name="slide" width="80%" height="auto"> <button id="nextImg">next</button> <button id="prevImg">prev</button> </div> <script src="script.js"></script> </body> var i = 0; var image = []; var time = 1000; image[0] = 'image1.png' image[1] = 'image2.jpg' image[2] = 'image3.jpg' function changeImg() { document.slide.src = image[i]; if (i < image.length - 1) { i++; } else { i = 0; } setTimeout("changeImg()", time); } nextImg.onclick = function() { document.slide.src = image[i]; if (i < image.length - 1) { i++; } else { i = 0; } } prevImg.onclick = function() { document.slide.src = image[i]; if (i > image.length - 1) { i--; } else { i = 2; } } window.onload = changeImg; 我尝试了不同的方法，但结果总是相同的，或者它没有执行任何操作，或者只是转到下一张图像，而不是按预期转到上一张图像。 prevImg.onclick = 函数() { if (i > 0) i--; else i = 2; document.slide.src = image[i]; }
我是 Grails 框架的新手，所以请记住这一点。 我有一个按钮模板，我在不同的地方渲染。我想保留模板的所有功能和所有用途的文本...
我有一个问题，我将在下面发布图片以更好地理解： Button 2 将绘制单元格。但我希望 J4 中的单元格值是什么，它将是要绘制的单元格。在这种情况下...
我正在使用绑定表单供用户更新新客户或现有客户的信息。现在我在提交按钮上使用“添加新记录”宏（因为我不确定如何添加或保存新的
HeaderRight 按钮不可点击（React Native）
我在使用 React Native Navigation v5 headerRight Buttons 时遇到了一个奇怪的错误。我目前在反应本机导航屏幕中将 TouchableOpacity 设置为 headerRight 组件；然而...
我想制作继承背景颜色的虚线按钮。 这是我想要的（但我真的希望能够更改按钮颜色而不更改破折号背景。） 这是我的代码...
我正在NextJS14（React）中建立一个设计系统。我们使用 CSS 模块并将所有颜色存储在 CSS 变量（自定义属性）中。 我们的 Figma 设计中有这些漂亮的按钮。我
我有这个代码， &... 我有这个代码， <div class="EMP-Buton-Cere-Oferta-PF"> <a href="<?php echo esc_url($header_button_url); ?>" class="header-btn sr-btn sr-lg-btn"><?php echo esc_html($getfree_quote_button); ?></a> </div> 我希望在单击时可以出现一个小弹出窗口，并让用户在两个页面之间进行选择。 有人知道我该怎么做吗？ 谢谢！ 为此，您必须执行以下三个步骤 1- 创建所需的按钮或元素，当您单击它时，将显示内部带有链接的模式 2- 在下一步中，您必须编写显示和隐藏模式所需的CSS代码，当然，您可以根据您网站的风格更改某些部分。 3-最后，您需要使用 main-overlay ID 为按钮和 div 设置事件，以使每个模态在单击时显示/隐藏。 // Variables const mainButton = document.querySelector('#main-button'); const mainModal = document.querySelector('#main-modal'); const mainOverlay = document.querySelector('#main-overlay'); // Events if( mainButton ) mainButton.addEventListener('click', openModal); if( mainOverlay ) mainOverlay.addEventListener('click', closeModal); // Functions function openModal(e) { mainOverlay.classList.add('active'); mainModal.classList.add('active'); } function closeModal(e) { mainOverlay.classList.remove('active'); mainModal.classList.remove('active'); } /* Button */ .button { padding:8px 24px; border-radius:8px; background-color:#0ea5e9; font-size:16px; border:none; color:#FFFFFF; } /* Modal */ .modal { width:360px; height:200px; border-radius:12px; background-color:#FFFFFF; box-shadow: 0 4px 32px 0 rgba(0,0,0,0.10); position:fixed; inset:0; margin:auto; box-sizing:border-box; padding:32px; z-index:999; visibility:hidden; opacity:0; transition:all 0.3s linear; } .modal.active { visibility:visible; opacity:1; transition:all 0.3s linear .2s; } .modal ul { width:100%; height:100%; list-style:none; display:grid; grid-template-columns:repeat(2, 1fr); column-gap:16px; box-sizing:border-box; margin: 0; padding: 0; } .modal ul li { width:100%; height:100%; } .modal ul li a { width:100%; height:100%; background-color:#F7F7F7; display:flex; justify-content:center; align-items:center; border-radius:8px; text-decoration:none; color:#333333; font-size:18px; } .modal ul li a:hover { background-color:#E7E7E7; } /* Overlay */ .overlay { width:100%; height:100vh; background-color:rgba(0,0,0,0.4); position:fixed; inset:0; margin:auto; box-sizing:border-box; padding:32px; visibility:hidden; opacity:0; transition:all 0.3s linear; } .overlay.active { visibility:visible; opacity:1; transition:all 0.3s linear; } <!-- Your Button --> <button class="button" id="main-button">Click Me</button> <!-- Your Modal --> <div class="modal" id="main-modal"> <ul> <li><a href="#link-1">Link-1</a></li> <li><a href="#link-2">Link-2</a></li> </ul> </div> <div class="overlay" id="main-overlay"></div>
我正在使用 Tkinter、Python 中的按钮。 问题是，当我单击一个按钮时，该按钮的文本会抖动。这可能是这个小部件的默认行为，我不知道如何禁用我...
在Android 8中使用Shape Drawable设置Button的背景颜色和边框颜色
我尝试在Android 8中使用Shape Drawable（在drawable中创建button_start.xml）设置按钮的背景颜色和边框颜色，但它似乎不起作用。 Button_start.xml 文件： 活动...
我正在 Android Studio 中开发一个应用程序。 我有一个开关来启用/禁用某些功能。 我正在使用 xml 文件来定义拇指和轨道的颜色 - 当开关禁用时均为灰色...
我正在使用 QuickGrid 的预发行版。 我在 Blazor 中有一个用于用户列表的基本 QuickGrid。理想情况下，我希望能够双击用户行来拉出编辑模式。 第一个问题：是吗
我对 swiftui 很陌生，我很好奇使用显示图像的按钮或带有 onTapGesture 修饰符的图像之间有什么区别，这些修饰符的操作与 on 上的操作一样，但是...
我在编码此视图时遇到问题，因此我希望能够按加号按钮，然后在同一页面中添加另一个练习。 我使用了这段代码，但说的是（ 'VStack' 的结果
我有一个 jsx 按钮，应该将数据从一个 React 组件“翻转”到由于某种原因无法工作的另一个（兄弟）组件
我正在 React 中构建一个货币转换器。我有两个下拉菜单，都包含一系列货币，供用户选择要转换的货币。 我添加了一个“翻转”按钮...
从 php 7 更新到 php 8 后代码无法工作[已关闭]
所以我多年来一直致力于这个托管游戏服务器的项目，这个按钮应该生成一个 ID 号并从文本框中获取值，然后将它们保存在 .json 数据库中。 最近我...
按钮重组后文本按钮颜色更改为白色（Compose - Android）
这是我的自定义按钮： @可组合 有趣的自定义按钮（ 修饰符：修饰符， 文本按钮：字符串， isLoading: 布尔值 = false, onClick: () -> 单位 ）{ 如果（正在加载）{ 博...
使用 jQuery，如何在单击 Bootstrap 5 轮播时在同一按钮上创建播放/暂停 **HTML ** 使用 jQuery，如何在单击 Bootstrap 5 轮播时在同一按钮上创建播放/暂停 **HTML ** <div id="customSlider" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2500"> <div class="container "> <div class="carousel-indicators customSlider-indi"> <a data-bs-target="#customSlider" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Lorem 1"> <span class="banner-label">Lorem 1</span></a> <a data-bs-target="#customSlider" data-bs-slide-to="1" aria-label="Lorem 2"> <span class="banner-label">Lorem 2</span> </a> <a data-bs-target="#customSlider" data-bs-slide-to="2" aria-label="Lorem 3"> <span class="banner-label">Lorem 3</span> </a> <a data-bs-target="#customSlider" data-bs-slide-to="3" aria-label="Lorem 3"> <span class="banner-label">Lorem 4</span> </a> <a id="playBtn" data-cplay="true" class="play-btn play"> <span class="icon-pause"> </span> <span class="playPauseText">Pause</span> </a> <!-- <a class="btn play">Play</a> <a class="btn stop">Stop</a> --> </div> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="http://placehold.it/1440x500/210471?text=image_1" class="d-block w-100" alt="..."> <div class="container"> <div class="custom-cap"> <h5>Lorem ipsum</h5> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum maxime aut optio? Est eum laudantium qui aliquam tenetur mollitia, officiis enim laboriosam amet sapiente illum autem maxime molestias, sed ullam!</p> </div> </div> </div> <div class="carousel-item"> <img src="http://placehold.it/1440x500/210471?text=image_2" class="d-block w-100" alt="..."> <div class="container"> <div class="custom-cap"> <h5>Lorem ipsum</h5> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum maxime aut optio? Est eum laudantium qui aliquam tenetur mollitia, officiis enim laboriosam amet sapiente illum autem maxime molestias, sed ullam!</p> </div> </div> </div> <div class="carousel-item"> <img src="http://placehold.it/1440x500/210471?text=image_3" class="d-block w-100" alt="..."> <div class="container"> <div class="custom-cap"> <h5>Lorem ipsum</h5> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum maxime aut optio? Est eum laudantium qui aliquam tenetur mollitia, officiis enim laboriosam amet sapiente illum autem maxime molestias, sed ullam!</p> </div> </div> </div> <div class="carousel-item"> <img src="http://placehold.it/1440x500/210471?text=image_4" class="d-block w-100" alt="..."> <div class="container"> <div class="custom-cap"> <h5>Lorem ipsum</h5> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum maxime aut optio? Est eum laudantium qui aliquam tenetur mollitia, officiis enim laboriosam amet sapiente illum autem maxime molestias, sed ullam!</p> </div> </div> </div> </div> </div> 风格 .play-btn { width: 38px; height: 38px; border-radius: 5px; background: 0 0; position: relative; -webkit-box-shadow: none; box-shadow: none; border: 1px solid rgba(255, 255, 255, .3); padding: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow: hidden; } .play-btn .icon-pause { width: 8px; height: 12px; border-left: 2px solid #fff; border-right: 2px solid #fff; position: absolute; left: 14px; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .play-btn .playPauseText { left: 30px; opacity: 0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-weight: var(--ds-font-500); font-size: var(--ds-font-16); line-height: 1.4; color: #fff; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .play-btn:is(:hover, :focus) { width: 85px; } .play-btn:is(:hover, :focus) .playPauseText { opacity: 1; } .banner-label { color: #fff; position: relative; bottom: -5px; padding: 0px 3px; } .customSlider-indi { background: transparent; display: flex; justify-content: flex-start; align-items: center; align-content: center; flex-wrap: wrap; gap: 10px; bottom: 20px; padding: 0px 20px; } .customSlider-indi [data-bs-target] { flex: none; font-size: var(--ds-font-16); text-indent: 0; width: auto; background: transparent; position: relative; color: #fff; margin: 0; height: 36px; display: inline-block; border: 0px !important; align-items: center; } .customSlider-indi [data-bs-target]:is(:hover, :focus) { color: #fff; } .customSlider-indi [data-bs-target]::after { content: ""; width: 100%; height: 3px; bottom: 0; padding: 0; position: absolute; display: block; cursor: pointer; border-radius: 2px; background-color: #fff; transition: opacity .6s ease } .custom-cap { position: absolute; height: 100%; width: 100%; top: 0; z-index: 1; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; flex-wrap: wrap; color: #fff; } .custom-cap h5 { font-family: var(--ds-font-300); font-size: 56px; color: var(--ds-white); } .custom-cap p { font-size: var(--ds-font-22); font-family: var(--ds-font-300); color: var(--ds-white); } 脚本 var myCarousel = document.querySelector('#customSlider'); var carousel = new bootstrap.Carousel(myCarousel); $('#playBtn').click(function () { if ($(this).data('cplay') == "true") { $(this).data('cplay', 'false'); $(this).removeClass("play"); $(this).addClass("stop"); $(this).find(".playPauseText").text("Pause"); document.querySelector('.stop').addEventListener('click', function () { e.preventDefault(); carousel.pause(); }); } else { $(this).addClass("play"); $(this).data('cplay', 'true'); $(this).removeClass("stop"); $(this).find(".playPauseText").text("Play"); document.querySelector('.play').addEventListener('click', function () { e.preventDefault(); carousel.cycle(); }); } }); 我想让轮播在加载时播放，并有一个暂停/播放按钮来控制它。 我已经尝试过了，由于某种原因，我似乎无法让按钮在“暂停”单击时暂停，并在单击“播放”时恢复播放。 请帮我解决使用 jQuery 或 JS 的问题 这是脚本的修订版本： $(document).ready(function () { var myCarousel = $('#customSlider'); var carousel = new bootstrap.Carousel(myCarousel[0], { interval: 2500, ride: 'carousel' }); // Start the carousel on load carousel.cycle(); $('#playBtn').click(function () { var isPlaying = $(this).data('cplay'); if (isPlaying) { // If the carousel is playing, pause it carousel.pause(); $(this).data('cplay', false); $(this).removeClass("play").addClass("stop"); $(this).find(".playPauseText").text("Play"); } else { // If the carousel is paused, start it carousel.cycle(); $(this).data('cplay', true); $(this).removeClass("stop").addClass("play"); $(this).find(".playPauseText").text("Pause"); } }); });
我这里有两套代码， 打开 函数 NewTab() { window.open("随机网站", ...</desc> <question vote="0"> <p>我这里有两套代码，</p> <pre><code><button onclick="NewTab()">Open</button> <script> function NewTab() { window.open("random website", "", "width=1150, height=611",'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no'); } </script> </code></pre> <p>这段代码显然会以弹出窗口的形式打开窗口，非常简单。 这是另一组代码，</p> <pre><code><button onclick="openGame()">Open</button> <script> function openGame() { var win = window.open() var url = "random website 2","", "width=1000, height=565",'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no' var iframe = win.document.createElement('iframe') iframe.style.width = "100%"; iframe.style.height = "100%"; iframe.style.border = "none"; iframe.src = url win.document.body.appendChild(iframe) } </script> </code></pre> <p>此代码将打开窗口，但将其嵌入 about:blank 中。</p> <p>我不太确定如何处理此代码，并使它们协同工作，以便当您单击按钮时，它将打开窗口，就像第一个代码一样弹出窗口，但嵌入到 about:blank 中。 这可能吗？如果是的话，我不在这里做什么？</p> </question> <answer tick="false" vote="0"> <p>这其实很简单。我认为你正在尝试像那些在“关于：空白”中打开的“classroom6x”游戏一样进行复制。首先，如果您的学校 wifi 或屏蔽或 goguardian 或其他任何您尝试嵌入的网站被屏蔽，那么除了 VPN 代理或其他 wifi 之外，您无法真正使用此或其他任何东西来绕过屏蔽，因为此类服务将切断 iframe 的连接。</p> <p>现在进入真正的内容：</p> <pre><code>var win = window.open('about:blank')// <-- include the URL var url = "https://examplewebsite.com" var iframe = win.document.createElement('iframe') iframe.style.width = "100%"; iframe.style.height = "100%"; iframe.style.border = "none"; iframe.src = url win.document.body.appendChild(iframe) </code></pre> <p>就这么简单。但请记住，您要嵌入的网站（替换 example.com）需要正确设置 CORS 才能正常工作，否则它将拒绝连接。</p> </answer> </body></html>