博客

1. 第一个html页面

<input type="button" id="btn" value="点我进入第二个页面">
<b id="b1"></b>/<b id="b2"></b>
<script src="js/jquery.min.js"></script>
<script>
	$(funcation(){
		//创建变量b1、b2
		var b1;
		var b2;
		//获取url
		var searchParams=new URLSearchParams(window.location.href);
		//判断url中是否有b2这个请求参数名
		if(isNaN(parseInt(searchParams.get("b2")))){
		//没有就赋值为0
			b1=0;
			b2=0;
		}else{
		//有就将请求中值赋给变量
			b1=parseInt(searchParams.get("b1"));
			b2=parseInt(searchParams.get("b2"));
		}
		//在页面中显示变量
		$("#b1").html(b1);
		$("#b2"),html(b2);
		//按钮的单击函数
		$("#btn").click(funcation(){
			//点击一次，b2增加1
			b2++;
			//更新显示
			$("#b2").html(b2);
			//跳转到第二个html页面
			window.location.href="html2.html?b1="+b1+"&b2="+b2;
		});
	});
</script>

2. 第二个html页面

<input type="button" id="btn" value="点我进入第一个页面">
<b id="b1"></b>/<b id="b2"></b>
<script src="js/jquery.min.js"></script>
<script>
	$(funcation(){
		//获取url
		var searchParams=new URLSearchParams(window.location.href);
		//创建并初始化变量
		var b1=parseInt(searchParams.get("b1"));
		var b2=parseInt(searchParams.get("b2"));
		//显示变量
		$("#b1").html(b1);
		$("#b2"),html(b2);
		//按钮单击函数
		$("#btn").click(funcation(){
			//单击一次，b1自增1
			b1++;
			//显示更新
			$("#b1").html(b1);
			//跳转到第一个html页面
			window.location.href="html1.html?b1="+b1+"&b2="+b2;
		});
	});
</script>

3. 反思


以上可以实现类似浏览投票计数的效果（ps：因为有朋友问如果要实现浏览投票效果，但只用html和js怎么实现，于是查到了这种方式），网页之间交互数据的方式非常多，但如果要实现浏览投票计数的话，这种方式不免太过繁琐不便，结合后端实现这样的效果会更加容易些