js中毫秒计时器

js中毫秒计时器

基础知识

//每三秒(3000 毫秒)弹出 "Hello" :
times=setInterval(function(){
    
     alert("Hello"); }, 3000);
window.clearInterval(times)

//三秒后(3000 毫秒)弹出 "Hello" :
times=setTimeout(function(){
    
     alert("Hello"); }, 3000);
window.clearTimeout(times)

一、效果图

效果图

二、代码

//html
 <ul class="time">
      <li>{
    
    {
    
    hour}}</li>:
      <li>{
    
    {
    
    minute}}</li>:
      <li>{
    
    {
    
    second}}</li>:
      <li>{
    
    {
    
    String(millisecond).slice(0, 2) }}</li>
  </ul>
//js  
data(){
    
    
	return{
    
    
	 hour: 0,
	            minute: 0,
	            second: 0,
	            millisecond: 0,
	   }
 }
 methods:{
    
    
	/**
	  * 毫秒计时器
	  */
	 Start() {
    
    
	     //开始
	     this.int = setInterval(this.timer, 50)
	 },
	 Reset() {
    
    
	     //重置
	     window.clearInterval(this.int)
	     this.millisecond = this.hour = this.minute = this.second = 0
	 },
	 timer() {
    
    
	     //计时
	     this.millisecond = this.millisecond + 50
	     if (this.millisecond >= 1000) {
    
    
	         this.millisecond = 0
	         this.second = this.second + 1
	     }
	     if (this.second >= 60) {
    
    
	         this.second = 0
	         this.minute = this.minute + 1
	     }
	
	     if (this.minute >= 60) {
    
    
	         this.minute = 0
	         this.hour = this.hour + 1
	     }
	 },
 }

猜你喜欢

转载自blog.csdn.net/MISS_zhang_0110/article/details/121290567