0
私はesp8266のhtmlとcssでWebサーバーを作成しました。 私はWebサーバーにいくつかのボタンを持っており、自分のコードでgetメソッドを使用しています。 arduinoでは、私のボタンの名前が表示されたらokkを印刷します。HTMLでメソッドを取得
if(str.IndexOf("Turn+On")>0)
{
cilent.print("Okkk"}
}しかし、Webサーバ[OK]を私はブラウザと私はbuttobのすべてをプッシュするたびにリフレッシュするたびに私を送信します。ここで 。 しかし、私はそれらのすべてではなく、特定のボタンでコマンドを設定したいと思います。
つまり、各ボタンには独自のコマンドがあります。 私のHTMLコードはここにある：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Lato", sans-serif;
}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #000000;
border-top: none;
}
.button {
position: relative;
background-color: #C0C0C0;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
body,
html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("http://free4kwallpaper.com/wp-content/uploads/2016/01/New-Age-4K-Abstract-Wallpapers.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="tab bg">
<button class="tablinks" onclick="Tools(event, 'Lights')">Lights</button>
<button class="tablinks" onclick="Tools(event, 'Digital')">Digital</button>
<button class="tablinks" onclick="Tools(event, 'Kitchen')">Kitchen</button>
</div>
<div id="Lights" class="tabcontent bg">
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Bedroom1')">Bedroom1</button>
</div>
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Bedroom2')">Bedroom2</button>
</div>
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Hall')">Hall</button>
</div>
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Kitchen1')">Kitchen1</button>
</div>
</div>
<div id="Bedroom1" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="B1Turn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="B1Turn Off">
</form>
</div>
<div id="Bedroom2" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="B2Turn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="B2Turn Off">
</form>
</div>
<div id="Hall" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="HTurn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="HTurn Off">
</form>
</div>
<div id="Kitchen1" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="KTurn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="KTurn Off">
</form>
</div>
<div id="Digital" class="tabcontent bg">
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'TV')">TV</button>
</div>
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Splitter')">Splitter</button>
</div>
</div>
<div id="TV" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="TTurn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="TTurn Off">
</form>
</div>
<div id="Splitter" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="STurn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="STurn Off">
</form>
</div>
<div id="Kitchen" class="tabcontent bg">
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Microvawe')">Microvawe</button>
</div>
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Refrigerator')">Refrigerator</button>
</div>
</div>
<div id="Microvawe" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="MTurn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="MTurn Off">
</form>
</div>
<div id="Refrigerator" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="RTurn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="RTurn Off">
</form>
</div>
<script>
function Tools(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>