vue-活动倒计时

vue-活动倒计时

做活动的时候，会出现 活动倒计时 ，今天就总结一下活动倒计时。

我是用vue实例写的：

1. HTML页面：

// 倒计时
<p class="count_down_str">
	<span id="t_d">00</span> 天
	<span id="t_h">00</span> 时
	<span id="t_m">00</span> 分
	<span id="t_s">00</span> 秒
</p>

2. js页面:

// 倒计时
new Vue({
   el: "#dome",
   data:{
   	   msg: '多热烈的白羊,多善良多抽象',
   	   count_down_time: last_time, //last_time 是后台返给的时间
   },
   mounted: function(){
   		var timer = setInterval(function() {
   			if (_this.count_down_time <= 0) {
   				clearInterval(timer)
   			} else {
   			_this.count_down_time--;
   			$('.count_down_str').html(_this.time_count_down(_this.count_down_time))
   		}
   	}, 1000);
   },
   methods:{
   	//倒计时
   	time_count_down: function(time) {
   		var _this = this;
   		//天数
   		var days = Math.floor(time / (60 * 60 * 24));
   		if (days < 10) {
   			days = '0' + days;
   		}
   		//取模（余数）
   		var modulo = time % (60 * 60 * 24);
   		//小时数
   		var hours = Math.floor(modulo / (60 * 60));
   		if (hours < 10) {
   			hours = '0' + hours;
   		}
   		modulo = modulo % (60 * 60);
   		//分钟
   		var minutes = Math.floor(modulo / 60);
   		if (minutes < 10) {
   			minutes = '0' + minutes;
   		}
   		//秒
   		var seconds = modulo % 60;
   		if (seconds < 10) {
   			seconds = '0' + seconds;
   		}

   		var str = '' + days + ' 天 ' + hours + ' 时 ' +
   		    minutes + ' 分 ' +seconds + ' 秒';
   		return str;
   	},
   }
})

注释

1.setInterval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
提示： 1000 毫秒= 1 秒。
提示： 如果你只想执行一次可以使用 setTimeout() 方法。
(详情请参照菜鸟教程)

实例:
每三秒（3000 毫秒）弹出 “Hello” :
setInterval ( function ( ) {
alert(“Hello”);
}, 3000);

2.setInterval()

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量：

myVar = setInterval(“javascript 函数”, milliseconds);
可以通过 clearInterval() 方法来停止执行。

实例:
显示当前时间 ( setInterval() 函数会每秒执行一次函数，类似手表)。使用 clearInterval() 来停止执行:
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById(“demo”).innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}

3.Math.floor()

floor() 方法返回小于等于x的最大整数。
如果传递的参数是一个整数，该值不变。

实例:
返回小于等于x的最大整数:
Math.floor(1.6);
输出：1

更多实例:
在本例中，我们将对不同的数运用 floor() :
var a=Math.floor(0.60);
var b=Math.floor(0.40);
var c=Math.floor(5);
var d=Math.floor(5.1);
var e=Math.floor(-5.1);
var f=Math.floor(-5.9);
a,b,c,d,e, 和 f 输出结果: 0，0，5，5，-6，-6

先到这里吧，有什么会继续补充，我也是个小萌新，有什么不对的，请及时指出。万分感谢！