jquery手机端房贷税费计算器效果代码
代码语言：html
所属分类：表单美化
代码描述：jquery手机端房贷税费计算器效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
<title>税费计算器</title>
<style>
/* @charset "utf-8"; */
/* CSS Document */
/*-----------基本样式------------*/
body{margin:0;padding:0;font:12px "宋体";line-height:22px}
form, ul, li, p, h1, h2, h3, h4, h5, h6,dl,dt,dd {margin:0;padding:0}
input{font-size:12px;line-height:18px;color:#999}
.tablist1 select {width:90%;height:28px;font-size:12px;line-height:18px;color:#999}
.tablist1 .select_width {width:60%;}
img,input {border:0 none}
ul, li {list-style-type:none}
p{text-indent:2em}
a{color:#333;text-decoration:none;blr:expression(this.onFocus=this.blur());outline:none}
a:hover{color:#ea5504}
select{appearance:none;-moz-appearance:none;-webkit-appearance:none;border:none;outline: none;}
/*-----------公用样式------------*/
.show{display:block}
.hidden{display:none}
.f3{color:#333}
.f6,.f6 a{color:#666}
.f9,.f9 a{color:#999}
.f9 a:hover{color:#ea5504}
.f63{font:bold 14px "宋体";color:#f63}
.fb{font-weight:bold}
.fea5504,.fea5504 a{color:#ea5504}
.f008000{color:#008000}
.f14,.f14 a{font-size:14px}
.white,.white a{color:#fff}
.f20{font:20px "黑体";color:#ea5504}
.f24{font:bold 24px "黑体";color:#ea5504}
.hr_1{clear:both;height:10px;overflow:hidden}
.hr_2{clear:both;height:13px}
.hr_3{width:971px;clear:both;height:11px;border-top:1px solid #f5891e}
.hr_4{clear:both;height:6px}
.hr_5{clear:both;height:15px}
.fn a{text-decoration:none}
.fl{width:100%;}
.fltab{width:100%;}
.fr{width:100%;}
.clear{clear:both;overflow:hidden}
.ftc{text-align:center}
.ftr{text-align:right}
/*.br{border:1px solid #f3a275}*/
.br2{border:1px solid #f6b693;height:1px;font-size:0;clear:both;overflow:hidden}
h1,h2,h5{font:20px "黑体";color:#ea5504;padding-left:5px}
h3{font:bold 14px "宋体";color:#ea5504;padding-left:8px;margin:7px 0 0 8px;float:left;display:inline}
h1 a,h2 a,h5 a{color:#ea5504}
.left{float:left;}
.right{float: right;}
.header{width:994px;height:78px;border-bottom:1px solid #ea5504;margin:0 auto;}
.logo{margin:31px 0 0 6px;display:inline}
.top_nav{margin-top:53px}
.headline{width: 100%;height: 0.8rem;background: #f08300;color: #fff;text-align: center;line-height: 0.8rem;font-size: 0.32rem;font-weight: bold;}
.headline span{display: inline-block;width:15%;height:0.8rem;}
.headline .headline_span2{display: inline-block;width:70%;}
.headline_span1{background:url("../images/icon-35.png")no-repeat center;background-size: 20%;}
.cArea{width:100%;margin:0 auto;overflow:hidden}
#tab1{width:100%;height:0.8rem;clear:both;background:#fbe5d9}
#tab1 li{width:33.33%;float:left;height:0.8rem;line-height:0.8rem;text-align:center;font-weight:bold; font-size:0.28rem;}
#tab1 li a{color:#666}
#tab1 li a:hover{color:#ea5504}
#tab1 li.now{float:left;height:0.8rem;line-height:0.8rem;text-align:center;font-weight:bold; font-size:0.28rem;background: #fff;}
#tab1 li.now a{color:#ea5504}
#tab1 ul li b{ font:12px/22px "宋体"; font-weight:bold}
#tablist1{width:100%;height:auto;}
.tablist1{width:100%;height:auto;padding:0;clear:both;position:relative;overflow:hidden}
#tab2{width:100%;text-align: center;margin-top:0.3rem;}
#tab2 ul,#tab3 ul,#tab4 ul{width:100%;}
#tab2 ul{height:0.86rem;border-bottom: 1px solid #c8c8c8;}
#tab2 li{width:30%;height:0.8rem;float:left;display:block;color:#464646;cursor:pointer;font-weight:bold;font-size:0.28rem;line-height: 0.8rem;margin:0 10%;border-bottom: 3px solid #fff;}
#tab2 a,#tab3 a,#tab a{display:inline-block;width:100%;height:0.8rem;}
#tab2 .active,#tab3 .active,#tab4 .active{border-bottom: 3px solid #f08300;color:#f08300;}
#tablist2{width:100%;padding:2% 0 10% 0;}
.tablist2{}
.input1{width:40%;border:1px solid #7f9db9}
.input2{width:75px;border:1px solid #7f9db9}
.input3{width:143px;border:1px solid #7f9db9}
.input4{width:99px;border:1px solid #7f9db9}
.but1{width:80%;height:0.8rem;color:#fff;font:bold 16px "宋体";margin-right:20%;border-radius: 6px;background: #f08300;}
/*.br_1{border:1px solid #d2d2d2;width:100%;}*/
/*.br_2{border-left:1px solid #f8e1cd;padding-left:6px}*/
#tab3{width:48px;left:80px;position:absolute}
#tab3 li{width:45px;height:30px;float:left;display:block;color:#666;cursor:pointer;font-weight:bold;font-size:14px}
#tablist3{width:828px;margin-left:124px}
#tablist3 span{padding:10px 0 0 10px;float:left}
#tablist3 span.s1{float:right;margin-right:10px}
#tab4{width:141px;left:50px;position:absolute}
#tab4 li{width:121px;height:30px;display:block;color:#666;cursor:pointer;font-weight:bold;font-size:14px}
#tablist4{width:695px;margin-left:170px}
.detail{width:520px;height:auto;border:1px solid #f7bfa0;padding:1px; position:absolute; left:0px; top:20px;}
.detail table tr td.fbe5d9{background:#fbe5d9}
.detail table tr td.fff{background:#fff}
.detail table tr td span{padding:0 10px}
/*--------------页脚内容---------------*/
.footer{margin:0 auto;border-top:1px solid #c8c8c8;width:965px;margin-top:10px;padding:10px 0 16px 0;color:#666;clear:both}
.footer ul li{text-align:center;line-height:22px}
.footer ul li a{color:#666}
.footer ul li a:hover{color:#ea5504}
.copy{font:12px Arial}
/*-----------新头部------------*/
.top_head{ width:100%; height:34px; padding-top:10px;overflow:visible}
.top_head1{ width:974px; margin: 0 auto; height:27px; overflow:visible;position:relative;}
.top_head1 div{line-height:27px;}
.underline a:hover{ line-height:27px; text-decoration:underline}
.top_button{cursor: pointer; height:27px; width:12px;border:0px;}
.top_centre{width:678px; float:left;}
.top_right1{ float:right; width:143px; text-align:center}
.top_right1 a:hover{ text-decoration:underline}
.top_head2{ width:974px; margin: 0 auto; height:33px;}
.head2_left{ width:185px; height:30px; float:left;color: #FFFFFF;font: 18px "黑体"; text-indent:20px; line-height:30px; padding-top:3px;}
.head2_left a{ color:#fff}
.head2_left a:hover{ color:#fff;text-decoration: underline; }
.head2_right{ width:779px; height:33px; float:left; padding-left:10px;}
.head2_piece{ width:80px; float:left; text-align:center}
.head2_piece a{ width:70px; height:33px;float:left; color:#666666; line-height:33px; margin-right:15px; display:block; text-align:center; font-weight: bold;}
.head2_piece a:hover{color:#fff}
.head2_piece1{width:180px; text-align:center; float:right; line-height:33px;}
.top_head3{ width:942px; margin: 0 auto; height:25px; border-left:1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; border-right:1px solid #CCCCCC;background-color:#fffaf4; padding-left:30px; line-height:25px;}
.top_head3 a:hover{text-decoration: underline; color:#EA5504}
.top_colour{ color:#cccccc}
.collection{width:auto;position:absolute;top:120px;right:300px}
.collection span{float:right;padding-left:20px}
.collection span.s1{background-position:-244px -449px}
.collection span.s2{background-position:-244px -472px}
.collection span font{color:#ea5504;font-size:12px}
.checkbox{ height:20px; padding: 2px; border: 1px solid #7F9DB9; width:80px; float:left; display:inline}
.search_nav1{ width:225px; padding-left:5px;}
.msmo{width:60px; height:auto; float:left;position:absolute; z-index:2;left:70px; top:1px;}
.msmo b{ color:#666666}
.msmo_1{position:absolute;width:40px; border:1px solid #CCCCCC; height:70px;z-index:1; left:63px; top:0px; background-color:#FFFFFF; padding-top:25px; text-align:center; padding-left:7px;display:none}
.msmo_1 li{ line-height:22px; text-align:left}
.msmo_2{ margin-left:50px; float:left; display:inline}
.substation{ float:left; overflow:visible}
/* 弹性盒
======================================================================= */
.box {
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
.flex-10 {
-webkit-box-flex: 10;
-moz-box-flex: 10;
-webkit-flex: 10;
-ms-flex: 10;
flex: 10;
}
.flex-9 {
-webkit-box-flex: 9;
-moz-box-flex: 9;
-webkit-flex: 9;
-ms-flex: 9;
flex: 9;
}
.flex-8 {
-webkit-box-flex: 8;
-moz-box-flex: 8;
-webkit-flex: 8;
-ms-flex: 8;
flex: 8;
}
.flex-7 {
-webkit-box-flex: 7;
-moz-box-flex: 7;
-webkit-flex: 7;
-ms-flex: 7;
flex: 7;
}
.flex-6 {
-webkit-box-flex: 6;
-moz-box-flex: 6;
-webkit-flex: 6;
-ms-flex: 6;
flex: 6;
}
.flex-5 {
-webkit-box-flex: 5;
-moz-box-flex: 5;
-webkit-flex: 5;
-ms-flex: 5;
flex: 5;
}
.flex-4 {
-webkit-box-flex: 4;
-moz-box-flex: 4;
-webkit-flex: 4;
-ms-flex: 4;
flex: 4;
}
.flex-3 {
-webkit-box-flex: 3;
-moz-box-flex: 3;
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
}
.flex-2 {
-webkit-box-flex: 2;
-moz-box-flex: 2;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
}
.flex-1 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
#tab1 ul{text-align: center;}
.fltab .fltd01{border-bottom:1px solid #d1d1d1;}
.fr{margin-top: 30px;display: none;}
.headline{width: 100%;height: 0.75rem;background: #2bb673;color: #fff;text-align: center;line-height: 0.75rem;font-size: 0.32rem;font-weight: bold;}
.tab_ul{width:100%;}
.tab_ul li{text-align: center;height:0.85rem;line-height: 0.85rem;font-weight: bold;font-size: 0.28rem;color:#464646;margin:0 5%;}
.li_active{border-bottom: 3px solid #f08300;}
.list_ul{width:100%;font-size: 0.28rem;color:#464646;text-align: center;font-weight: bold;}
.text_r{text-align: right;}
.text_l{text-align: left;}
.list_li{width:100%;height:0.9rem;border-top: 1px solid #d1d1d1;line-height: 0.9rem;}
.font_weigth{font-weight: bold;}
.text_indent{text-indent: 0.2rem;}
.text_indent_50{text-align: right;border: none;outline: none;color:#a3a3a3;padding-right: 5%;font-weight: bold;font-size: 0.28rem;}
.span_color{color:#a3a3a3;}
.radio_div{margin-right: 5%;}
.span_bg{display: inline-block;width:20%;height:0.9rem;background: url("//repo.bfw.wiki/bfwrepo/icon/60947efc8452a.png")no-repeat center;background-size: contain;}
.span_bg_active{background: url("//repo.bfw.wiki/bfwrepo/icon/5d834c0bc45e9.png")no-repeat center;background-size: contain;}
.fs_span1,.fs_span2{display: inline-block;width:70%;height:0.9rem;text-align: left;padding-left: 10%;}
.select-area{position: relative;overflow: hidden;text-indent: 10%;color:#464646;background: url("//repo.bfw.wiki/bfwrepo/icon/5eb4949404188.png")no-repeat 90% center;background-size: 5%;}
.select-area select{position: absolute;left: 0;top: 0;opacity: 0;width: 100%;color:#464646;}
.select-area span{color:#a3a3a3;}
.padding_right{padding-right: 0.3rem;}
.font_color{color:#a3a3a3;}
.btn{width:70%;margin: 1rem 15%;height:0.65rem;color:#fff;border: none;outline: none;font-size: 0.3rem;font-weight: bold;background: #2bb673;border-radius: 10px;}
.select-area select{width:100%;height:100%;}
.borderBottom{border-bottom:1px solid #d1d1d1;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #a3a3a3;}
input:-moz-placeholder, textarea:-moz-placeholder {color:#a3a3a3;}
input::-moz-placeholder, textarea::-moz-placeholder {color:#a3a3a3;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color:#a3a3a3;}
.result_ul{text-align: center;width:100%;margin-bottom: 1rem;display: none;}
.result_li{text-align: center;width:85%;padding:0 10%;height:0.65rem;line-height: 0.65rem;}
.result_li div{height:0.45rem;line-height: 0.45rem;}
.result_div01{text-align: right;}
.result_div02{border:1px solid #7f9db9;margin:0 3%;text-align: left;color:#999;text-indent: 1%;}
.result_div03{text-align: left;}
.calculator{width:100%;}
.calculator_div{width:100%;height:1.2rem;line-height: 1.2rem;border-bottom: 1px solid #d1d1d1;font-size: 0.28rem;color:#3f3f3f;}
.calculator_div01{background: url("//repo.bfw.wiki/bfwrepo/icon/5d834c0bc45e9.png")no-repeat center;background-size: 40%;}
.calculator_div03{background: url("//repo.bfw.wiki/bfwrepo/icon/5d834c0bc45e9.png")no-repeat center;background-size: 35%;}
.calculator_div02{background: url("//repo.bfw.wiki/bfwrepo/icon/5d834c0bc45e9.png")no-repeat center;background-size: 20%;}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
(function (doc,win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded',recalc, false);
})(document,window);
function popx(text, time, cb) {
time = time * 1e3;
var pop_info = "<span class='span-tip'>" + text + "</span>";
$("body").append(pop_info);
$(".span-tip i").on("click", function() {
$(this).parent().remove();
});
$(".span-tip").css("margin-left", function() {
return -$(".span-tip")[0].offsetWidth / 2;
});
$(".span-tip").fadeOut(time, function() {
$(this).remove();
if (cb && typeof cb == "function") {
cb();
}
});
}
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1){
c_end=document.cookie.length;
}
return document.cookie.substring(c_start,c_end);
}
}
return "";
}
</script>
</head>
<body>
<div class="headline">
<span class="left headline_span1"></span>
<span class="left headline_span2">税费计算</span>
</div>
<ul class="tab_ul box">
<li class="flex-1 " onclick="esfchange(1);">新房</li>
<li class="flex-1 li_active" onclick="esfchange(2);">二手房</li>
</ul>
<ul class="list_ul">
<li class="list_li box" id="esf_1">
<div class="flex-1 font_weigth text_l text_indent" >物业类型：</div>
<div class="select-area flex-1">
<span class="select-value"></span>
<select id="housexz">
<option selected="selected" value="普通住宅">普通住宅</option>
<option value="非普通住宅">非普通住宅</option>
<option value="经济适用房">经济适用房</option>
</select>
</div>
</li>
<li class="list_li box" id="esf_2">
<div class="flex-1 font_weigth text_l text_indent">计算方式：</div>
<div class="select-area flex-1">
<span class="select-value"></span>
<select id="strjzfs" onchange="">
<option value="总价" selected="selected">总价</option>
<option value="差价">差价</option>
</select>
</div>
</li>
<li class="list_li box borderBottom" id="esf_3">
<div class="flex-1 font_weigth text_l text_indent">房屋原价：</div>
<input type="text" class="flex-1 text_indent_50" id="houseyprice" placeholder="请输入房屋原价 万元"/>
</li>
<li class="list_li box" id="esf_4">
<div class="flex-1 font_weigth text_l text_indent">房产购置年限：</div>
<div class="select-area flex-1">
<span class="select-value"></span>
<select id="strRadiox">
<option value="否">5年以内</option>
<option value="是">已满5年</option>
</select>
</div>
</li>
<li class="list_li box" id="esf_5">
<div class="flex-3 font_weigth text_l text_i.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0