显示'的加载微调器；扫描'；和'；重新启动'；使用纯Javascript在web应用程序中处理_Javascript_Php_Html_Openwrt

显示'的加载微调器；扫描'；和'；重新启动'；使用纯Javascript在web应用程序中处理

javascript php html

显示'的加载微调器；扫描'；和'；重新启动'；使用纯Javascript在web应用程序中处理,javascript,php,html,openwrt,Javascript,Php,Html,Openwrt,我正在为路由器开发一个web应用程序，在两个不同的页面中有两个按钮，扫描和重新启动。扫描的功能是扫描所有连接的设备并显示（使用php），重新启动的功能是重新启动整个系统。我正在使用openwrt我计划在执行这些过程时，在这些页面中使用扫描微调器和重新启动微调器。我得到了参考，我尝试了这个，但我想它是不工作的扫描和重新启动那么有没有一种方法可以使用纯JS实现这一点呢。（我从中获得了图像）编辑这是我重新启动页面的代码 JS CSS HTML PHP <body onload="spin()

我正在为路由器开发一个web应用程序，在两个不同的页面中有两个按钮，扫描和重新启动。扫描的功能是扫描所有连接的设备并显示（使用php），重新启动的功能是重新启动整个系统。我正在使用openwrt

我计划在执行这些过程时，在这些页面中使用扫描微调器和重新启动微调器。我得到了参考，我尝试了这个，但我想它是不工作的扫描和重新启动

那么有没有一种方法可以使用纯JS实现这一点呢。（我从中获得了图像）

编辑
这是我重新启动页面的代码

CSS

HTML PHP

<body onload="spin();">
<div id="loading">
<img id="loading-image" src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" alt="Loading..." />
</div> 

<form name="reboot" style="height: 56px;" action="reboot.php" method="post">

<input type="submit" name="reboot" value="Reboot">

</form>

<?php
if (isset($_POST['reboot']))
    shell_exec("reboot");
?>

好吧，现在让我们看看。从哪里开始

当我回顾你完成任务的方法时，许多问题对我来说似乎很明显

1.-您实际上从未做过任何使图像可见的事情

2.-您同时使用window.onload和body.onload

3.-使用CSS使图像可见，但默认情况下，使用Javascript立即再次隐藏图像。一个更好的选择是使用css隐藏它，仅当这是适当的操作时才使用javascript显示它

4.-单击该按钮时，再次请求相同的文件-将Reboot=Reboot作为POST参数传递。这一切都很好。但是回避了一个问题-你将如何指示重启已经完成？你只会看到一个写着“加载”的页面——看起来很混乱

我太累了，甚至不能考虑想出一个更好的方法来解决这个问题。对于这个问题，可能已经有几种解决方案。我怀疑使用ajax定期轮询服务器，等待任何响应将是查看路由器何时再次联机的合理方式。我只提供了一种方法，如果按下按钮加载页面，则可以显示图像

reboot.php

<!DOCTYPE html>
<html>
<head>
<script>
</script>
<style>
#loadingDiv
{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    display: none; 
    z-index: 99
}

#loading-image
{
    position: absolute;
    top: 40%;
    left: 45%;
    z-index: 100
}
</style>
</head>
<body>
<div id="loadingDiv">
    <img id="loading-image" src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" alt="Loading..." />
</div> 

<form name="rebootForm" style="height: 56px;" action="reboot.php" method="post">
    <input type="submit" name="reboot" value="Reboot"/>
</form>

<?php
    if (isset($_POST['reboot']))
        {
            shell_exec("reboot");
            echo "<script>document.getElementById('loadingDiv').style.display = 'block';</script>";
        }
?>
</body>
</html>


#加载div
{
宽度：100%；
身高：100%；
顶部：0px；
左：0px；
位置：固定；
显示：无；
z指数：99
}
#加载图像
{
位置：绝对位置；
最高：40%；
左：45%；
z指数：100
}
有没有一种方法可以让纯JS发挥作用？
有<代码>我们可以告诉您如何更改代码以使其工作，而不必查看代码吗？

否。@enhzflepI已添加重新启动代码。php@enhzflep你好，朋友，我已经添加了我的代码。是的，我还有其他更重要的事情要做。我已经看到了你的回应和更新。在我考虑完如何回应之后，我会这样做。：）PHP是否在路由器上以root用户身份运行-0是的，先生，这正是您提到的工作方式。。所以，当路由器使用纯JS或php恢复在线时，并没有办法让它停止？“我说得对吗？”梅西尔-嗯，正如我提到的-你可能希望尝试使用ajax。如果发出请求，可以检查响应的状态。如果它表示由于无法访问主机而导致故障，则您知道路由器仍在重新启动。当然，如果这是一个播放项目，使用单个硬件设备，那么您基本上知道重新启动需要多长时间。在这种情况下，在将

.style.display

设置为

'none'

之前，您可以使用setTimeout等待一段比此时间更长的时间。其他人能/会给你比我更好的答案。：）

<body onload="spin();">
<div id="loading">
<img id="loading-image" src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" alt="Loading..." />
</div> 

<form name="reboot" style="height: 56px;" action="reboot.php" method="post">

<input type="submit" name="reboot" value="Reboot">

</form>

<?php
if (isset($_POST['reboot']))
    shell_exec("reboot");
?>

<!DOCTYPE html>
<html>
<head>
<script>
</script>
<style>
#loadingDiv
{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    display: none; 
    z-index: 99
}

#loading-image
{
    position: absolute;
    top: 40%;
    left: 45%;
    z-index: 100
}
</style>
</head>
<body>
<div id="loadingDiv">
    <img id="loading-image" src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" alt="Loading..." />
</div> 

<form name="rebootForm" style="height: 56px;" action="reboot.php" method="post">
    <input type="submit" name="reboot" value="Reboot"/>
</form>

<?php
    if (isset($_POST['reboot']))
        {
            shell_exec("reboot");
            echo "<script>document.getElementById('loadingDiv').style.display = 'block';</script>";
        }
?>
</body>
</html>