Question

我创建了一个网站，类似控制面板，控制连接到微控制器的不同设备（网站本身托管在微控制器上）。

我遇到了这个问题：如果用户更改某些复选框的状态（您可以将其视为开/关按钮），并在发送其他命令之后立即执行，我的系统崩溃了。为了避免这种情况，我需要引入延迟，禁止用户在特定时间内点击网站上的任何其他按钮（在我的情况下为5秒）。我正在使用JavaScript向我的微控制器传送http请求，因此我正在寻找基于JavaScript的解决方案。

希望我明确表示感谢你的帮助。

Answer 1

首先，您需要将EVENT附加到您拥有的所有复选框。

这样的事情：

$.("input[type='checkbox']").change(disableScreen);

创建一个会禁用屏幕的div

<div id="disablingDiv" ></div>

然后我们必须创建一个名为disableScreen的新函数。

function disableScreen() {
var $disablingDiv= $("#disablingDiv");
 $body.addClass("disablingDiv");
 window.setTimeout(function () {
    $body.removeClass("disablingDiv");   
 }, 5000);
}

 .disablingDiv
{
/* Do not display it on entry */
display: none; 

/* Display it on the layer with index 1001.
   Make sure this is the highest z-index value
   used by layers on that page */
z-index:1001;

/* make it cover the whole screen */
position: absolute; 
top: 0%; 
left: 0%; 
width: 100%; 
height: 100%; 

/* make it white but fully transparent */
background-color: white; 
opacity:.00; 
filter: alpha(opacity=00); 
}

隐藏div解决方案取自“Disable all page elements with transparent div”

Answer 2

您可以使用以下步骤。

创建一个HTML Div
将该div设为Visible false或display:none
设置Div的高度和宽度。将其设为screen.Width和screen.Height
当用户点击Checkbox时 - 将div visible=true或display:block设为5秒。
5秒后使其隐身。

Answer 3

由于帖子声明网站本身是在微控制器上托管的，因此jQuery可能不适合（存储限制）答案。然而，总体主题仍然是相同的。当用户更改适当的控件时，会显示带有“请稍候”或其他消息的模态div。

您没有提到要定位的浏览器，所以我假设是chrome或firefox版本。

<强> CSS：

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
    z-index: 1001;
    display: none;
}

.modal.active {
    display: block;
}

HTML （将此div放在body的根目录中，只有一次）：

<div id="modal" class="modal">
    <h3>Please wait...</h3>
</div>

<强> JavaScript的：

// get your elements
var element = document.getElementById("myField");
var modal = document.getElementById("modal");

// opens the modal
function openModal() {
    modal.classList.add("active");
}

// closes the modal
function closeModal() {
    modal.classList.remove("active");
}

// opens the modal, then closes it after a timeout period
function openTemporaryModal(var timeout) {
    openModal();
    setTimeout(function() {
        closeModal();
    }, timeout);
}

// used as an event callback
function modalForFiveSeconds() {
    openTemporaryModal(5000);
}

// Attach the event callback to the element/event you want to open the modal:
element.addEventListener('change', modalForFiveSeconds);

<强>参考文献：

在特定时间段内阻止网站上的任何用户活动：javascript

3 个答案: