javascript - js两个页面值累加
本文介绍了javascript - js两个页面值累加的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
A页面点击输入投资金额点击确定按钮后，增加B页面的投资金额所占比例。
进度条用的jqmeter.js 插件：
赋值粘贴下面的代码
B页面代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery简单实用的轻量级进度条插件</title>
<style type="text/css">
*{padding:0; margin:0;}
h1{text-align:center; margin:60px auto 20px;}
.box{width:700px; margin:0 auto;}
</style>
<script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jqmeter.min.js"></script>
<script type="text/javascript">
$(function(){
$('.jqmeter-container').jQMeter({
goal:'$3,000',
raised:'$1800',
width:'300px',
height:'30px'
});
});
</script>
</head>
<body>
<div class="box">
<div class="jqmeter-container"></div>
</div>
</body>
</html>
A页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="number" id="input">
<!-- 点击投资提示投资成功.. 再次浏览B页面增加百分比状态 -->
<a href="#" id="submit">投资</a>
</body>
</html>解决方案
这涉及两个页面之间的通信了。可以使用loaclStorage保存数据， 通过setInterval()循环查询
A页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A</title>
</head>
<body>
<input type="number" id="input">
<!-- 点击投资提示投资成功.. 再次浏览B页面增加百分比状态 -->
<a href="javascript:;" id="submit">投资</a>
<script type="text/javascript">
var num = document.getElementById("input");
var submit = document.getElementById("submit");
submit.onclick = function(){
window.localStorage.setItem("raisedNum",num.value);
};
</script>
</body>
</html>B页面：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>B|jQuery简单实用的轻量级进度条插件</title>
<style type="text/css">
*{padding:0; margin:0;}
h1{text-align:center; margin:60px auto 20px;}
.box{width:700px; margin:0 auto;}
</style>
<script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.gerardolarios.com/plugins-and-tools/jqmeter/js/jqmeter.min.js"></script>
<script type="text/javascript">
$(function(){
//循环定时1秒获取localStorage中的数据
var raised = 0;
setInterval(function(){
var num = window.localStorage.getItem("raisedNum");
if(raised !== num){
jqmeter(num);
}
raised = num;
},1000);
function jqmeter(raised){
$('.jqmeter-container').jQMeter({
goal:'$3,000',
raised:'$'+raised,
width:'300px',
height:'30px'
});
}
});
</script>
</head>
<body>
<div class="box">
<div class="jqmeter-container"></div>
</div>
</body>
</html>看看是不是你想要的效果
这篇关于javascript - js两个页面值累加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
