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>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0