新增 倒计时 模板(感谢网友hcoder-深海)

examples/hello-uniapp/components/graceCountd.vue

+<template name="graceCountd">
+	<view class="grace-countdown">
+		<view class="grace-countdown-numbers" :style="{borderColor:borderColor, color:fontColor, background:bgrColor}">{{h}}</view>
+		<view class="grace-countdown-splitor" :style="{color:splitorColor}">:</view>
+		<view class="grace-countdown-numbers" :style="{borderColor:borderColor, color:fontColor, background:bgrColor}">{{i}}</view>
+		<view class="grace-countdown-splitor" :style="{color:splitorColor}">:</view>
+		<view class="grace-countdown-numbers" :style="{borderColor:borderColor, color:fontColor, background:bgrColor}">{{s}}</view>
+	</view>
+</template>
+<script>
+export default {
+	name: "graceCountd",
+	props: {
+		bgrColor: {
+			type: String,
+			default: "#FFFFFF"
+		},
+		borderColor:{
+			type:String,
+			default : "#000000"
+		},
+		fontColor: {
+			type: String,
+			value: "#000000"
+		},
+		splitorColor: {
+			type: String,
+			default: "#000000"
+		},
+		timer:{
+			type:String,
+			default:""
+		},
+		h:{
+			type:String,
+			default:"00"
+		},
+		i: {
+			type: String,
+			default: "00"
+		},
+		s: {
+			type: String,
+			default: "00"
+		},
+		leftTime: {
+			type: Number,
+			default:0
+		}
+	},
+	created:function(e){
+		var reg = /^([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})$/;
+		var res = this.timer.match(reg);
+		if (res == null){
+			console.log('时间格式错误'); return false;
+		}else{
+			var year = parseInt(res[1]);
+			if (year < 1000) { console.log('时间格式错误'); return false; }
+			var month = parseInt(res[2]);
+			var day = parseInt(res[3]);
+			var h = parseInt(res[4]);
+			if (h < 0 || h > 24) { console.log('时间格式错误'); return false; }
+			var i = parseInt(res[5]);
+			if (i < 0 || i > 60) { console.log('时间格式错误'); return false; }
+			var s = parseInt(res[6]);
+			if (s < 0 || s > 60) { console.log('时间格式错误'); return false; }
+			var leftTime = new Date(year, month - 1, day, h, i, s);
+			this.leftTime = leftTime;
+			this.countDown(this);
+			this.setInterValFunc(this);
+		}
+	},
+	methods: {
+		setInterValFunc:function(obj){
+			setInterval(function(){ obj.countDown(obj);}, 1000);
+		},
+		countDown: function (self){
+			var leftTime = self.leftTime - new Date();
+			if (leftTime > 0) {
+				var hours = parseInt(leftTime / 1000 / 60 / 60 , 10);
+				var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);
+				var seconds = parseInt(leftTime / 1000 % 60, 10);
+			}else{
+				var hours = 0, minutes = 0, seconds = 0;
+			}
+			if (hours < 10) { hours = '0' + hours;}
+			if (minutes < 10) { minutes = '0' + minutes; }
+			if (seconds < 10) { seconds = '0' + seconds; }
+			self.h = hours; self.i = minutes; self.s = seconds;
+		}
+	}
+}
+</script>
+<style>
+.grace-countdown{padding:2rpx 0; flex-wrap:nowrap;}
+.grace-countdown-splitor{width:auto !important; justify-content:center; line-height:44upx; padding:0 5upx;}
+.grace-countdown-numbers{line-height:44upx; width:auto !important; padding:0 10upx; justify-content:center; height:44upx; border-radius:8upx; margin:0 5upx; border:1px solid #000000; font-size:22upx;}
+</style>
\ No newline at end of file

examples/hello-uniapp/pages/template/countdown/countdown.vue

+<template>
+	<view>
+		<page-head :title="title"></page-head>
+		<view class="grace-text-small grace-center" style="margin:80upx 0 20upx 0;">示例1</view>
+		<view style="justify-content:center;">
+			<graceCountd :timer="timer1"></graceCountd>
+		</view>
+		<view class="grace-text-small grace-center" style="margin:80rpx 0 20rpx 0;">示例2</view>
+		<view style="justify-content:center; background:#00B26A; padding:50rpx 0;">
+			<graceCountd :timer="timer2" borderColor="#FFFFFF" splitorColor="#FFF" fontColor="#FFFFFF" bgrColor="none"></graceCountd>
+		</view>
+		<view class="grace-text-small grace-center" style="margin:80rpx 0 20rpx 0;">示例3</view>
+		<view style="justify-content:center;">
+			<graceCountd fontColor="#FFFFFF" bgrColor="#000000" :timer="timer3"></graceCountd>
+		</view>
+	</view>
+</template>
+<script>
+	import graceCountd from "../../../components/graceCountd.vue";
+	//模拟3个时间
+	var dateObj = new Date();
+	var currentTime = dateObj.getTime();
+	var timer1 = formatDateTime((currentTime + 1000 * 10));
+	var timer2 = formatDateTime((currentTime + 1000 * 38));
+	var timer3 = formatDateTime((currentTime + 1000 * 120));
+	//时间戳 转 YY-mm-dd HH:ii:ss 
+	function formatDateTime(inputTime){
+		  var date = new Date(inputTime);
+		  var y = date.getFullYear();
+		  var m = date.getMonth() + 1;
+		  m = m < 10 ? ('0' + m) : m;
+		  var d = date.getDate();
+		  d = d < 10 ? ('0' + d) : d;
+		  var h = date.getHours();
+		  h = h < 10 ? ('0' + h) : h;
+		  var minute = date.getMinutes();
+		  var second = date.getSeconds();
+		  minute = minute < 10 ? ('0' + minute) : minute;
+		  second = second < 10 ? ('0' + second) : second;
+		  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
+	};
+	export default {
+	data(){
+		return {
+			title : '倒计时',
+			timer1 : timer1, 
+			timer2 : timer2, 
+			timer3 : timer3
+		}
+	},
+	components:{
+		graceCountd
+	}
+}
+</script>
+
+<style>
+.grace-center{justify-content: center;}
+view{display:flex; width:100%; flex-wrap:wrap;}
+.grace-countdown{padding:2rpx 0; flex-wrap:nowrap; justify-content:center;}
+.grace-countdown-splitor{width:auto !important; justify-content:center; line-height:44upx; padding:0 5upx;}
+.grace-countdown-numbers{line-height:44upx; width:auto !important; padding:0 10upx; justify-content:center; height:44upx; border-radius:8upx; margin:0 5upx; border:1px solid #000000; font-size:22upx;}
+</style>
\ No newline at end of file