html界面——button设置样式

功能：1.点击“设备启动”按键可以启动设备，点击“测量”开始测量。2.启动状态、测量进度、测量数字结果和图片每一秒刷新一次。3.点击按键会有“纹波样式”动画效果效果如图：直接上代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" co

L_Y000

14621人浏览 · 2021-12-20 20:39:37

L_Y000 · 2021-12-20 20:39:37 发布

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