jQuery 实时汇率转换 悬浮层

本文介绍了一个利用jQuery技术创建的实时汇率转换功能,该功能以悬浮层的形式展示,可以方便用户快速进行货币之间的换算。通过对接汇率API,实现了汇率的实时更新,提升了用户体验。
摘要由CSDN通过智能技术生成


  <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <style type="text/css">  
        #test{ position: fixed; height:auto; width:210px; background:#A2D516;color:White;font-size:15px;padding:10px 10px 10px 10px;}  
        #Search { cursor:pointer;}        
        #content{position: fixed;right:0px; top:35%; width: 243px;}
    </style>

 <script language="javascript" type="text/javascript" >
        //悬浮层跟随鼠标滚动而移动
        $(function () {
            //悬浮层跟随鼠标滚动而移动
            //                var menuYloc = $("#content").offset().top;
            //                $(window).scroll(function () {
            //                    var offsetTop = menuYloc + $(window).scrollTop() + "px";
            //                    $("#content").animate({ top: offsetTop }, { duration: 600, queue: false });
            //                });

            //点击收起、展开
            $("#pic2").click(function () {
                $("#test").animate({ right: "-300px" }, 500);
                $("#pic2").css("display", "none");
                $("#pic1").css("display", "block");
            });
            $("#pic1").click(function () {
                $("#test").animate({ right: "0px" }, 500).css("margin", "14px");
                $("#pic1").css("display", "none");
                $("#pic2").css("display", "block");
            });

            //根据选定的下拉框值绑定币种单位
            //初始绑定
            var unit = $("#to").find("option:selected").html();
            var units = unit.split(' ')[0];
           // $("#unit").html(units);   //绑定每个选中的下拉框所示的单位,若不需要这种方法绑定,可以注释掉
            //改变
            $("#to").change(function () {
                //截取币种单位
                var unit = $(this).find("option:selected").html();
                var units = unit.split(' ')[0];
                $("#unit").html(units);
            });

//            //查询事件(1)
//            $("#Search").click(function () {

//                var option1 = $("#from").val();
//                var option2 = $("#to").val();
//                var money = $("#num").val();
//                var url = window.location.href + "?from=" + option1 + "&to=" + option2 + "&money=" + money;
//                var htmlobj = $.ajax({ url: url, async: false });
//                var result = htmlobj.responseText;
//                var newHuilv = $(result).find("#Hui").html();
//                //绑定汇率 div的值
               $("#Hui").html(newHuilv);

//                var endResult = parseFloat(newHuilv) * parseFloat(money);
//                $("#lblResult").val(endResult);

            //            });

            //查询事件(2)
            $("#Search").click(function () {
                var option1 = $("#from").val();
                var option2 = $("#to").val();
                var money = $("#num").val();
                var url = "/computer.aspx/" + "?from=" + option1 + "&to=" + option2 + "&money=" + money;

                $.ajax({
                    url: url,
                    success: function (data) {
                        var result = data.substr(0, data.indexOf("<"));
                        var huilv = parseFloat(result);
                        if (isNaN(huilv)) {
                            alert(result);
                        } else {
                            $("#lblResult").val((huilv * money).toFixed(2)  +  “   ” + option2);    //在转换后的结果后面直接加上单位,而不是在后面的标签上绑定
                        }
                    },
                    error: function () {
                        $("#lblResult").val("")
                    }
                });
            });
        });
    </script>


说明:查询事件(1)和查询事件(2)效果是一样的,只是第二种写法更有效、更安全,主要用了  $.ajax();

</pre><pre name="code" class="html"><div></div>



HTML代码:
 <div>
        <!--  DateTime:2014-06-10  Start -->
        <div runat="server" id="Hui"></div>
        <div id="content">
            <!--汇率 兑换-->
            <div id="test">
                <select style="width: 200px; background-color: #e9f8d7" size="1" name="from" id="from">
                    <optgroup style="color: #000; background-color: #fff" label="常用货币">
                        <option value="CNY">人民币 Chinese Yuan Renminbi . CNY</option>
                        <option value="HKD">港元 Hong Kong Dollar . HKD</option>
                        <option value="TWD">台币 Taiwan Dollar . TWD</option>
                        <option value="EUR">欧元 Euro . EUR</option>
                        <option value="USD">美元 US Dollar . USD</option>
                        <option value="GBP">英镑 British Pound . GBP</option>
                        <option value="AUD" selected>澳元 Australian Dollar . AUD</option>
                        <option value="KRW">韩元 South-Korean Won . KRW</option>
                        <option value="JPY">日元 Japanese Yen . JPY</option>
                    </optgroup>
                    <optgroup style="color: #000; background-color: #fff" label="A">
                        <option value="ALL">阿尔巴尼亚列克 Albanian Lek . ALL</option>
                        <option value="DZD">阿尔及利亚第纳尔 Algerian Dinar . DZD</option>
                        <option value="ARS">阿根廷比索 Argentine Peso . ARS</option>
                        <option value="AWG">阿鲁巴岛弗罗林 Aruba Florin . AWG</option>
                        <option value="AUD">澳元 Australian Dollar . AUD</option>
                        <option value="EGP">埃及镑 Egyptian Pound . EGP</option>
                        <option value="EEK">爱沙尼亚克伦尼 Estonian Kroon . EEK</option>
                        <option value="ETB">埃塞俄比亚比尔 Ethiopian Birr . ETB</option>
                        <option value="MOP">澳门元 Macau Pataca . MOP</option>
                        <option value="OMR">阿曼里亚尔 Omani Rial . OMR</option>
                        <option value="AED">阿联酋迪拉姆 UAE Dirham . AED</option>
                    </optgroup>
                    <optgroup style="color: #000; background-color: #fff" label="B">
                        <option value="BSD">巴哈马元 Bahamian Dollar . BSD</option>
                        <option value="BHD">巴林第纳尔 Bahraini Dinar . BHD</option>
                        <option value="BBD">巴巴多斯元 Barbados Dollar . BBD</option>
                        <option value="BYR">白俄罗斯卢布 Belarus Ruble . BYR</option>
                        <option value="BZD">伯利兹元 Belize Dollar . BZD</option>
                        <option value="BMD">百慕大元 Bermuda Dollar . BMD</option>
                        <option value="BTN">不丹卢比 Bhutan Ngultrum . BTN</option>
                        <option value="BOB">玻利维亚诺 Bolivian Boliviano . BOB</option>
                        <option value="BWP">博茨瓦纳普拉 Botswana Pula . BWP</option>
                        <option value="BRL">巴西里亚伊 Brazilian Real . BRL</option>
                        <option value="BGN">保加利亚列瓦 Bulgarian Lev . BGN</option>
                        <option value="BIF">布隆迪法郎 Burundi Franc . BIF</option>
                        <option value="ISK">冰岛克朗 Iceland Krona . ISK</option>
                        <option value="PKR">巴基斯坦卢比 Pakistani Rupee . PKR</option>
                        <option value="PAB">巴拿马巴尔博亚 Panama Balboa . PAB</option>
                        <option value="PGK">巴布亚新几内亚基那 Papua New Guinea Kina . PGK</option>
                        <option value="PYG">巴拉圭瓜拉尼 Paraguayan Guarani . PYG</option>
                        <option value="PLN">波兰兹罗提 Polish Zloty . PLN</option>
                    </optgroup>
                    <optgroup style="color: #000; background-color: #fff" label="C">
                        <option value="KPW">朝鲜圆 North Korean Won . KPW</option>
                    </optgroup>
                    <optgroup style="color: #000; background-color: #fff" label="D">
                        <option value="XOF">多哥非洲共同体法郎 CFA Franc BCEAO . XOF</option>
                        <option value="DKK">丹麦克朗 Danish Krone . DKK<
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值