基于webserver的工业数据采集项目源代码

通过浏览器，实现Modbus Slave端数据采集和设备控制

数据采集函数

#include <stdio.h>
#include <sys/types.h>
#include <sys/socket.h>
#include <netinet/in.h>
#include <netinet/ip.h>
#include <arpa/inet.h>
#include <unistd.h>
#include <stdlib.h>
#include <string.h>
#include <modbus.h>
#include <pthread.h>
#include <sys/ipc.h>
#include <sys/shm.h>
#include <errno.h>
#include <sys/msg.h>

#define N 1024      //共享内存空间
int ret;            //函数返回值
uint16_t buf[32];   //读取保持寄存器值
uint8_t set[32];    //设置线圈寄存器
modbus_t *sensor;   //传感器实例
modbus_t *hardware; //硬件实例
// char c[2];          //00:led关 01:led 开 10: 蜂鸣器关 11:蜂鸣器开
//消息队列结构体
typedef struct msgbuf
{
    long mytype;  //消息类型
    char buf[32]; //消息数据内容
} msg_t;
int msgid;
void *mythread(void *arg)
{
    while (1)
    {
        //读取消息队列
        msg_t msg_read;                                                                //读取到的消息
        msgrcv(msgid, &msg_read, sizeof(msg_read) - sizeof(long), 0, 0); //接收队列中的第一个消息
        printf("%s\n", msg_read.buf);
        if (msg_read.buf[0] == '0' && msg_read.buf[1] == '0')
        {
            ret = modbus_write_bit(hardware, 0, 0); //关闭LED
            break;
        }
        else if (msg_read.buf[0] == '0' && msg_read.buf[1] == '1')
        {
            ret = modbus_write_bit(hardware, 0, 1); //打开LED
        }
        else if (msg_read.buf[0] == '1' && msg_read.buf[1] == '0')
        {
            ret = modbus_write_bit(hardware, 1, 0); //关闭蜂鸣器
        }
        else if (msg_read.buf[0] == '1' && msg_read.buf[1] == '1')
        {
            ret = modbus_write_bit(hardware, 1, 1); //打开蜂鸣器
        }
    }
    // pthread_exit(NULL);
}
int main(int argc, char const *argv[])
{
    key_t key = ftok("./a.txt", 'a');                        //产生一个key值
    int shmid = shmget(key, N, IPC_CREAT | IPC_EXCL | 0777); //创建或打开共享内存
    if (shmid < 0)
    {
        if (errno == EEXIST)
        {
            printf("shmget eexist\n"); //已创建
            shmid = shmget(key, N, 0777);
        }
        else
        {
            perror("shmget err.");
            return -1;
        }
    }
    //映射共享内存
    char *p = (char *)shmat(shmid, NULL, 0666);
    if (p == (void *)-1)
    {
        perror("shmat err.");
        return -1;
    }
    //创建key值
    key_t key2 = ftok("./a.txt", 'b');
    //创建或打开消息队列
    msgid = msgget(key2, IPC_CREAT | IPC_EXCL | 0666);
    if (msgid < 0)
    {
        if (errno == EEXIST)
        {
            printf("msgget eexist\n"); //已创建
            msgid = msgget(key2, 0666);
        }
        else
        {
            perror("msgget err.");
            return -1;
        }
    }
    // 1.创建实例 modbus_new_tcp,端口号字符型转整型
    //设置传感器读取
    sensor = modbus_new_tcp(argv[1], atoi(argv[2]));
    // 2.设置从机id modbus_set_slave,连接
    ret = modbus_set_slave(sensor, 1);
    if (ret < 0)
    {
        printf("set err\n");
    }
    // 3.建立连接 modbus_connect
    ret = modbus_connect(sensor);
    if (ret < 0)
    {
        printf("connect err.\n");
    }
    //硬件设置
    hardware = modbus_new_tcp(argv[1], atoi(argv[2]));
    ret = modbus_set_slave(hardware, 2);
    if (ret < 0)
    {
        printf("set err\n");
    }
    ret = modbus_connect(hardware);
    if (ret < 0)
    {
        printf("connect err.\n");
    }
    char data[128];
    // 4.寄存器操作
    pthread_t tid; //创建一个线程
    pthread_create(&tid, NULL, mythread, NULL);
    pthread_detach(tid);
    while (1)
    {
        sleep(1);
        //4.从0开始读四个寄存器值. 0:光线传感器 1:加速度传感器 X 2:加速度传感器 Y 3:加速度传感器 Z
        ret = modbus_read_registers(sensor, 0, 4, buf);
        //将从设备读取的内容定向输出到共享内存中
        sprintf(data, "%d\n%d\n%d\n%d\n", buf[0], buf[1], buf[2], buf[3]);
        strcpy(p, data);
        printf("%s", p);
        putchar(10);
    }
    //取消映射
    shmdt(p);
    //删除映射
    shmctl(shmid, IPC_RMID, NULL);
    // 5.关闭套接字 modbus_close,先关闭套接字,再释放实例
    modbus_close(sensor);
    modbus_close(hardware);
    // 6.释放实例 modbus_free
    modbus_free(sensor);
    modbus_free(hardware);
    return 0;
}

主函数

#include"thttpd.h"
#include <sys/types.h>
#include <sys/wait.h>

static void* msg_request(void *arg)
{
	//这里客户端描述符通过参数传进来了
	int sock=(int)arg;
	// int sock = *(int *)arg;一致

	// 一般情况下，线程终止后，其终止状态一直保留到其它线程调用pthread_join获取它的状态为止。
	//但是线程也可以被置为detach状态，这样的线程一旦终止就立刻回收它占用的所有资源，而不保留终止状态。
	pthread_detach(pthread_self());	

	//handler_msg作为所有的请求处理入口
	return (void*)handler_msg(sock);
}

int main(int argc,char* argv[])
{
	//如果不传递端口，那么使用默认端口80
	int port = 80;

	if(argc > 1)
	{
		port = atoi(argv[1]);
	}

	//初始化服务器
	int lis_sock=init_server(port);

	while(1)
	{
		struct sockaddr_in peer;
		socklen_t len=sizeof(peer);
		
		int sock=accept(lis_sock,(struct sockaddr*)&peer,&len);
		
		if(sock<0)
		{
			perror("accept failed");
			continue;
		}
		printf("accept 0k\n");
		
		//每次接收一个链接后，会自动创建一个线程，这实际上就是线程服务器模型的应用
		pthread_t tid;
		if(pthread_create(&tid,NULL,msg_request,(void*)sock)>0)
		{
			perror("pthread_create failed");
			close(sock);
		}
	}
	return 0;
}

函数库

#include "thttpd.h"
#include "custom_handle.h"
#include <sys/types.h>
#include <sys/wait.h>
#include <ctype.h>

int init_server(int _port) //创建监听套接字
{
	int sock=socket(AF_INET,SOCK_STREAM,0);
	if(sock<0)
	{
		perror("socket failed");
		exit(2);
	}

	//设置地址重用
	int opt=1;                     
	setsockopt(sock,SOL_SOCKET,SO_REUSEADDR,&opt,sizeof(opt));

	struct sockaddr_in local;
	local.sin_family=AF_INET;
	local.sin_port=htons(_port);
	local.sin_addr.s_addr=INADDR_ANY;
	
	if(bind(sock,(struct sockaddr*)&local,sizeof(local))<0)
	{
		perror("bind failed");
		exit(3);
	}

	if(listen(sock,5)<0)
	{
		perror("listen failed");
		exit(4);
	}

	return sock;
}
//从套接字中按行读取请求报头，并将数据存储在缓冲区 buf 中。返回读取的字符数。
static int get_line(int sock,char* buf)   
{
	char ch='\0';
	int i=0;
	ssize_t ret=0;
	while(i<SIZE && ch!='\n')
	{
		ret=recv(sock,&ch,1,0);
		if(ret>0&&ch=='\r')
		{
			ssize_t s=recv(sock,&ch,1,MSG_PEEK);
			if(s>0&&ch=='\n')
			{
				recv(sock,&ch,1,0);
			}
			else
			{
				ch='\n';
			}
		}
		buf[i++]=ch;
	}
	buf[i]='\0';
	return i;
}

//清空请求报头，读取并忽略报头内容，直到遇到两个连续的换行符（表示报头结束）为止。
static void clear_header(int sock)    //清空消息报头
{
	char buf[SIZE];
	int ret=0;
	do
	{
		ret=get_line(sock,buf);
	}while(ret!=1&&(strcmp(buf,"\n")!=0));
}

//处理 404 错误，即请求的资源未找到。发送 404 状态码和错误页面给客户端。
static void show_404(int sock)      //404错误处理
{
	clear_header(sock);
	char* msg="HTTP/1.0 404	Not Found\r\n";
	send(sock,msg,strlen(msg),0);         //发送状态行
	send(sock,"\r\n",strlen("\r\n"),0);      //发送空行

	struct stat st;
	stat("wwwroot/404.html",&st);
	int fd=open("wwwroot/404.html",O_RDONLY);
	sendfile(sock,fd,NULL,st.st_size);//通过文件描述符,直接发送文件
	close(fd);
}
//根据错误码 err_code 处理不同的错误情况。当前仅实现了处理 404 错误。
void echo_error(int sock,int err_code)    //错误处理
{
	switch(err_code)
	{
	case 403:
		break;
	case 404:
		show_404(sock);
		break;
	case 405:
		break;
	case 500:
		break;
	defaut:
		break;
	}
}

//处理非 CGI 的请求，即静态资源的请求。发送状态行和请求的文件内容给客户端
static int echo_www(int sock,const char * path,size_t s)  //处理非CGI的请求
{
	int fd=open(path,O_RDONLY);
	if(fd<0)
	{
		echo_error(sock,403);
		return 7;
	}
	char* msg="HTTP/1.0 200 OK\r\n";//发送 HTTP 响应的状态行给客户端，表示请求成功（200 OK）。
	send(sock,msg,strlen(msg),0);         //发送状态行
	send(sock,"\r\n",strlen("\r\n"),0);      //发送一个空行，表示响应报头结束。
	//sendfile方法可以直接把文件发送到网络对端
	if(sendfile(sock,fd,NULL,s)<0)
	{
		echo_error(sock,500);
		return 8;	
	}
	close(fd);
	return 0;
}

//处理请求。根据请求方法和路径，判断是否需要自定义处理（如 POST 请求或带有参数的 GET 请求），调用相应的处理函数。
static int handle_request(int sock,const char* method,
		const char* path,const char* query_string)
{
	char line[SIZE];
	int ret=0;
	int content_len=-1;
	if(strcasecmp(method,"GET")==0)
	{
		//清空消息报头
		clear_header(sock);
	}
	else
	{
		//获取post方法的参数大小
		do
		{
			ret=get_line(sock,line);
			if(strncasecmp(line,"content-length",14)==0)  //post的消息体记录正文长度的字段
			{
				content_len=atoi(line+16);	//求出正文的长度
			}
		}while(ret!=1&&(strcmp(line,"\n")!=0));
	}
	printf("method = %s\n", method);
	printf("query_string = %s\n", query_string);
	printf("content_len = %d\n", content_len);

	char req_buf[4096] = {0};

	//如果是POST方法，那么肯定携带请求数据，那么需要把数据解析出来
	if(strcasecmp(method,"POST")==0)
	{
		int len = recv(sock, req_buf, content_len, 0);
		printf("len = %d\n", len);
		printf("req_buf = %s\n", req_buf);
	}

	//先发送状态码
	char* msg="HTTP/1.1 200 OK\r\n\r\n";
	send(sock,msg,strlen(msg),0);

	//请求交给自定义代码来处理，这是业务逻辑
	parse_and_process(sock, query_string, req_buf);

	return 0;
}

//浏览器请求处理函数。根据请求方法和路径，决定使用自定义处理函数还是发送静态资源内容给客户端。
int handler_msg(int sock)       //浏览器请求处理函数
{
	char del_buf[SIZE] = {};

	//通常recv()函数的最后一个参数为0，代表从缓冲区取走数据
	//而当为MSG_PEEK时代表只是查看数据，而不取走数据。缓存区还有数据
	recv(sock,del_buf,SIZE,MSG_PEEK);

#if 1 //初学者强烈建议打开这个开关，看看tcp实际请求的协议格式
	puts("-------------------1--------------------");
	printf("recv:%s\n",del_buf);
	puts("-------------------2--------------------");
#endif

	//接下来method方法判断之前的代码，可以不用重点关注
	//知道是处理字符串，把需要的信息过滤出来即可
	char buf[SIZE];//用于接收从客户端接收的数据
	int count=get_line(sock,buf);//存储从客户端读取的行的长度
	int ret=0;//存储函数执行的返回值
	char method[32];//存储HTTP的请求方法
	char url[SIZE];//存储请求资源的路径
	char *query_string=NULL;//存储请求的参数字符串
	int i=0;
	int j=0;
	int need_handle=0;//用于判断是否需要自己处理请求
	//获取请求方法和请求路径
	while(j<count)
	{
		if(isspace(buf[j]))
		{
			break;
		}
		method[i]=buf[j];	
		i++;
		j++;
	}
	method[i]='\0';
	while(isspace(buf[j])&&j<SIZE)//过滤空格
	{
		j++;
	}

	//这里开始就开始判断发过来的请求是GET还是POST了
	//strcasecmp与strcmp用法相同,但前者不区分大小写
	//既不是post也不是get则成立
	if(strcasecmp(method,"POST")&&strcasecmp(method,"GET"))
	{
		printf("method failed no POST or GET\n");  //如果都不是，那么提示一下
		echo_error(sock,405);
		ret=5;
		goto end;
	}

	if(strcasecmp(method,"POST")==0)
	{
		need_handle=1;
	}	
	
	i=0;
	//获取请求路径url,参数
	while(j<count)
	{
		if(isspace(buf[j]))
		{
			break;
		}
		if(buf[j]=='?')
		{
			//将资源路径（和附带数据，如果有的话）保存再url中，并且query_string指向附带数据
			query_string=&url[i];
			query_string++;
			url[i]='\0';
		}
		else{
			url[i]=buf[j];
		}
		j++;
		i++;
	}
	url[i]='\0';
	printf("query_string = %s\n", query_string);
	//浏览器通过http://192.168.8.208:8080/?test=1234这种形式请求
	//是携带参数的意思，那么就需要额外处理了
	if(strcasecmp(method,"GET")==0&&query_string!=NULL)
	{
		need_handle=1;
	}
	//我们把请求资源的路径固定为wwwroot/下的资源，这个自己可以改
	char path[SIZE];
	sprintf(path,"wwwroot%s",url);       
	printf("path = %s\n", path);
	
	//如果请求地址没有携带任何资源，那么默认返回index.html
	if(path[strlen(path)-1]=='/')              //判断浏览器请求的是不是目录
	{
		strcat(path,"index.html");	     //如果请求的是目录，则就把该目录下的首页返回回去
	}
	//如果请求的资源不存在，就要返回传说中的404页面了
	struct stat st;   
	if(stat(path,&st)<0)            //获取客户端请求的资源的相关属性(判断文件是否存在)
	{
		printf("未找到该文件\n");
		echo_error(sock,404);
		ret=6;
		goto end;
	}

	//到这里基本就能确定是否需要自己的程序来处理后续请求了
	printf("需要处理请求-need progress handle:%d\n",need_handle);

	//如果是POST请求或者带参数的GET请求，就需要我们自己来处理了
	//这些是业务逻辑，所以需要我们自己写代码来决定怎么处理
	//如果有POST 或GET 请求则 need_handle置1,表示需要处理

	if(need_handle)
	{
		ret=handle_request(sock,method,path,query_string);
	}
	else
	{
		clear_header(sock);
		//如果是GET方法，而且没有参数，则直接返回资源	
		ret=echo_www(sock,path,st.st_size);  
	}
	
end:
	close(sock);
	return ret;
}

数据分析函数

/***********************************************************************************

Copy right:	    hqyj Tech.

Author:         jiaoyue

Date:           2023.07.01

Description:    http请求处理

***********************************************************************************/



#include <sys/types.h>

#include <sys/socket.h>

#include "custom_handle.h"

#include <sys/ipc.h>

#include <sys/shm.h>

#include <errno.h>

#include <sys/msg.h>

#define N 1024

#define KB 1024

#define HTML_SIZE (64 * KB)



//普通的文本回复需要增加html头部

#define HTML_HEAD "Content-Type: text/html\r\n" \

                  "Connection: close\r\n"

typedef struct msgbuf

{

    long mytype;  //消息类型

    char buf[32]; //消息数据内容

} msg_t;

//处理登录请求。从输入中提取用户名和密码，并进行验证。根据验证结果发送相应的响应给客户端。

static int handle_login(int sock, const char *input)

{

    char reply_buf[HTML_SIZE] = {0};

    char *uname = strstr(input, "username=");

    uname += strlen("username=");

    char *p = strstr(input, "password");

    *(p - 1) = '\0';

    printf("用户名username = %s\n", uname);

    printf("connect err.\n");



    char *passwd = p + strlen("password=");

    printf("用户密码passwd = %s\n", passwd);



    if (strcmp(uname, "admin") == 0 && strcmp(passwd, "admin") == 0)

    {

        sprintf(reply_buf, "<script>localStorage.setItem('usr_user_name', '%s');</script>", uname);

        strcat(reply_buf, "<script>window.location.href = '/index.html';</script>");

        send(sock, reply_buf, strlen(reply_buf), 0);

    }

    else

    {

        printf("web login failed\n");



        //"用户名或密码错误"提示，chrome浏览器直接输送utf-8字符流乱码，没有找到太好解决方案，先过渡

        char out[128] = {0xd3, 0xc3, 0xbb, 0xa7, 0xc3, 0xfb, 0xbb, 0xf2, 0xc3, 0xdc, 0xc2, 0xeb, 0xb4, 0xed, 0xce, 0xf3};

        sprintf(reply_buf, "<script charset='gb2312'>alert('%s');</script>", out);

        strcat(reply_buf, "<script>window.location.href = '/login.html';</script>");

        send(sock, reply_buf, strlen(reply_buf), 0);

    }



    return 0;

}

//处理求和请求。从输入中提取两个数值，并计算它们的和。将计算结果作为响应发送给客户端。

static int handle_add(int sock, const char *input)

{

    int number1, number2;



    //input必须是"data1=1data2=6"类似的格式，注意前端过来的字符串会有双引号

    sscanf(input, "\"data1=%ddata2=%d\"", &number1, &number2);

    printf("num1 = %d\n", number1);



    char reply_buf[HTML_SIZE] = {0};

    printf("num = %d\n", number1 + number2);

    sprintf(reply_buf, "%d", number1 + number2);

    printf("resp = %s\n", reply_buf);

    send(sock, reply_buf, strlen(reply_buf), 0);



    return 0;

}



//处理获取设备数据请求

static int handle_get(int sock, const char *input)

{

    key_t key = ftok("./a.txt", 'a');                        //产生一个key值

    int shmid = shmget(key, N, IPC_CREAT | IPC_EXCL | 0777); //创建或打开共享内存

    if (shmid < 0)

    {

        if (errno == EEXIST)

        {

            printf("shmget eexist\n"); //已创建

            shmid = shmget(key, N, 0777);

        }

        else

        {

            perror("shmget err.");

            return -1;

        }

    }

    //映射共享内存

    char *p = (char *)shmat(shmid, NULL, 0666);

    if (p == (void *)-1)

    {

        perror("shmat err.");

        return -1;

    }

    char reply_buf[HTML_SIZE] = {0};

    send(sock, p, strlen(p), 0);

    return 0;

}

//处理控制设备数据请求

static int handle_post(int sock, const char *input)

{

    msg_t ctl;

    //创建key值

    key_t key2 = ftok("./a.txt", 'b');

    //创建或打开消息队列

    int msgid = msgget(key2, IPC_CREAT | IPC_EXCL | 0666);

    if (msgid < 0)

    {

        if (errno == EEXIST)

        {

            printf("msgget eexist\n"); //已创建

            msgid = msgget(key2, 0666);

        }

        else

        {

            perror("msgget err.");

            return -1;

        }

    }

    char reply_buf[HTML_SIZE] = {0};

    //分离请求内容为post

    char *post = strstr(input, "post");

    char *p = strstr(input, "change=");

    *(p - 1) = '\0';

    printf("请求 = %s\n", post);

    //分离控制内容为 *change

    char *change = p + strlen("change=");

    *(change+2)='\0';

    printf("操作change = %s\n", change);

    //设置消息类型为1

    ctl.mytype = 1;

    //将控制信号放入到消息数据中

    strcpy(ctl.buf, change);

    printf("消息内容为:%s\n",ctl.buf);

    //将控制消息发送到消息队列中

    msgsnd(msgid, &ctl, sizeof(ctl) - sizeof(long), 0);

    sprintf(reply_buf, "<script>localStorage.setItem('usr_user_name', '%s');</script>", post);

    strcat(reply_buf, "<script>window.location.href = '/index.html';</script>");

    send(sock, reply_buf, strlen(reply_buf), 0);

    //删除消息队列

    // msgctl(msgid,IPC_RMID,NULL);

    return 0;

}

/**

 * @brief 处理自定义请求，在这里添加进程通信

 * @param input

 * @return

 */

/*解析并处理自定义请求。根据不同的请求类型（登录、求和、其他），

调用相应的处理函数进行处理。如果是其他类型的请求（如 JSON 请求），则发送示例的 JSON 响应给客户端。*/

int parse_and_process(int sock, const char *query_string, const char *input)

{

    //query_string不一定能用的到



    //先处理登录操作

    //strstr函数:从字符串Input中查找username=第一次出现的位置

    if (strstr(input, "username=") && strstr(input, "password="))

    {

        return handle_login(sock, input);

    }

    //处理求和请求

    else if (strstr(input, "data1=") && strstr(input, "data2="))

    {

        return handle_add(sock, input);

    }

    //处理get请求

    else if (strstr(input, "get"))

    {

        return handle_get(sock, input);

    }

    //处理post请求

    else if (strstr(input, "post"))

    {

        return handle_post(sock, input);

    }

    else //剩下的都是json请求，这个和协议有关了

    {

        // 构建要回复的JSON数据

        const char *json_response = "{\"message\": \"Hello, client!\"}";

        // 发送HTTP响应给客户端

        send(sock, json_response, strlen(json_response), 0);

    }



    return 0;

}

html5页面开发

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设备控制端</title>
    <script>
        function get() {
            //v不仅仅是一个变量,与数组类似
            var v = document.getElementsByName("light");
            //v[0]表示的是第一个名字为username的标签
            // v[0].value="hello";
            var xhr = new XMLHttpRequest();//新建一个对象
            var url = "";
            xhr.open("post", url, true);
            xhr.onreadystatechange = function ()//检测发生变化
            {
                //表示响应完成并且成功
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = xhr.responseText;
                    var x = response.split("\n");//将字符串以'\n'为分割分为一个字符串数组
                    console.log(x);
                    v[0].value = x[0];//响应正文
                    v[1].value = x[1];//响应正文
                    v[2].value = x[2];//响应正文
                    v[3].value = x[3];//响应正文
                }
            }
            xhr.send("get");
        }
        function fun(obj) {
            var xhr = new XMLHttpRequest();
            var url = "";
            xhr.open("POST", url, true);
            console.log(obj);
            if (obj == 'on') {
                console.log("postchange=01");
                xhr.send("postchange=01");
            }
            else if (obj == 'off') {
                console.log("postchange=00");
                xhr.send("postchange=00");
            }
        }
        function funs(obj) {
            var xhr = new XMLHttpRequest();
            var url = ""; // 设置正确的URL
            xhr.open("POST", url, true);
            if (obj == 'on') {
                console.log("postchange=11");
                xhr.send("postchange=11");
            } else if (obj == 'off') {
                console.log("postchange=10");
                xhr.send("postchange=10");
            }
        }
    </script>
</head>

<body>
    <!--块标签:可以实现区块内容属性设置-->
    <div style="color:aqua;background: darkblue;">
        <h3>设备数据控制与读取</h3>
        <p>
            实现Modbus Slave端数据采集和设备控制,可以在网页进行查询和控制设备状态.
        </p>
        get当前状态:
        <input type="button" name="flash" onclick="get()">
        </br>
        设备状态:
        </br>
        光线传感器:<input type="text" name="light">
        </br>
        加速度传感器:
        </br>
        x <input type="text" name="light">
        </br>
        y <input type="text" name="light"> 
        </br>
        z <input type="text" name="light">
        </br>
        <!--单选按钮-->
        LED: on <input type="radio" name="LED" id="on" onclick="fun(id)">
        off <input type="radio" name="LED" id="off" checked="checked" onclick="fun(id)">
        </br>
        蜂鸣器: on <input type="radio" name="fmq" id="on" onclick="funs(id)">
        off <input type="radio" name="fmq" id="off" checked="checked" onclick="funs(id)">
    </div>
</body>

</html>