cui-timmer/cui-timer.html at master · moonwalkercui/cui-timmer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Cuitimer 倒计时插件</title>
		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="cui-timer.js"></script>
	</head>
	<body>

		<label class="cui-timer" data-config='{"endtime":"2019-12-2 10:10:33","callback":"diyFunc"}'></label>
		<!-- callback为到时后的回调 -->
		<hr>
		<label class="cui-timer" data-config='{"endtime":"2019-12-28 10:10:33","callback":"diyFunc"}'></label>
		<hr>
		<label class="cui-timer" data-config='{"endtime":"2019-12-21 1:33:40","msec":true}'></label>
		<hr>
		<label class="cui-timer" data-config='{"endtime":"2019-12-19 3:13:09"}'></label>
		<hr>

		<script type="text/javascript">
			/*
			 * 倒计时超级插件
			 * 调用方法：页面底部调用：$('.cui-timer').Cuitimer(); 样式类名可以自定义。
			 * 元素中需要加入data-config属性 如：<label class="cui-timer" data-config = '{"endtime":"2017-5-2 10:10:33","msec":false,"callback":"diyFunc"}'>
			 * 三个参数：endtime结束时间，msec是否显示毫秒，callback 时间到期触发自定义回调函数
			 * class样式：剩余天cui-day，剩余时间cui-time，毫秒cui-msec
			 * @author Ryan
			 */
			$(function() {
				$('.cui-timer').Cuitimer();
			});
			// 到期回调
			function diyFunc() {
				$('.cui-timer').eq(0).css('color', 'red');
			}
		</script>
	</body>
</html>