JS通过WebSocket实现双屏信息同步显示

最新推荐文章于 2023-09-12 20:30:00 发布

weixin_50392410

最新推荐文章于 2023-09-12 20:30:00 发布

阅读量1.7k

点赞数

文章标签： js html css c++

本文链接：https://blog.csdn.net/weixin_50392410/article/details/108265027

版权

**JS通过WebSocket实现双屏信息同步显示**最近项目里有个新的小需求，就是主机打开一个网页Demo，连接的安卓设备打开同一个网页Demo，两个页面是一样的，简单来说就是一个网页Demo打开两个页面A和B，在页面A中操作什么页面B中就显示什么，反之亦然。JS代码<!DOCTYPE html><html> <head> <title>测试网页</title> <meta http-equiv="Content-

摘要由CSDN通过智能技术生成

JS通过WebSocket实现双屏信息同步显示

最近项目里有个新的小需求，就是主机打开一个网页Demo，连接的安卓设备打开同一个网页Demo，两个页面是一样的，简单来说就是一个网页Demo打开两个页面A和B，在页面A中操作什么页面B中就显示什么，反之亦然。

JS代码

<!DOCTYPE html>
<html>

	<head>
		<title>测试网页</title>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<style>
			.book-main {
   
			  padding: 20px 30px;
			  text-align: center;
			}
			.book-main .title {
   
			  font-size: 18px;
			  font-weight: 600;
			}
			.book-main .v-name {
   
			  font-size: 16px;
			  font-weight: 600;
			  padding: 10px 0 15px 0;
			}
			.book-main .inoculant-info-box {
   
			  font-size: 16px;
			  font-weight: 600;
			  text-align: left;
			  padding-left: 2em;
			}
			.inoculant-info-box > div {
   
			  display: inline-block;
			  margin-right: 50px;
			}
			.book-main .content {
   
			  text-align: left;
			  line-height: 24px;
			}
			.book-main .content h3 {
   
			  margin: 0;
			  font-size: 16px;
			}
			.content .con-box {
   
			  font-size: 16px;
			  border: 1px solid #000;
			  margin: 15px 0;
			  padding: 10px;
			}
			.autograph-con .name {
   
			  display: inline-block;
			  min-width: 120px;
			  border-bottom: 1px solid #000;
			  height: 50px;
			  line-height: 0;
			  vertical-align: bottom;
			}
			.autograph-con .name img {
   
			  height: 60px;
			  width: auto;
			}
			.autograph-con .date {
   
			  display: inline-block;
			  margin-top: 15px;
			}
			
			.footer-autograph {
   
			  margin-top: 20px;
			  border-top: 2px solid #0abf92;
			  padding-top: 20px;
			}
			.health-table {
   
			  width: 100%;
			  border: 1px solid #000;
			  border-collapse: collapse;
			  text-align: center;
			}
			.health-table th,
			.health-table td {
   
			  border: 1px solid #000;
			  padding: 4px 10px;
			}
			.health-table tr td:first-child {
   
			  text-align: left;
			}
			.health-table td .radio {
   
			  display: inline-block;
			  width: 100%;
			}
			.radio .el-icon {
   
			  display: inline-block;
			  width: 14px;
			  height: 14px;
			  background-color: #fff;
			  border: 1px solid #a1a2a2;
			  position: relative;
			  margin-left: 8px;
			  z-index: 1;
			  font-size: 14px;
			  vertical-align: middle;
			}
			.radio .el-icon-check {
   
			  background-color: #409eff;
			  color: #fff;
			  border: 1px solid #409eff;
			}
			
			.propose-con {
   
			  font-size: 16px;
			  font-weight: 600;
			  padding: 8px 0 0 0;
			}
			.propose-con label {
   
			  margin-right: 20px;
			}
			.sign-wrapper {
   
			  position: fixed;
			  width: 100%;
			  height: 100%;
			  top: 0;
			  left: 0;
			  background: #fff;
			  z-index: 999;
			}
			.sign-main .sign-title {
   
			  position: absolute;
			  width: 80%;
			  height: 36px;
			  top: 15px;
			  left: 10%;
			  background: #32b16c;
			  border-radius: 18px;
			  color: #fff;
			  font-size: 20px;
			  line-height: 36px;
			  text-align: center;
			}
			.sign-footer {
   
			  background: #fff;
			}
			.remark-input {
   
			  display: inline-block;
			  height: 28px;
			  border: 1px solid #ddd;
			}
		</style>
	</head>

	<body>
		<div id="mContent">
			<div class="book-main book-main-health" id="healthShow">
				<div class="title">XXXXXXXXXX</div>
				<div class="content">
					<div class="con" style="text-indent: 2em;">XXXXXXXXXXXXX</div>
					<table class="health-table" id="healthTable">
					</table>
					<div class="con">
						<div class="propose-con">
							<table class="health-table">
								<tr>
									<th width="55%">情况</th>
									<th width="25%" colspan="2">是或否</th>
									<th width="20%">备注</th>
								</tr>
								<tr>
									<td>1.XXXXX？ </td>
									<td>
										<label class="radio"><span>是</span>
											<input type="radio" name="radio1" id="radio_1_1" value="1" onchange="healthAnswer()">
										</label>
									</td>
									<td>
										<label class="radio"><span>否</span>
											<input type="radio" name="radio1" id="radio_1_2" value="0" onchange="healthAnswer()">
										</label>
									</td>
									<td><input type="text" class="remark-input" id="text_1" onchange="healthAnswer()"></td

最低0.47元/天解锁文章

weixin_50392410

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS通过WebSocket实现双屏信息同步显示

**JS通过WebSocket实现双屏信息同步显示**最近项目里有个新的小需求，就是主机打开一个网页Demo，连接的安卓设备打开同一个网页Demo，两个页面是一样的，简单来说就是一个网页Demo打开两个页面A和B，在页面A中操作什么页面B中就显示什么，反之亦然。JS代码<!DOCTYPE html><html> <head> <title>测试网页</title> <meta http-equiv="Content-
复制链接

扫一扫