<!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;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
background-color: black;
position: relative;
overflow: hidden;
}
#play {
width: 100vw;
height:100vh;
position: absolute;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(8, 1fr);
align-items: center;
}
#play>button:not(#wifi, #abouta) {
width: 100px;
height: 100px;
font-size: 25px;
border-radius: 25px;
transform: rotate(90deg);
}
#wifi {
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 35px;
grid-column: 5;
grid-row: 1;
}
#t1 {
grid-column: 3;
grid-row: 2;
}
#t2 {
grid-column: 1;
grid-row: 2;
}
#t3 {
grid-column: 2;
grid-row: 1;
}
#t4 {
grid-column: 2;
grid-row: 3;
}
#t5 {
grid-column: 2;
grid-row: 2;
}
#t6 {
transform: rotate(90deg);
grid-column: 1;
grid-row: 4;
}
#t7 {
transform: rotate(90deg);
grid-column: 1;
grid-row: 5;
}
#t8 {
grid-column: 3;
grid-row: 7;
}
#t9 {
grid-column: 1;
grid-row: 7;
}
#t10 {
grid-column: 2;
grid-row: 6;
}
#t11 {
grid-column: 2;
grid-row: 8;
}
#t12 {
grid-column: 2;
grid-row: 7;
}
#but {
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 35px;
transform: rotate(90deg);
grid-column: 5;
grid-row: 8;
}
#but:hover {
background-color: rgb(255, 0, 0);
}
#MQTT {
width: 100vw;
height: 50vh;
}
#diva {
display: flex;
}
#LED {
margin: 0;
padding: 0;
}
#dy {
display: none;
}
#dvfas {
display: none;
}
#mqttshow {
display: none;
background-color: beige;
height: 100vh;
position: absolute;
z-index: 2;
}
#aboutshow {
text-align: center;
display: none;
background-color: beige;
height:100vh;
position: absolute;
z-index: 2;
}
#back,
#backtwo {
position: absolute;
left: 0;
bottom: 0;
width: 100vw;
height: 8vh;
}
</style>
<body>
<div id="play">
<button id="wifi">★</button>
<button id="t1">前进</button>
<button id="t2">后退</button>
<button id="t3">左转</button>
<button id="t4">右转</button>
<button id="t5">刹车</button>
<button id="t6" onclick=" var bodya= document.body;bodya.style.background='green';">启动</button>
<button id="t7" onclick=" var bodya= document.body;bodya.style.background='black';">暂停</button>
<button id="t8">上</button>
<button id="t9">下</button>
<button id="t10">左</button>
<button id="t11">右</button>
<button id="t12">⚪</button>
<button id="but" onclick="about()">关于</button>
</div>
<div id="mqttshow">
<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>
<button id="back">返回</button>
</div>
</div>
<div id="aboutshow">
<section>
<h1>🌟 电子爱好者的乐园 🌟</h1>
<p>你是否曾经好奇,那些闪烁的灯光和复杂的电路背后隐藏着怎样的奥秘?电子世界是一个充满无限可能的奇妙天地,等待着每一位热爱科技的探索者!</p>
</section>
<section>
<h2>💡 发现电子的魅力 💡</h2>
<p>从简单的LED电路到复杂的微控制器项目,每一个电子元件都像是一个个音符,组合起来便能演奏出美妙的科技乐章。无论你是初学者还是资深玩家,这里都有适合你的挑战和乐趣。</p>
</section>
<section>
<h2>🔧 动手实践,创造未来 🔧</h2>
<p>拿起你的工具箱,开始动手制作吧!焊接一块电路板,编写一段代码,或是设计一款智能设备。每一次尝试和成功,都会让你离梦想更近一步。</p>
</section>
<section>
<h2>🌐 加入我们的社区 🌐</h2>
<p>我们是一个充满热情和创造力的大家庭。在这里,你可以分享你的作品,交流经验,参加各种有趣的活动和比赛。让我们一起学习、成长,共同推动电子技术的发展!</p>
</section>
<section>
<h2>🚀 开启你的电子之旅 🚀</h2>
<p>无论你是学生、工程师还是纯粹的爱好者,只要你对电子技术充满热情,这里就是你的归属。让我们携手并肩,在电子的世界里尽情探索和创造吧!</p>
</section>
<section>
<h2>适配到6.4寸屏幕</h2>
</section>
</p> <button id="backtwo" onclick="document.getElementById('aboutshow').style.display='none'">返回</button>
</div>
<script>
window.onload = function () {
for (var i = 1; i <= 12; i++) {
document.getElementById("t" + i).addEventListener("click", function () {
var xhr = new XMLHttpRequest();
var str = "/?cmd=" + this.id;
xhr.open("GET", str, true);
xhr.send();
console.log(this.textContent);
})
}
}
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 () {
document.getElementById("mqttshow").style.display = "block";
})
document.getElementById("back").addEventListener("click", function () {
document.getElementById("mqttshow").style.display = "none";
a
})
function about() {
document.getElementById("aboutshow").style.display = "block";
}
</script>
</body>
</html>