WEB 手柄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEB遥控器</title>
</head>
<style>
* {
margin: 0;
padding: 0;
overflow-y: hidden;
overflow-x: hidden;
}
body {
background-color: #09f811;
color: aliceblue;
}
#play {
transform-origin: top left;
position: absolute;
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#play {
transform: scale(0.5);
}
}
@media only screen
and (min-device-width : 481px)
and (max-device-width : 768px) {
#play {
transform: scale(0.7);
}
}
@media only screen
and (orientation : portrait)
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#play {
transform: scale(0.8);
}
}
@media only screen
and (orientation : landscape)
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#play {
transform: scale(0.9);
}
}
@media only screen
and (min-width : 1224px) {
#play {
transform: scale(1);
}
}
#box {
gap: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
#box3 {
gap: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
div[id^="t"] {
border-radius: 25px;
margin: 10px;
text-align: center;
width: 100px;
height: 100px;
background-color: black;
font-size: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#t1 {
grid-column: 3;
grid-row: 2;
transform: rotate(90deg)
}
#t2 {
grid-column: 2;
grid-row: 2;
}
#t3 {
grid-column: 1;
grid-row: 2;
transform: rotate(90deg);
}
#t4 {
grid-column: 2;
transform: rotate(90deg);
}
#t5 {
transform: rotate(90deg);
grid-column: 2;
grid-row: 3;
}
#t6,
#t7 {
font-size: 30px;
transform: rotate(90deg);
}
#t8 {
grid-column: 3;
grid-row: 2;
transform: rotate(90deg);
}
#t9 {
grid-column: 2;
grid-row: 2;
}
#t10 {
grid-column: 1;
grid-row: 2;
transform: rotate(90deg);
}
#t11 {
grid-column: 2;
transform: rotate(90deg);
}
#t12 {
grid-column: 2;
grid-row: 3;
transform: rotate(90deg);
}
div[id^="t"]:active {
transform:scale(0.2);
background-color: rgb(243, 94, 8);
}
#wifi {
position: absolute;
background-color: black;
border-radius: 25px;
font-size: 50px;
width: 50px;
height: 50px;
right: 0;
}
#wifi:active {
transform: scale(0.5);
}
#set {
display: none;
height: 100vh;
position: relative;
z-index: 2;
background-color: black;
}
#but {
position: absolute;
width: 100vw;
height: 5vh;
bottom: 0;
}
#but:active {
transform: scale(0.4);
}
#MQTT {
width: 100vw;
height: 50vh;
}
#diva {
display: flex;
}
#LED {
margin: 0;
padding: 0;
}
#dy {
display: none;
}
#dvfas {
display: none;
}
#about {
height: 5vh;
width: 100vw;
position: absolute;
bottom: 0;
}
#about>p{
transform: rotate(90deg);
}
#abouta{
position: absolute;
display: block;
width: 100vw;
background-color: white;
height: 100vh;
display: none;
color: black;
}
#abouta>p{
transform-origin: 50vw 50vw;
transform: rotate(90deg);
position: absolute;
top:5vh;
right: 80vw;
}
#abouta>p:hover{
color: rgba(241, 8, 8, 0.835);
}
</style>
<body>
<div id="play">
<div id="box">
<div id="t1">↑</div>
<div id="t2">⚪</div>
<div id="t3">↓</div>
<div id="t4">←</div>
<div id="t5">→</div>
</div>
<div id="box2">
<div id="t6">启动</div>
<div id="t7">暂停</div>
</div>
<div id="box3">
<div id="t8">上</div>
<div id="t9">⚪</div>
<div id="t10">下</div>
<div id="t11">左</div>
<div id="t12">右</div>
</div>
</div>
<button id="about"><p>关于</p></button>
<div id="abouta"><p>点击空白返回<br>联系我们:<br>邮箱
<br>祝福您生活愉快!</p></div>
<div id="wifi" >
★
</div>
<div id="set" >
<h1>MQTT管理</h1>
<div id="MQTT">
<form class="fr">
<span>MQTT服务器:</span>
<input type="text" id="mqttserver" name="dz" placeholder="填入服务器地址"><br>
<span>MQTT端口号:</span>
<input type="text" id="pot" name="port" placeholder="填入端口号"><br>
<span>MQTT密匙码:</span>
<input type="text" id="pasa" name="pass" placeholder="填入MQTT连接密匙">
<button type="button" onclick="connected()">连接</button>
</form>
<div id="diva">
<span>连接状态:</span>
<svg width="30" height="30" viewBox="0 0 100 100">
<circle id="LED" cx="30" cy="30" r="26" stroke="black" stroke-width="3" fill="red" />连接中...
</svg>
</div>
<p id="ts"></p>
<br><i id="jsre"></i>
<div id="dy">
<form>
<span>设置订阅主题:</span>
<input type="text" id="subqq" name="subqq" placeholder="填入订阅主题">
<button type="button" onclick="subee()">订阅</button>
</form>
<p id="subts"></p>
</div>
<div id="dvfas">
<form>
<span>设置发布主题:</span>
<input type="text" id="pubqq" name="pubqq" placeholder="填入需要发布的消息">
<button type="button" onclick="pubee()">发布</button>
</form>
<p id="pubts"></p>
</div>
</div>
<button id="but">返回</button>
</div>
<script>
for (var i = 1; i <= 12; i++) {
document.getElementById("t" + i).addEventListener("click", function () {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/?cmd=" + this.id, true);
xhr.send();
var str = document.getElementById(this.id).textContent;
console.log(str);
})
}
connected = () => {
var geta = document.getElementById('mqttserver').value;
var getb = document.getElementById('pot').value;
var getc = document.getElementById('pasa').value;
if (geta == "" || getb == "" || getc == "") {
document.getElementById("ts").innerHTML = "请输入完整";
return;
};
console.log(geta);
console.log(getb);
console.log(getc);
var xhr = new XMLHttpRequest();
var str = "/MQTT?dz=" + geta + "&port=" + getb + "&pass=" + getc;
xhr.open("GET", str, false);
xhr.send();
if (xhr.status == 200) {
var LED = document.getElementById("LED");
LED.setAttribute("fill", "green");
document.getElementById("jsre").innerText = "恭喜您,成功连接MQTT!";
document.getElementById("ts").innerHTML = "连接成功";
document.getElementById("dy").style.display = "block";
} else { document.getElementById("ts").innerHTML = "连接失败"; };
};
function subee() {
var gea = document.getElementById('subqq').value;
if (gea == "") {
document.getElementById("subts").innerText = "请输入完整";
return;
};
console.log(gea);
var xhr = new XMLHttpRequest();
var str = "/subqq?subqq=" + gea;
xhr.open("GET", str, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("subts").innerText = "订阅成功";
document.getElementById("dvfas").style.display = "block";
};
};
xhr.send();
};
function pubee() {
var gea = document.getElementById('pubqq').value;
if (gea == "") {
document.getElementById("subts").innerText = "请输入完整";
return;
};
console.log(gea);
var xhr = new XMLHttpRequest();
var str = "/pubqq?pubqq=" + gea;
xhr.open("GET", str, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("pubts").innerText = "发布成功";
};
};
xhr.send();
};
document.getElementById("wifi").addEventListener("click", function () {
var h1 = document.getElementById("set");
h1.style.display = "block";
});
document.getElementById("but").addEventListener("click", function () {
var h1 = document.getElementById("set");
h1.style.display = "none";
});
document.getElementById("about").addEventListener("click", function () {
var abouta=document.getElementById("abouta");
abouta.style.display="block";
abouta.addEventListener("click",function(){
abouta.style.display="none";
});
});
</script>
</body>
</html>
