功能: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>