#javascript #php #html #css
#javascript #php #HTML #css
Вопрос:
Я знаю, что подобные вопросы задавались раньше, но в моем случае это не помогло. Я много пробовал и потерпел неудачу. У меня есть HTML-код, JS-код и php-скрипт. Сейчас происходит то, что на моей html-странице есть кнопка под названием «Lights On». Когда я нажимаю кнопку «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=abcdamp;password=cdefamp;action=onamp;pin=relay');
if($response ==true){
header("Location: index.html");
}
?>
Комментарии:
1. Лучше использовать ajax, чем перенаправление, иначе изменение класса jquery в вашем коде будет сброшено, затем в php используйте curl с таймаутом и, если это вообще возможно, верните текущее состояние lamp из вызова cgi-bin / output, например
{"on":1}, или{"on":0}или нет способа восстановить, если онопереворачивается, как будто вы включаете его вручную, затем ваш пользовательский интерфейс отключает его, когда вы думаете, что он включен. при каждом изменении состояния записывайте в файл с 1 или 0 или используйте db, затем, если время ожидания истекло, не записывайте в файл или db и возвращайте текущее состояние, чтобы получить текущее состояние после обновления страницы
Ответ №1:
Одно слово: состояние.
На вашей HTML-странице не отображается правильный цвет кнопки, потому что вы не поддерживаете состояние между обновлениями страницы. В текущем виде, даже если вы загрузили страницу, когда индикатор уже включен, он все равно не покажет вам зеленую кнопку.
Самое простое решение — поддерживать состояние подсветки в файле cookie или локальном хранилище с помощью JS, считывать это состояние при загрузке страницы, а затем отображать соответствующий цвет для кнопки.
// 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=abcdamp;password=cdefamp;action=readamp;pin=relay');
if ($lightState == true):
?>
<button class="button selected">Lights On</button>
<?php
else:
?>
<button class="button">Lights On</button>
Возможно, я немного устал от синтаксиса, но это общая идея. Надеюсь, это помогло!
Ответ №2:
Вы можете сохранить state в локальном хранилище
localStorage.setItem("state", 1); //on
затем при загрузке / обновлении страницы вы можете это проверить
if(localStorage.getItem("state") == 1){
//activate green button function
}
Комментарии:
1. Привет, спасибо за ответ. Я все еще не получаю желаемый результат.
2. Вы пытались добавить
localStorage.setItem("state", 1)внутреннюю кнопку onclick? Затем добавьте кодif(localStorage.getItem("state") == 1){ $('button').click() }при загрузке страницы.3. Когда я выполняю первое действие в функции onclick, я получаю сообщение об ошибке. И я не понял, что вы имели в виду под загрузкой страницы? Большое спасибо
4. У вас случайно нет простого примера кода, который я могу видеть? Большое спасибо…
5. jsfiddle.net/qc8egosk событие загрузки страницы означает, что после загрузки всех элементов.