jquery借貸網(wǎng)站滑塊拖動金額利息代碼

使用方法：

1、head引入css文件

<link href="css/style.css" rel="stylesheet" type="text/css"/>

2、head引入js文件

<script type="text/javascript" src="js/jquery.js"></script>

3、body引入HTML代碼

<div class="aui-content">
	<div class="aui-content-box">
		<div class="aui-header">
			 出借<span id="moneyValue">23.9萬</span>元，<span id="dateValue">90</span>天項目，利息約為:<span id="profit">4007.34</span>元
		</div>
		<div class="aui-header-tag"></div>
		<div class="aui-amount">
			<div class="aui-head-title">出借金額</div>
			<div class="aui-amount-item">
				<span class="span-point aui-spacing" id="aui-circle">
					<img src="images/spotRed.png">
				</span>
				<div class="money-value-pos">
					<input type="radio" value="1000" name="mv" id="mv1">
					<label for="mv1">1000元</label>
					<div class="bubble">直投項目起投金額 1000元</div>
				</div>
				<div class="money-value-pos">
					<input type="radio" value="5000" name="mv" id="mv2">
					<label for="mv2">5000元</label>
					<div class="bubble">少數(shù)用戶首次出借5千元</div>
				</div>
				<div class="money-value-pos">
					<input type="radio" value="10000" name="mv" id="mv3">
					<label for="mv3">1萬元</label>
					<div class="bubble">多數(shù)用戶首次出借1萬元</div>
				</div>
				<div class="money-value-pos">
					<input type="radio" value="50000" name="mv" id="mv4">
					<label for="mv4">5萬元</label>
					<div class="bubble">20%單筆出借額約5萬元</div>
				</div>
				<div class="money-value-pos">
					<input type="radio" value="100000" name="mv" id="mv5">
					<label for="mv5">10萬元</label>
					<div class="bubble">15%單筆出借額約10萬元</div>
				</div>
				<div class="money-value-pos">
					<input type="radio" value="239000" name="mv" id="mv6" checked="">
					<label for="mv6">23.9萬元</label>
					<div class="bubble" style="display: block;">人均出借金額為23.9萬元</div>
				</div>
				<div class="money-value-pos" style="margin: 0;">
					<input type="radio" value="500000" name="mv" id="mv7">
					<label for="mv7">50萬元</label>
					<div class="bubble">VIP單筆出借額約50萬元</div>
				</div>
			</div>
		</div>
		<div class="investDate aui-term">
			<div class="aui-head-title">出借期限</div>
			<div class="date-value">
				<span class="span-point" id="aui-circle-two">
					<img src="images/spotRed.png">
				</span>
				<div class="date-value-pos">
					<input type="radio" value="21" name="itd" id="itd1">
					<label for="itd1">21天</label>
					<div class="bubble">新手體驗項目 21天,6%+4%</div>
				</div>
				<div class="date-value-pos">
					<input type="radio" value="30" name="itd" id="itd2">
					<label for="itd2">30天</label>
					<div class="bubble">每月定存,輕松理財 30天,6.3%</div>
				</div>
				<div class="date-value-pos">
					<input type="radio" value="90" name="itd" id="itd3" checked="">
					<label for="itd3">90天</label>
					<div class="bubble" style="display: block;">明星產(chǎn)品人氣爆款 90天,6.8%</div>
				</div>
				<div class="date-value-pos">
					<input type="radio" value="180" name="itd" id="itd4">
					<label for="itd4">180天</label>
					<div class="bubble">半年定存理財 180天,7%</div>
				</div>
				<div class="date-value-pos">
					<input type="radio" value="270" name="itd" id="itd5">
					<label for="itd5">270天</label>
					<div class="bubble">資金周轉理財 270天,7.5%</div>
				</div>
				<div class="date-value-pos" style="margin: 0;">
					<input type="radio" value="365" name="itd" id="itd6">
					<label for="itd6">365天</label>
					<div class="bubble">收益Top,壕友偏愛 365天,7.8%</div>
				</div>
			</div>
		</div>
		<div class="aui-button">開始出借</div>
	</div>
</div>

<script type="text/javascript" src="js/script.js"></script> <!-- 先執(zhí)行html 再執(zhí)行jquery -->