下班倒计时 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      #app {
        width: 400px;
        height: 400px;
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p v-cloak>当前时间：{{currentTime}}</p>

      <el-time-picker
        v-model="defaultValue"
        :picker-options="{
      selectableRange: '8:30:00 - 23:30:00'
    }"
        placeholder="下班时间"
        value-format="timestamp"
        @change="changeDate"
      >
      </el-time-picker>
      <p>距离下班时间还有</p>
      <p v-cloak>{{arrivalTime}}</p>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {
          visible: false,
          currentTime: "",
          arrivalTime: "",
          defaultValue: "",
        };
      },
      methods: {
        changeDate(val) {
          let now = Date.now();
          if (val < now) {
            this.$message.error("下班时间必须大于当前时间");
            return;
          }
          this.arrivalTime = this.defaultValue;
          this.timer();
        },
        timer() {
          let timer = null;
          if (timer) {
            clearInterval(timer);
          }
          this.setTime();
          timer = setInterval(() => {
            this.currentTime = new Date().toLocaleString();
            this.setTime();
          }, 1000);
        },
        setTime() {
          let now = Date.now();
          this.arrivalTime = parseInt((this.defaultValue - now) / 1000);
          if (this.arrivalTime > 3600) {
            let h = parseInt(this.arrivalTime / 3600);
            let m = parseInt((this.arrivalTime % 3600) / 60);
            let s = parseInt((this.arrivalTime % 60) + 1);
            this.arrivalTime = `${h}小时${m}分钟${s}秒`;
          } else {
            let m = parseInt(this.arrivalTime / 60);
            let s = parseInt((this.arrivalTime % 60) + 1);
            this.arrivalTime = `${m}分钟${s}秒`;
          }
        },
      },
      mounted() {
        this.currentTime = new Date().toLocaleString();

        this.defaultValue = new Date();
        this.defaultValue = new Date(
          this.defaultValue.getFullYear(),
          this.defaultValue.getMonth(),
          this.defaultValue.getDate(),
          18,
          0
        );

        this.timer();
      },
      watch: {},
    });
  </script>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      #app {
        width: 400px;
        height: 400px;
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p v-cloak>当前时间：{{currentTime}}</p>

      <el-time-picker
        v-model="defaultValue"
        :picker-options="{
      selectableRange: '8:30:00 - 23:30:00'
    }"
        placeholder="下班时间"
        value-format="timestamp"
        @change="changeDate"
      >
      </el-time-picker>
      <p>距离下班时间还有</p>
      <p v-cloak>{{arrivalTime}}</p>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {
          visible: false,
          currentTime: "",
          arrivalTime: "",
          defaultValue: "",
        };
      },
      methods: {
        changeDate(val) {
          let now = Date.now();
          if (val < now) {
            this.$message.error("下班时间必须大于当前时间");
            return;
          }
          this.arrivalTime = this.defaultValue;
          this.timer();
        },
        timer() {
          let timer = null;
          if (timer) {
            clearInterval(timer);
          }
          this.setTime();
          timer = setInterval(() => {
            this.currentTime = new Date().toLocaleString();
            this.setTime();
          }, 1000);
        },
        setTime() {
          let now = Date.now();
          this.arrivalTime = parseInt((this.defaultValue - now) / 1000);
          if (this.arrivalTime > 3600) {
            let h = parseInt(this.arrivalTime / 3600);
            let m = parseInt((this.arrivalTime % 3600) / 60);
            let s = parseInt((this.arrivalTime % 60) + 1);
            this.arrivalTime = `${h}小时${m}分钟${s}秒`;
          } else {
            let m = parseInt(this.arrivalTime / 60);
            let s = parseInt((this.arrivalTime % 60) + 1);
            this.arrivalTime = `${m}分钟${s}秒`;
          }
        },
      },
      mounted() {
        this.currentTime = new Date().toLocaleString();

        this.defaultValue = new Date();
        this.defaultValue = new Date(
          this.defaultValue.getFullYear(),
          this.defaultValue.getMonth(),
          this.defaultValue.getDate(),
          18,
          0
        );

        this.timer();
      },
      watch: {},
    });
  </script>
</html>

　　

posted @ 2022-08-26 13:17  你丫才美工  阅读(99)  评论(0)    收藏  举报