jquery bootstrap贷款计算器
代码语言：html
所属分类：布局界面
代码描述：采用bootstrap布局，然后用jquery来实现计算
代码标签： 计算器
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
.container {
height: 100vh;
position: relative;
}
.calculate-form {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
}
#loading,
#result {
display: none;
}
body {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(http://repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png) no-repeat center
center/cover;
}
</style>
</head>
<body translate="no">
<body class="bg-dark">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto calculate-form">
<div class="card card-body text-center mt-5">
<h1 class="heading display-5 pb-3">贷款计算器</h1>
<form id="loan-form">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="number" class="form-control" id="amount" placeholder="贷款金额" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">%</span>
</div>
<input type="number" class="form-control" id="interest" placeholder="贷款利率" />
</div>
</div>
<div class="form-group">
<input type="number" id="years" class="form-control" placeholder="还款周期" />
</div>
<div class="form-group">
<input type="submit" value="计算" class="btn btn-dark btn-block" />
</div>
</form>
<div id="loading">
<img src="http://repo.bfw.wiki/bfwrepo/image/giphy.gif" alt="" />
</div>
<div id="result">
<h5>计算结果</h5>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">每月还款</span>
</div>
<input type="number" class="form-control" id="monthly-payment" disabled />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">总共要还</span>
</div>.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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