井井客

搜索

JQ配合input range做了一个小计算器效果

项目需求做的一个input range滑动时计算器的效果,主要用的是JQ的代码,配合CSS,这上放上来的例子里面的兼容没有做,只观注谷歌的效果先~其中input range是h5新增的表单元素。

JQ配合input range做了一个小计算器效果

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>input range做个计算器</title>
<style>
	body,div,p,span,i,input { padding:0; margin:0; outline:0;}
	html,body { height:100%;}
	body { background:#e8e8e8; font-family: "microsoft yahei"; font-size:24px;}
	i { font-style: normal;}
	.fl { float: left;}
	.warp { width:600px; height: 100%; margin: 0 auto; background: #fff; padding:0 20px; overflow: hidden;}
	.loanInfo { line-height:36px; color: #999; margin-top: 30px;}
	.loanInfo i { display: inline-block; width: 6.2em;}
	.loanInfo span { color: #333;}
	.rangeDiv { margin-top: 25px; }
	.now { font-size: 28px; height: 48px; line-height: 38px; position: relative;}
	.now span { position:absolute; top: 0; left: 0; white-space: nowrap;}
	.val { padding-top: 15px; line-height: 36px; text-align: right; color: #999;}
	.focus .now { font-size: 36px;}
	/*rang的样式*/
	.myRange { -webkit-appearance: none; width: 100%; height: 12px; border-radius:6px; background: #e8e8e8;}
	.myRange::-webkit-slider-thumb { -webkit-appearance:none; width: 30px; height: 30px; background:#3297fd; border-radius:15px;}
</style>
</head>
<body>
<div class="warp">
    <p class="loanInfo">
       <i>年化利息:</i><span class="nhlx">0.67</span><br>
       <i>期初服务费:</i><span class="qcfwf">45</span><br>
       <i>到账金额:</i><span class="dzje">455</span><br>
       <i>还款金额:</i><span class="hkje">500.67</span>
    </p>
    <div class="rangeDiv" id="edu">
        <p class="now"><span>500元</span></p>
        <input type="range" min='500' max='3000' step="100" value='0' class="myRange">
        <p class="val">3000元<span class="fl">500元</span></p>
    </div>
    <div class="rangeDiv" id="day">
        <p class="now"><span>7天</span></p>
        <input type="range" min='7' max='28' step="7" value='0' class="myRange">
        <p class="val">30天<span class="fl">7天</span></p>
    </div>
</div>
<script src="http://www.jingjingke.com/res/js/jquery.min.js"></script>
<script>
$(document).ready(function(){

	//计算四项值并输出*********************************
	//初始化定义四需计算的值
	var $nhlx = $('.nhlx'), 	//年化利息
		$qcfwf = $('.qcfwf'),	//期初服务费
		$dzje = $('.dzje'),		//到账金额
		$hkje = $('.hkje');		//还款金额
	function setAmount(edu,day){
		edu = parseInt(edu);
		day = parseInt(day);
		$nhlx.html( toDecimal(edu *0.07* day /365) );
		$qcfwf.html( toDecimal(edu * 0.09) );
		$dzje.html( toDecimal(edu*(1-0.09)) );
		$hkje.html( toDecimal(edu+edu *0.07* day /365) );
	}
	setAmount(500,7) //初始化默认值
	//计算四项值并输出完成
	
	//定义鼠标或手势事件*************************
	var hasTouch = 'ontouchstart' in window;
	var goTouchStart = hasTouch ? 'touchstart' : 'mousedown',
		goTouchEnd = hasTouch ? 'touchend' : 'mouseup';
	//贷款额度range
	var $edu = $('#edu'),
		$eduNow = $edu.find('.now').children('span'),
		$eduVal = 500,
		$day = $('#day'),
		$dayNow = $day.find('.now').children('span'),
		$dayVal = 7,
		$eduLeft = $dayLeft = 0;
	
	//添加鼠标按上去时字体放大(添加/删除样式)
	$('.myRange').on(goTouchStart,function(){
		$(this).parent('.rangeDiv').addClass('focus');
	}).on(goTouchEnd,function(){
		$(this).parent('.rangeDiv').removeClass('focus');
	})
	//为额度添加鼠标按上去文件跟随
	$edu.find('input').on('propertychange input',function(){
		$eduVal = $(this).val(); 	//获取值
		setAmount($eduVal,$dayVal);//填充值
		$eduLeft = ($eduVal-500)/(3000-50)*100; 
		//文字跟随与滑过位置
		$eduNow.html($eduVal+'元').css({'left':$eduLeft+'%'});
		$eduLeft = $eduLeft+$eduLeft/10*1.6; 
		$(this).css('background', 'linear-gradient(to right , #3297fd '+ $eduLeft +'%, #e8e8e8 ' + $eduLeft + '%)');
	})
	
	//为时间添加鼠标按上去文件跟随
	$day.find('input').on('propertychange input',function(){
		$dayVal = $(this).val();
		if($dayVal == 28) $dayVal = 30; //没有28,所以将28时调成30的值
		setAmount($eduVal,$dayVal);
		$dayLeft = ($dayVal-7)/(28-2.5)*100;
		$dayNow.html($dayVal+'天').css({'left':$dayLeft+'%'})
		$dayLeft = $dayLeft+$dayLeft/10*1.6;
		$(this).css('background', 'linear-gradient(to right , #3297fd '+ $dayLeft +'%, #e8e8e8 ' + $dayLeft + '%)');
	})
	
	//取小数点后2位数
	function toDecimal(x){
		var f = parseFloat(x); 
		if (isNaN(f)) { 
			return false; 
		} 
		var f = Math.round(x*100)/100; 
		var s = f.toString(); 
		var rs = s.indexOf('.'); 
		if (rs < 0) { 
			rs = s.length; 
			s += '.'; 
		} 
		while (s.length <= rs + 2) { 
			s += '0'; 
		} 
		return s;
	}
	//取小数点后2位数完成
});
</script>
</body>
</html>

样式什么的都不是太难,比较麻烦一点的就是文字跟随以及滑过位置,这两个都是使用JQ代码的。另外因为额度和天数是两种方式,所以分开来写了。

文章TAG:jq

作者:井井客原创来源:原创
本文标题:JQ配合input range做了一个小计算器效果
本文链接:/c/13247.html

上一篇:【VUE实例】vue-router2安装及小例子
下一篇:【vue练习】照着vue官方的指南写的例子

文章分类

相关阅读

随便看看