js两个页面值累加

asdfgh
  • 104

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>
回复
阅读 2.5k
1 个回答
✓ 已被采纳

这涉及两个页面之间的通信了。可以使用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>

看看是不是你想要的效果

你知道吗?

宣传栏