按钮颜色更改 HTML
[英]Button Colour Change HTML
问题描述
我知道以前有人问过类似的问题，但对我来说没有帮助。 我尝试了很多，但都失败了。 我有一个 HTML 代码、JS 代码和 php 脚本。 现在发生的事情是我的 html 页面中有一个名为“Lights On”的按钮。 当我按下“点亮”按钮时，它会在服务器中运行一个 Php 脚本来触发连接到设备的灯（我们称之为照明设备）。 当我按下按钮时，它会变成绿色。 JS 代码在那里，所以在我按下按钮并单击网页上的任何其他地方后，该按钮仍然是绿色的。 这只是表明按钮处于活动状态。 到目前为止一切正常。
问题
问题是，当我的 html 页面和照明设备之间没有建立互联网连接时，按钮的行为与我预期的一样。 即，当我按下按钮时它是绿色的，当我按下网页上的其他地方时，按钮不会失去它的颜色。 但是一旦我的 html 页面和照明设备之间的连接成功通过按下按钮，按钮就会失去它的颜色。 （注意：建立连接后页面刷新）。 现在我在连接后看不到绿色。 在同一个 html 页面中还有另一个用于关灯的按钮。 但我不想添加它，因为代码会变得太大。 我只是想知道是否有办法即使我的网页刷新我的按钮颜色也会保持不变？ 或者我可以用我的 php 脚本做些什么来在按钮返回 true 时为我的按钮提供颜色？ 谢谢堆！！ 并感谢您的时间！
HTML代码
<!DOCTYPE html>
<html lang="en">
<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 个解决方案
解决方案1
0 2020-11-17 04:38:53
您可以将state存储在本地存储中
localStorage.setItem("state", 1); //on
然后在页面加载/刷新时，您可以检查它
if(localStorage.getItem("state") == 1){
//activate green button function
}
解决方案2
0 已采纳 2020-11-17 04:55:14
一个字：国家。
您的 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>
我可能对语法有点生疏，但这是总体思路。 希望有所帮助！
Html 点击时按钮颜色变化
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.