功能：1.点击“设备启动”按键可以启动设备，点击“测量”开始测量。
2.启动状态、测量进度、测量数字结果和图片每一秒刷新一次。
3.点击按键会有“纹波样式”动画效果
效果如图：
直接上代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>body
{background-color:#FFe5e5;
}
h1
{color:orange;text-align:center;
}.button {position: relative;background-color: #ffffff;border:2px solid #008cba;border-radius:8px;font-size: 18px;color: #87cefa;padding: 10px 20px;margin: 4px 2px;text-align: center;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;text-decoration: none;overflow: hidden;cursor: pointer;
}.button:after {content: "";background: #a9a9a9;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
} p
{font-family:"Times New Roman";font-size:20px;color: #87cefa;}
</style><body><h1>构造深度测量</h1>
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;"><center><button class="button" onclick="start()">设备启动</button></center><form onsubmit="return reloadinit(this)" ></form><center><p>启动状态:<iframe id="showinit" frameborder="0" name="f1" width="100" height="28" src="init.txt" scrolling="no"></iframe></p></center><script>function reloadinit() { const showinit = document.getElementById('showinit');const ts=(new Date()).getTime();showinit.src=`init.txt?ts=${ts}`;return false;}</script><div style="font-family:verdana;padding:10px;border-radius:10px;border:10px solid #EE872A;"><center><button class="button" onclick="measure()">测量</button></center><form onsubmit="return reloadproce(this)" ><center><p>测量进度:<iframe id="showproce" frameborder="0" name="f1" width="100" height="28" src="proce.txt" scrolling="no"></iframe></p></center></form><script>function reloadproce() { const showTxt = document.getElementById('showproce');const ts=(new Date()).getTime();showTxt.src=`proce.txt?ts=${ts}`;return false;}</script><form onsubmit="return reloadresult(this)" ><center><p>测量数字结果：<iframe id="showresult" frameborder="0" name="f1" width="100" height="28" src="result.txt" scrolling="no"></iframe></p></center></form><script>function reloadresult() { const showTxt = document.getElementById('showresult');const ts=(new Date()).getTime();showTxt.src=`result.txt?ts=${ts}`;return false;}</script><form onsubmit="return reload(this)" ><center><p>测量图片结果</P></center></form><center><img src="image.jpg" id="showViewImg" /></center><script>function reload() { const showImg = document.getElementById('showViewImg');const ts=(new Date()).getTime();showImg.src=`image.jpg?ts=${ts}`;return false;}</script><script>function start(){console.log("start")fetch("/start").then(response => response.text()).then(data => {console.log(data)document.getElementById("result").innerText=data;});}</script><script>function measure(){console.log("measure")fetch("/measure").then(response => response.text()).then(data => {console.log(data)document.getElementById("result").innerText=data;});}</script><script>setInterval(reload,2000);setInterval(reloadinit,10000);setInterval(reloadproce,10000);setInterval(reloadresult,1000);</script> </body>
</html>如上图单纯按键功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.button {position: relative;background-color: #ffffff;border:2px solid #008cba;border-radius:8px;font-size: 18px;color: #87cefa;padding: 10px 20px;margin: 4px 2px;text-align: center;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;text-decoration: none;overflow: hidden;cursor: pointer;
}.button:after {content: "";background: #a9a9a9;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
}
</style>
</head>
<body><h2>按钮动画 - 波纹效果</h2><button class="button">Click Me</button></body>
</html>另一种效果（按压特效）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.button {display: inline-block;padding: 10px 20px;font-size: 18px;cursor: pointer;text-align: center; text-decoration: none;outline: none;color: #87cefa;background-color: #ffffff;border: 2px solid #008cba;border-radius: 8px;box-shadow: 0 9px #999;
}.button:hover {background-color: #dcdcdc}.button:active {background-color: #ffffff;box-shadow: 0 5px #666;transform: translateY(4px);
}
</style>
</head>
<body><h2>按钮动画 - "按压效果"</h2><button class="button">Click Me</button></body>
</html>
