数字滚动

最新推荐文章于 2024-02-23 21:02:32 发布

看陌生的风景

最新推荐文章于 2024-02-23 21:02:32 发布

阅读量230

点赞数

分类专栏： CSS JS HTML

本文链接：https://blog.csdn.net/Richardjgp/article/details/103264086

版权

JS 同时被 3 个专栏收录

63 篇文章 1 订阅

订阅专栏

CSS

19 篇文章 0 订阅

订阅专栏

HTML

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>城管执法门户</title>
	<style>
.runNum{
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    height: 0.36rem;
    line-height: 0.46rem;
    text-align: right;
    font-weight: bold;
    position: relative;
    width: 1.3rem;
    display: inline-block;
}
.runNum>li{
    list-style: none;
    width: 0.3rem;
    float: left;
    position: absolute;
    color: #7afffd;
}
</style>
</head>

<body>
		
				
			

					<div class="ssztc_rbt_txt">
						<table>
							<tr>
								<td><i class="ssztc_rbtt_red"></i> 无准运证数量:</td>
								<td>
									<ul class="runNum" id="test2">23</ul>
								</td>
								<td>辆</td>
							</tr>
							<tr>
								<td><i class="ssztc_rbtt_yellow"></i>未苫盖数量:</td>
								<td>
									<ul class="runNum" id="test3">15</ul>
								</td>
								<td>辆</td>
							</tr>
							<tr>
								<td><i class="ssztc_rbtt_cyan"></i>车轮带泥数量:</td>
								<td>
									<ul class="runNum" id="test4">4</ul>
								</td>
								<td>辆</td>
							</tr>
						</table>
					</div>
			
	<script src="js/jquery-3.2.1.min.js"></script>

</body>
<script>
	$(function () {
		/*jQuery对象添加  runNum  方法*/
		$.fn.extend({
        	/*
        	 *	滚动数字
		 	 *	@ val 值，	params 参数对象
			 *	params{addMin(随机最小值),addMax(随机最大值),interval(动画间隔),speed(动画滚动速度),width(列宽),height(行高)}
        	 */
			runNum: function (val, eleNum, params) {
				/*初始化动画参数*/
				var valString = val;
				var par = params || {};
				var runNumJson = {
					el: $('#' + eleNum),
					value: valString,
					valueStr: valString.toString(10),
					width: par.width || 20,
					height: par.height || 50,
					addMin: par.addMin || 10000,
					addMax: par.addMax || 99999,
					interval: par.interval || 2000,
					speed: par.speed || 1000,
					width: par.width || 20,
					length: valString.toString(10).length,
				};
				$._runNum._list(runNumJson.el, runNumJson, eleNum);
				$._runNum._interval(runNumJson.el.children("li"), runNumJson, eleNum);
			},

		});
		/*jQuery对象添加  _runNum  属性*/
		$._runNum = {
			/*初始化数字列表*/
			_list: function (el, json, eleNum) {
				var str = '';
				for (var i = 0; i < json.length; i++) {
					var w = json.width * i;
					var t = json.height * parseInt(json.valueStr[i]);
					var h = json.height * 10;
					str += '<li style="width:' + json.width + 'px;left:' + w + 'px;top: ' + -t + 'px;height:' + h + 'px;">';
					for (var j = 0; j < 10; j++) {
						str += '<div style="height:' + json.height + 'px;line-height:' + json.height + 'px;">' + j + '</div>';
					}
					str += '</li>';
				}
				if (json.length > el.length) {
					$("#" + eleNum).html(str);
				} else {
					el.html(str);
				}
			},

			/*生成随即数*/
			// _random:function (json) {
			//     var Range = json.addMax - json.addMin;
			//     var Rand = Math.random();
			// 	var num=json.addMin + 1;
			//     return num;
			// },
			/*执行动画效果*/
			_animate: function (el, value, json) {
				for (var x = 0; x < json.length; x++) {
					var topPx = value[x] * json.height;
					el.eq(x).animate({ top: -topPx + 'px' }, json.speed);
				}
			},
			/*定期刷新动画列表*/
			_interval: function (el, json, eleNum) {
				setInterval(function () {
					var val = json.value;
					val = val + 1;
					json.value = val;
					json.length = val.toString(10).length;
					json.valueStr = val.toString(10);
					$._runNum._list($("#" + eleNum).children('li'), json, eleNum);
					$._runNum._animate($("#" + eleNum).children('li'), val.toString(10), json);
				}, json.interval);
			},
		}
		$("#test1").runNum(99, 'test1', { interval: 2000 });
		$("#test2").runNum(23, 'test2', { interval: 3000 });
		$("#test3").runNum(15, 'test3', { interval: 4000 });
		$("#test4").runNum(8, 'test4', { interval: 5000 });
	})
</script>

</html>