按钮颜色更改 HTML
我知道以前曾有人问过类似的问题，但这对我的情况没有帮助。我尝试了很多，但都失败了。我有 HTML 代码、JS 代码和 php 脚本。现在发生的事情是我的 html 页面中有一个名为“Lights On”的按钮。当我按下“开灯”按钮时，它会在服务器中运行一个 Php 脚本来触发连接到设备的灯（我们称其为照明设备）。当我按下按钮时，按钮就会变成绿色。JS 代码在那里，所以当我按下按钮并单击网页上的其他任何位置后，按钮仍然是绿色的。它只是表明该按钮处于活动状态。到目前为止一切正常。
问题
问题是，当没有互联网连接时在我的 html 页面和照明设备之间建立的按钮的行为符合我的预期。即，当我按下按钮时，它具有绿色，当我按下网页上的其他位置时，按钮不会失去其颜色。但是，一旦按下按钮，我的html页面和照明设备之间的连接成功，按钮就会失去颜色。（注意：建立连接后页面会刷新）。现在连接完成后我看不到绿色。在同一个 html 页面中还有另一个用于关闭灯的按钮。但我不想添加它，因为代码会变得太大。我只是想知道是否有办法让我的按钮颜色即使我的网页刷新也保持不变？或者我可以用我的 php 脚本做一些事情，以便在按钮返回 true 时立即为按钮提供颜色？谢谢堆！！感谢您抽出时间！
HTML代码
<!DOCTYPE html>
<html>
<head>
<style>
.button {
margin-top: 280px;
margin-left: 420px;
border: none;
color: white;
padding: 30px 35px;
}
.button:target {
color: green;
outline: none;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
button.selected {
background-color: green;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-UA-Compatible" content="ie=edge">
<body>
<form method="get" action="http://myserver.com/triggeron.php">
<button class="button">Lights On</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="myscript.js"></script>
JavaScript（myscript.js）
$('button').on('click', function(){
$('button').removeClass('selected');
$(this).addClass('selected');
});
PHP 代码（triggeron.php）
<?php
$response = @file_get_contents('http://1.1.1.1/cgi-bin/output?username=abcd&password=cdef&action=on&pin=relay');
if($response ==true){
header("Location: index.html");
}
?>
开满天机2回答
-
守着一只汪
一个词：国家。您的 HTML 页面没有显示正确的按钮颜色，因为您没有在页面刷新之间维护状态。就目前而言，即使您在灯已经亮起时加载页面，它仍然不会向您显示绿色按钮。最简单的解决方法是使用 JS 维护 cookie 或本地存储中的灯光状态，在页面加载时读取此状态，然后为按钮显示适当的颜色。// on clicking the button, do this:localStorage.setItem('isLightOn', '1');// and on page load, do this:if (localStorage.getItem('isLightOn') === '1') { $('button').addClass('selected');} else { $('button').removeClass('selected');}这样做的缺点是它不能根据服务器反映灯光的当前状态。为了始终在页面中显示正确的灯光状态，您需要一种机制来从服务器查询灯光的当前状态。然后您可以从服务器读取状态，然后显示相应的 HTML。您甚至可以将其放入索引文件中。调用它index.php并使用与您的 中相同的内容index.html，并添加一些 PHP：<?php # Let's assume this returns `true` when light is on, and `false` is it's off. $lightState = @file_get_contents('http://1.1.1.1/cgi-bin/output?username=abcd&password=cdef&action=read&pin=relay'); if ($lightState == true):?> <button class="button selected">Lights On</button><?php else:?> <button class="button">Lights On</button>我可能对语法有点生疏，但这就是总体思路。希望有帮助！ -
慕妹3242003
您可以将其存储state在本地存储中localStorage.setItem("state", 1); //on然后在页面加载/刷新时您可以检查它if(localStorage.getItem("state") == 1){ //activate green button function }
随时随地看视频慕课网APP
相关分类
JavaScript