Js模拟剩余名额动态减少功能

JavaScript

今天，朋友负责运营的论坛需要制作一个报名剩余人数动态减少的效果，但是并没有服务器提供的当前真实剩余人数。

身为程序员的我，只好帮忙实现这个功能了。

需求： 假设当前1500人（不知道真实的剩余名额），此后每20分钟会少掉一个名额，到截止那天可能会有剩余名额。

v0.1代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="banner">
	<p>剩余名额:<span id='num'></span>人</p>
</div>
<script>
(function(){
	let num = 1500;
	let time = 1000*60*20;
	let elm = document.querySelector('#num');
	setInterval(function(){
		elm.innerHTML = Math.ceil(--num);
	},time);
})()
</script>

但是会有个重大问题就是，每次刷新之后名额都会变为初始值。

首先想到的是用localStoarge在本地记录，每次触发定时器后保存一下当前剩余名额。但一想，这样做的后果就是每个用户在该网站看到的剩余名额都不一样，而且每个时间点的剩余名额也不一样，因此这个方案pass。

所以在不知道真实数据的情况下，我们只能模拟出一个真实数据，而且这个值每个时间点都不一样，呈递减势。

那现在的问题就是要得到每个时间点上的剩余名额，所以可以通过每过多少分钟少掉几人来倒推出当前剩余名额。

v0.2 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
(function(){
	let time = 20; // 定时器间隔，单位:分钟
	let deNum = 1; // 每个定时器间隔减少人数
	let elm = document.querySelector('#num');
	let minNum = (new Date('2016-9-28').getTime() - new Date().getTime()) / 60 / 1000; // 距离截止分钟数
	let num = minNum * deNum / time; // 计算当前时间点剩余名额公式。
	elm.innerHTML = Math.ceil(num);
	setInterval(function(){
		num = num - deNum;
		elm.innerHTML = Math.ceil(num);
	},time * 60 * 1000);
})()
</script>

Over.