用vue2.6實現一個抖音很火的【時間輪盤】屏保小DEMO

時間 2019-11-06

標籤 vue2.6 vue 實現一個時間輪盤 demo 简体版

原文原文鏈接

寫在前面：

前段時間看抖音，有人用時間輪盤做爲動態的桌面壁紙，一時間成爲全網最火的電腦屏保，後來小米等運用市場也出現了【時間輪盤】，有點像五行八卦，感受很好玩，因而突發奇想，本身寫一個網頁版小DEMO玩玩，先看看效果：
css

固然實現這個效果，前端的角度來講，有不少，這裏介紹最簡單的，達到這個效果純粹是元素圓性佈局，若是僅僅是這樣確定沒有達到各位老鐵心理需求，因此既然，作了確定是要作一個麻雀雖小五臟俱全的小demo,因而就把vue全家桶用上帶設置的小項目。接下來就一步一步帶各位從0到1構建這個小東西。vue

1、項目需求：

功能描述：實現一個帶設置的併兼容移動端的時間羅盤(設置包含：多語言切換，垂直水平位置，縮放大小，旋轉角度，文字顏色，背景顏色等)node

2、預備基礎知識點：git

一、圓形佈局，以下效果圖github

解析：
一、圓心：O點、半徑r ，我這裏用transform: translateX值來設置半徑值;
二、圓心角：∠BOM;
三、須要佈局的元素：A、B、C、D、E、F、G、H絕對定位的元素;
四、絕對定位時的元素的座標點，能夠用transform:rotate值，按照秒、分、小時、上下午、星期、日期、月等份旋轉角度來控制各個元素在圓心的位置vue-cli

有了這些信息，咱們就開始寫代碼了(vue構建項目這裏就略了 )，簡單的直接用vue-cli3npm

開發環境基本信息：npm: v6.4.1; node: v10.8.0; vue-cli 3.5.3bash

代碼風格規範：ESLint + Prettiercookie

3、項目佈局效果開發

3.1佈局

首先咱們看到時間輪盤分別由秒、分、小時、上下午、星期、日期、月，這幾項組成，因而把他們都封裝在一個小模塊組件裏

<template>
  <div class="home">
    <Second :second="second" />
    <Minute :minute="minute" />
    <Hour :hour="hour" />
    <Apm :apm="apm" />
    <Week :week="week" />
    <Day :day="day" />
    <Month :month="month" />
  </div>
</template>複製代碼

並且同一圓心，因此公共部分的樣式能夠共用

<style lang="scss">
.home {
  ul {
    list-style-type: none;
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 60px;
    width: 60px;
    li {
      position: absolute;
      height: 60px;
      width: 60px;
      color: #fff;
      text-align: center;
      font-size: 14px;
      line-height: 20px;
    }
  }
}
</style>複製代碼

這裏圓佈局，咱們以星期爲例看下面代碼

Week.vue

<template>
  <ul>
    <li
      v-for="(item, index) in weekList"
      :key="index"
    >
      {{ item }}
    </li>
  </ul>
</template>

<style scoped lang="scss">
ul {
  z-index: 5;
  @for $i from 1 through 7 {
    li:nth-child(#{$i}) {
      transform: rotate(#{$i * 360/7 * 1deg}) translateX(180px);
    }
  }
}
</style>
複製代碼

先看看佈局部分 ul li 標籤v-for出週一到周天，一共七天，因此下面li的樣式，熟悉scss語法的同窗，就嘴角微微上揚，@for 的運用，360度被分紅7等份，嗯，真香。來看一波效果，還不錯

那接下來，一樣的操做把秒、分、小時、上下午、星期、日期、月所有配齊，耐心調translateX()其讓秒、分、小時、上下午、星期、日期、月的半徑不會互相重疊，看看效果，初具樣子

注意由於同一圓心和絕對定位因此每一個模塊要z-index 設置層

3.2JS同步時間

咱們只須要經過JavaScript Date 對象new一個 Date()出來，而後經過Date 對象方法，獲取到具體秒、分、小時、轉換上下午、星期、日期、月。代碼以下

<script>
export default {
  name: "home",
  methods: {
    start() {
      setInterval(() => {
        let data = new Date();
        this.second = data.getSeconds();
        this.minute = data.getMinutes();
        this.hour = data.getHours();
        this.week = data.getDay();
        this.day = data.getDate();
        this.month = data.getMonth() + 1;
        if (this.hour > 12) {
          this.apm = 2;
        } else {
          this.apm = 1;
        }
      }, 1000);
    }
  },
  created() {
    this.start();
  }
};
</script>複製代碼

3.2轉動

而後經過具體的秒、分、小時、上下午、星期、日期、月值ul轉動transform：rotate：，來控制角度，並且當前值進行文字高亮。仍是以星期爲例Week.vue

<template>
  <ul :style="{ transform: `rotate(${((rotates * 360) / 7) * 1}deg)` }">
    <li
      v-for="(item, index) in weekList"
      :key="index"
      :class="{ hover: index == rotates - 1 || index == rotates + 6 }"
    >
      {{ item }}
    </li>
  </ul>
</template>
<script>
export default {
  name: "Week",
  props: ["week"],
  data() {
    return {
      rotates: "",
      weekList: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期天"
      ]
    };
  },
  watch: {
    week(val) {
      this.rotates = val;
    }
  }
};
</script>複製代碼

咱們經過watch父組件home.vue傳過來的星期數，而後對ul父容器進行旋轉，li對應的星期數，動態加當前星期class .hover樣式

li {
      position: absolute;
      height: 60px;
      width: 60px;
      color: #fff;
      text-align: center;
      font-size: 14px;
      line-height: 20px;
     // 高亮
      &.hover {
        text-shadow: rgb(255, 255, 255) 0px 0px 10px,
          rgb(255, 255, 255) 0px 0px 20px, rgb(255, 0, 222) 0px 0px 30px,
          rgb(255, 0, 222) 0px 0px 40px, rgb(255, 0, 222) 0px 0px 70px,
          rgb(255, 0, 222) 0px 0px 80px, rgb(255, 0, 222) 0px 0px 100px;
      }
    }複製代碼

:class="{ hover: index == rotates - 1 || index == rotates + 6 }"，實現當前星期高亮，其餘秒、分、小時、上下午、星期、日期、月亦是如此。接下來就能夠愛的魔力轉圈圈了

到這裏，基礎效果咱們已經開發完了

4、設置開發

4.1 全屏，這裏直接用的是screenfull.js

4.2 切換語言,這裏用了 i18n和js-cookie第三方插件，具體實現是模仿vue-element-admin的實現方式

import Vue from "vue";
import VueI18n from "vue-i18n";
import Cookies from "js-cookie";
import enLocale from "./en";
import zhLocale from "./zh";
import esLocale from "./zw";

Vue.use(VueI18n);

const messages = {
  en: {
    ...enLocale
  },
  zh: {
    ...zhLocale
  },
  zw: {
    ...esLocale
  }
};
export function getLanguage() {
  const chooseLanguage = Cookies.get("language");
  if (chooseLanguage) return chooseLanguage;

  const language = (
    navigator.language || navigator.browserLanguage
  ).toLowerCase();
  const locales = Object.keys(messages);
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale;
    }
  }
  return "en";
}
const i18n = new VueI18n({
  locale: getLanguage(),
  messages
});

export default i18n;複製代碼

值得注意的是咱們把秒、分、小時、上下午、星期、日期、月通通都寫在了多語言切換裏，因此，咱們要時刻計算語言的切換變化後的值。以星期爲例，這裏computed，weekList，實時計算它的變化，而後渲染頁面

export default {
  name: "week",
  props: ["week"],
  data() {
    return {
      rotates: ""
    };
  },
  computed: {
    weekList: {
      get() {
        return this.$t("week");
      }
    }
  },
  watch: {
    week(val) {
      this.rotates = val;
    }
  }
};
</script>複製代碼