<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>发射器</title>
<style>
body {
text-align: center;
margin: 0 auto;
padding: 0 20px;
}
.space {
margin-bottom: 5px;
/*text-align: right;*/
display: block;
}
.tips {
color: red;
text-align: center;
}
.btn {
padding: 6px 20px;
margin: 0 10px;
}
#div1 a, #div2 a, #div3 a {
margin-right: 7px;
}
</style>
<link rel="stylesheet" href="css/buttons.css">
<script src="js/jquery-2.1.4.js"></script>
</head>
<body>
<div class="space">
<button onclick="toggle1();" class="btn">14</button>
<button onclick="toggle2();" class="btn">11</button>
<button onclick="toggle3();" class="btn">8</button>
</div>
<div id="div1" style="display: block;">
<a href="#" onclick="update(11)" class="button button-inverse button-circle button-jumbo">左1</a>
<a href="#" onclick="update(12)" class="button button-primary button-circle button-jumbo">左2</a>
<a href="#" onclick="update(13)" class="button button-action button-circle button-jumbo">左3</a>
<a href="#" onclick="update(14)" class="button button-highlight button-circle button-jumbo">左4</a>
<a href="#" onclick="update(15)" class="button button-caution button-circle button-jumbo">左5</a>
<a href="#" onclick="update(16)" class="button button-royal button-circle button-jumbo">左6</a>
<a href="#" onclick="update(17)" class="button button-primary button-circle button-jumbo">左7</a>
<a href="#" onclick="update(7)" class="button button-primary button-circle button-jumbo">右7</a>
<a href="#" onclick="update(6)" class="button button-royal button-circle button-jumbo">右6</a>
<a href="#" onclick="update(5)" class="button button-caution button-circle button-jumbo">右5</a>
<a href="#" onclick="update(4)" class="button button-highlight button-circle button-jumbo">右4</a>
<a href="#" onclick="update(3)" class="button button-action button-circle button-jumbo">右3</a>
<a href="#" onclick="update(2)" class="button button-primary button-circle button-jumbo">右2</a>
<a href="#" onclick="update(1)" class="button button-inverse button-circle button-jumbo">右1</a>
<a href="#" onclick="update(8)" class="button button-highlight button-circle button-jumbo"
style="margin-left: 10px;">长振</a>
</div>
<div id="div2" style="display: none;">
<a href="#" onclick="update(11)" class="button button-inverse button-circle button-jumbo">左1</a>
<a href="#" onclick="update(12)" class="button button-primary button-circle button-jumbo">左2</a>
<a href="#" onclick="update(13)" class="button button-action button-circle button-jumbo">左3</a>
<a href="#" onclick="update(14)" class="button button-highlight button-circle button-jumbo">左4</a>
<a href="#" onclick="update(15)" class="button button-caution button-circle button-jumbo">左5</a>
<a href="#" onclick="update(6)" class="button button-royal button-circle button-jumbo">右6</a>
<a href="#" onclick="update(5)" class="button button-caution button-circle button-jumbo">右5</a>
<a href="#" onclick="update(4)" class="button button-highlight button-circle button-jumbo">右4</a>
<a href="#" onclick="update(3)" class="button button-action button-circle button-jumbo">右3</a>
<a href="#" onclick="update(2)" class="button button-primary button-circle button-jumbo">右2</a>
<a href="#" onclick="update(1)" class="button button-inverse button-circle button-jumbo">右1</a>
<a href="#" onclick="update(8)" class="button button-highlight button-circle button-jumbo"
style="margin-left: 10px;">长振</a>
</div>
<div id="div3" style="display: none;">
<a href="#" onclick="update(11)" class="button button-inverse button-circle button-jumbo">左1</a>
<a href="#" onclick="update(12)" class="button button-primary button-circle button-jumbo">左2</a>
<a href="#" onclick="update(13)" class="button button-action button-circle button-jumbo">左3</a>
<a href="#" onclick="update(14)" class="button button-highlight button-circle button-jumbo">左4</a>
<a href="#" onclick="update(4)" class="button button-highlight button-circle button-jumbo">右4</a>
<a href="#" onclick="update(3)" class="button button-action button-circle button-jumbo">右3</a>
<a href="#" onclick="update(2)" class="button button-primary button-circle button-jumbo">右2</a>
<a href="#" onclick="update(1)" class="button button-inverse button-circle button-jumbo">右1</a>
<a href="#" onclick="update(8)" class="button button-highlight button-circle button-jumbo"
style="margin-left: 10px;">长振</a>
</div>
<div><span class="tips" id="result"></span></div>
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
function toggle1() {
div1.style.display = "block";
div2.style.display = "none";
div3.style.display = "none";
}
function toggle2() {
div1.style.display = "none";
div2.style.display = "block";
div3.style.display = "none";
}
function toggle3() {
div1.style.display = "none";
div2.style.display = "none";
div3.style.display = "block";
}
/*
发送请求
*/
function update(id) {
$.ajax({
url: "/notify?id=" + id,
type: "GET",
async: true,
success: function (res) {
console.log(res);
$("#result").text(res);
}
});
};
</script>
</body>
</html>
