JS抽奖二次方缓动测试

最新推荐文章于 2021-05-31 05:21:37 发布

白鼠闹东京

最新推荐文章于 2021-05-31 05:21:37 发布

阅读量765

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sbt0198/article/details/48300251

版权

javascript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
		.w {width:248px;}
		.l {float:left;background-color:#ffffff;border:1px solid #000000;width:60px;height:60px;}
		div.s {background-color:#dddddd}
	</style>
	<title>Document</title>
</head>
<body>
	<div class="w">
		<div id="l_1" class="l"></div>
		<div id="l_2" class="l"></div>
		<div id="l_3" class="l"></div>
		<div id="l_4" class="l"></div>
		<div id="l_12" class="l"></div>
		<div class="l"></div>
		<div class="l"></div>
		<div id="l_5" class="l"></div>
		<div id="l_11" class="l"></div>
		<div class="l"></div>
		<div class="l"></div>
		<div id="l_6" class="l"></div>
		<div id="l_10" class="l"></div>
		<div id="l_9" class="l"></div>
		<div id="l_8" class="l"></div>
		<div id="l_7" class="l"></div>
	</div>
	<script>
		var ITEM_COUNT = 12;
		var maxTime = 800;
		var minTime = 100;
		var t = 10;
		var a = (maxTime - minTime) / t;
		//获取块
		var getItem = function(index) {
			return document.getElementById("l_" + index);
		};
		var resetAll = function() {
			var items = document.getElementsByClassName("l");
			for(var i = 0 ; i < items.length ; i++) {
				items[i].className = "l";
			}
		};
		var setItemClass = function(index) {
			getItem(index).className = "l s";
		};
		var getItemNumber = function(index, min, max) {
			return Math.floor(Math.random() * (max - min + 1) + min) * ITEM_COUNT + index;
		};
		//跑马灯
		var run = function(current, totle) {
			if(!totle || totle < t * 2) {
				throw new Error("run length is so short!");
			}
			var interval = minTime;
			if(current < t) {
				//interval = maxTime - a * current;
				var c = current;
				interval = maxTime + (maxTime - minTime) * (c /= t) * (c - 2);
			} else if(current + t > totle) {
				//interval = minTime + (t - totle + current) * a;
				var c = t - totle + current;
				interval = minTime + (maxTime - minTime) * (c /= t) * c;
			} else {
				interval = minTime;
			}
			console.log(interval);
			
			//运行效果
			resetAll();
			setItemClass((current) % ITEM_COUNT + 1);
			//结束条件
			if(current >= totle) {
				return;
			}
			//匿名函数
			var nextFunc = arguments.callee;
			//递归
			setTimeout(function() {
				nextFunc(current + 1, totle)
			}, interval)
		};
	</script>
</body>
</html>