在网页端控制stm32灯的亮灭的前后端流程及代码
前端:
1. 利用HTML页面和CSS样式表实现网页布局;
2. 利用JavaScript语言实现对按钮的操作,当按下开关按钮时发送AJAX请求到后端;
3. 采用AJAX进行异步数据传输。
前端代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>STM32</title>
<!-- CSS -->
<style type="text/css">
body { background-color: #fcfcfc; font-family: Helvetica, arial, freesans, clean, sans-serif; }
#light { width: 150px; height: 150px; background-color: rgba(255, 255, 255, 0.5); margin: 0 auto; border-radius: 50%; position: relative; }
#light::after { content:""; width: 60px; height: 60px; background-color:#fff ; position : absolute ; top : 50% ; left : 50% ; margin : -30px 0 0 -30px ; border-radius : 50% ; box-shadow : 0 3px 6px rgba(0 ,0 ,0 , .3) inset ; }
#light div { width : 100% ; height : 100% ; position : absolute ; top : 0 ; left : 0;}
#btn { display: block; width: 200px; margin: 20px auto;}
</style>
<!-- Javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"> // 添加jQuery库文件 $(document).ready(function(){ // DOM加载完成后执行的函数 // 生成随机背景色并将其添加到div#light中 $('#light').css("backgroundColor", randomColor()); // 生成随机背景色函数 function randomColor(){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math
免责声明:
以上内容除特别注明外均来源于网友提问,创作工场回答,未经许可,严谨转载。