用vue搞一个切换图片的时钟

海星吧 2019-9-17 5008

⑧说了,先来首歌。


文件路径

1.png

用到的图片文件:如果不想用这个可以自己换。


<template>

  <!-- 视图层 -->

  <div class="Clock">

    <div class="box" >

     <img class="aimg" :src="img0" alt="">

      <img class="aimg" :src="img0" alt="">

      :

      <img class="aimg" :src="img0" alt="">

      <img class="aimg" :src="img0" alt="">

      :

      <img class="aimg" :src="img0" alt="">

      <img class="aimg" :src="img0" alt="">

    </div>

    <router-link to='/'> index </router-link>

  </div>

</template>

<script>

  // 代码层

export default{

  data(){

    return{

    img0:require("../../imgs/Clock/0.png"),

      hours:{//时

        place:0,

        Bit:0,

      },

      minutes:{//分

        place:0,

        Bit:0,

      },

      seconds:{//秒

        place:0,

        Bit:0,

      },

      timer :"",//setInterval控制器

    }

  },

  mounted(){

    this.setInter()

  },

  methods:{

    consolefunc(){

      console.log("setInterval")

      // setInterval(this.consolefunc(),1000)

    },

    setInter(){

      this.timeClock()

      this.timer = setInterval(this.timeClock,1000)

    },

    toDou(n){//将Date的数值转化为字符串

      if(n<10) {

        return '0'+n;

      } else {

        return ''+n;

      }

    },

    timeImg(num){//根据数值给img返回路径

      switch(num){

        case 0:return require("../../imgs/Clock/0.png");

        case 1:return require("../../imgs/Clock/1.png");

        case 2:return require("../../imgs/Clock/2.png");

        case 3:return require("../../imgs/Clock/3.png");

        case 4:return require("../../imgs/Clock/4.png");

        case 5:return require("../../imgs/Clock/5.png");

        case 6:return require("../../imgs/Clock/6.png");

        case 7:return require("../../imgs/Clock/7.png");

        case 8:return require("../../imgs/Clock/8.png");

        case 9:return require("../../imgs/Clock/9.png");

        default:return console.log('no img');

      }

    },

    timeClock(){//主要函数

      console.log('going timeClock')

      var aImg = document.getElementsByClassName("aimg");

      var oDate = new Date();//获取时间对象

      var str = this.toDou(oDate.getHours())+this.toDou(oDate.getMinutes())+this.toDou(oDate.getSeconds());

    //得到转化为字符串之后的时间

            this.hours.place = parseInt(str[0]);

            this.hours.Bit = parseInt(str[1]);

            this.minutes.place = parseInt(str[2]);

            this.minutes.Bit = parseInt(str[3]);

            this.seconds.place = parseInt(str[4]);

            this.seconds.Bit = parseInt(str[5]);

            //这里如果你觉得麻烦可以写成  aImg[0].src = this.timeImg(parseInt(str[0])); 这样写应该没有问题,我没试过。

            //其实我更喜欢我的写法。

            aImg[0].src = this.timeImg(this.hours.place)

            aImg[1].src = this.timeImg(this.hours.Bit)

            aImg[2].src = this.timeImg(this.minutes.place)

            aImg[3].src = this.timeImg(this.minutes.Bit)

            aImg[4].src = this.timeImg(this.seconds.place)

            aImg[5].src = this.timeImg(this.seconds.Bit)

    },

  },

  beforeDestroy(){

    clearInterval(this.timer)//退出之后善后

    console.log('get out')

  }

}

</script>

<style>

  /* 样式层 */

.box{

  background-color: black;

  color: white;

  font-size: 55px;

  width: 400px;

  padding-left: 50px;

}

.box .aimg{

  width: 36px;

  height: 50px;

  transition: all .2s;

}

</style>


样式的话并没有什么要搞的,所以很烂就这么几行。


看一下效果time.png



如上图所示,我们的时间和windows的时间一样了,并且方法也在不断的调用,

如果要停止,那就点击index,离开这个组件,

这个时候beforeDestroy钩子就会触发里面的函数clearInterval,

(这个停止setInterval的函数之前的那个走马灯我用错了,后面在评论里改正过来了。。)



time.png

在跳出这个组件之后,也不再输出going timeClock了,也就是说循环被关闭。

这里有个点要讲一下,在vue里面,如果你给一个组件设置了setInterval没有关掉的话,他就会一直调用,非常消耗性能。

我今天在想怎么用vuex 来管理setInterval这个东西。不过先用这个顶一顶。


我想搞一个自己的博客,当然没有后台没有美工,就这一点贼难受。

所以先写一些前端应该有的东西。。这个和之前的走马灯算是起步了。。。

不过这个写死的图片路径就很烦。。

如果有老哥来优化的话就再好不过了。



Welcome to  Starfish bar,If you have better suggestions or better ideas,

Thank you forleave a message below, see you again,.



弱鸡程序员年底还在加班
最新回复 (1)
  • 欧派兽 2019-9-17
    0 2
    奖励二级精华
    1:管理员给你移区后会显示移到了你之前发帖的区。 2:点击我作为楼主发帖时一楼下的图片签名,可以跳转到站规教程贴。 3:多次水贴水回复会封号哦? 4:不知道回什么的时候就点“里世界专属”,一键随机生成几种回复内容。 5:祝你在里世界玩得愉快!
    • ACG里世界
      3
          
返回
发新帖