欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用vue2.6實(shí)現(xiàn)抖音【時(shí)間輪盤】屏保效果附源碼

 更新時(shí)間:2019年04月24日 10:20:30   作者:codercao  
前段時(shí)間看抖音,有人用時(shí)間輪盤作為動(dòng)態(tài)的桌面壁紙,一時(shí)間成為全網(wǎng)最火的電腦屏保,后來(lái)小米等運(yùn)用市場(chǎng)也出現(xiàn)了【時(shí)間輪盤】,有點(diǎn)像五行八卦,感覺(jué)很好玩,于是突發(fā)奇想,自己寫一個(gè)網(wǎng)頁(yè)版小DEMO玩玩,需要的朋友可以參考下

寫在前面:

前段時(shí)間看抖音,有人用時(shí)間輪盤作為動(dòng)態(tài)的桌面壁紙,一時(shí)間成為全網(wǎng)最火的電腦屏保,后來(lái)小米等運(yùn)用市場(chǎng)也出現(xiàn)了【時(shí)間輪盤】,有點(diǎn)像五行八卦,感覺(jué)很好玩,于是突發(fā)奇想,自己寫一個(gè)網(wǎng)頁(yè)版小DEMO玩玩,先看看效果:

當(dāng)然實(shí)現(xiàn)這個(gè)效果,前端的角度來(lái)說(shuō),有很多,這里介紹最簡(jiǎn)單的,達(dá)到這個(gè)效果純粹是元素圓性布局,如果僅僅是這樣肯定沒(méi)有達(dá)到各位老鐵心理需求,所以既然,做了肯定是要做一個(gè)麻雀雖小五臟俱全的小demo,于是就把vue全家桶用上帶設(shè)置的小項(xiàng)目。接下來(lái)就一步一步帶各位從0到1構(gòu)建這個(gè)小東西。

一、項(xiàng)目需求:

功能描述:實(shí)現(xiàn)一個(gè)帶設(shè)置的并兼容移動(dòng)端的時(shí)間羅盤(設(shè)置包含:多語(yǔ)言切換,垂直水平位置,縮放大小,旋轉(zhuǎn)角度,文字顏色,背景顏色等)

二、預(yù)備基礎(chǔ)知識(shí)點(diǎn):

1、圓形布局,如下效果圖

解析:

1、圓心:O點(diǎn)、半徑r ,我這里用transform: translateX值來(lái)設(shè)置半徑值;
2、圓心角:∠BOM;
3、需要布局的元素:A、B、C、D、E、F、G、H絕對(duì)定位的元素;
4、絕對(duì)定位時(shí)的元素的坐標(biāo)點(diǎn),可以用transform:rotate值,按照秒、分、小時(shí)、上下午、星期、日期、月等份旋轉(zhuǎn)角度來(lái)控制各個(gè)元素在圓心的位置

有了這些信息,我們就開(kāi)始寫代碼了(vue構(gòu)建項(xiàng)目這里就略了 ),簡(jiǎn)單的直接用vue-cli3

三、項(xiàng)目布局效果開(kāi)發(fā)

3.1布局

首先我們看到時(shí)間輪盤分別由 秒、分、小時(shí)、上下午、星期、日期、月,這幾項(xiàng)組成,于是把他們都封裝在一個(gè)小模塊組件里

<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 標(biāo)簽v-for出周一到周天,一共七天,所以下面li的樣式,熟悉scss語(yǔ)法的同學(xué),就嘴角微微上揚(yáng),@for 的運(yùn)用,360度被分成7等份 , 嗯,真香。來(lái)看一波效果,還不錯(cuò)

那接下來(lái),同樣的操作把秒、分、小時(shí)、上下午、星期、日期、月全部配齊,耐心調(diào)translateX()其讓秒、分、小時(shí)、上下午、星期、日期、月的半徑不會(huì)互相重疊,看看效果,初具樣子

注意因?yàn)橥粓A心和絕對(duì)定位所以每個(gè)模塊要z-index 設(shè)置層

3.2JS同步時(shí)間

我們只需要通過(guò)JavaScript Date 對(duì)象new一個(gè) Date()出來(lái),然后通過(guò)Date 對(duì)象方法,獲取到具體秒、分、小時(shí)、轉(zhuǎn)換上下午、星期、日期、月。代碼如下

<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轉(zhuǎn)動(dòng)

然后通過(guò)具體的秒、分、小時(shí)、上下午、星期、日期、月值ul轉(zhuǎn)動(dòng)transform:rotate:,來(lái)控制角度,而且當(dāng)前值進(jìn)行文字高亮。還是以星期為例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>

我們通過(guò)watch父組件home.vue傳過(guò)來(lái)的星期數(shù),然后對(duì)ul父容器進(jìn)行旋轉(zhuǎn),li對(duì)應(yīng)的星期數(shù),動(dòng)態(tài)加當(dāng)前星期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 }",實(shí)現(xiàn)當(dāng)前星期高亮,其他秒、分、小時(shí)、上下午、星期、日期、月亦是如此。接下來(lái)就可以愛(ài)的魔力轉(zhuǎn)圈圈了

到這里,基礎(chǔ)效果我們已經(jīng)開(kāi)發(fā)完了

四、設(shè)置開(kāi)發(fā)

4.1 全屏,這里直接用的是screenfull.js

4.2 切換語(yǔ)言,這里用了 i18n和js-cookie第三方插件,具體實(shí)現(xiàn)是模仿vue-element-admin的實(shí)現(xiàn)方式

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;

值得注意的是我們把秒、分、小時(shí)、上下午、星期、日期、月統(tǒng)統(tǒng)都寫在了多語(yǔ)言切換里,所以,我們要時(shí)刻計(jì)算語(yǔ)言的切換變化后的值。以星期為例,這里computed,weekList,實(shí)時(shí)計(jì)算它的變化,然后渲染頁(yè)面

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

看效果,為了美觀簡(jiǎn)單加了一點(diǎn)設(shè)置的小效果,目前支持簡(jiǎn)體中文,繁體中文,英文

4.3其他設(shè)置功能待開(kāi)發(fā)...

占坑

當(dāng)然布局用畫布寫,肯定是更優(yōu)雅,總的來(lái)說(shuō)實(shí)現(xiàn)起來(lái)并不是很難,如果要實(shí)現(xiàn)其他設(shè)置功能的話,部分邏輯需要重構(gòu),其他設(shè)置功能近期會(huì)陸陸續(xù)續(xù)更新發(fā)布出來(lái),本項(xiàng)目源碼學(xué)習(xí)移步

項(xiàng)目源碼地址

總結(jié)

以上所述是小編給大家介紹的使用vue2.6實(shí)現(xiàn)抖音【時(shí)間輪盤】屏保效果附源碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

相關(guān)文章

  • Vue實(shí)現(xiàn)拖拽改變列表順序詳解

    Vue實(shí)現(xiàn)拖拽改變列表順序詳解

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)拖拽改變列表順序的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-04-04
  • 3分鐘讀懂移動(dòng)端rem使用方法(推薦)

    3分鐘讀懂移動(dòng)端rem使用方法(推薦)

    這篇文章主要介紹了rem使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • vue3?ts編寫echart是tooltip無(wú)法展示的解決

    vue3?ts編寫echart是tooltip無(wú)法展示的解決

    這篇文章主要介紹了vue3?ts編寫echart是tooltip無(wú)法展示的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue監(jiān)聽(tīng)一個(gè)數(shù)組id是否與另一個(gè)數(shù)組id相同的方法

    Vue監(jiān)聽(tīng)一個(gè)數(shù)組id是否與另一個(gè)數(shù)組id相同的方法

    今天小編就為大家分享一篇Vue監(jiān)聽(tīng)一個(gè)數(shù)組id是否與另一個(gè)數(shù)組id相同的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • 詳解vue嵌套路由-params傳遞參數(shù)

    詳解vue嵌套路由-params傳遞參數(shù)

    本篇文章主要介紹了詳解vue嵌套路由-params傳遞參數(shù),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-05-05
  • 解決element-ui的下拉框有值卻無(wú)法選中的情況

    解決element-ui的下拉框有值卻無(wú)法選中的情況

    這篇文章主要介紹了解決element-ui的下拉框有值卻無(wú)法選中的情況,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11
  • vue3前端實(shí)現(xiàn)全屏顯示及元素垂直填滿頁(yè)面效果

    vue3前端實(shí)現(xiàn)全屏顯示及元素垂直填滿頁(yè)面效果

    這篇文章主要給大家介紹了關(guān)于vue3前端實(shí)現(xiàn)全屏顯示及元素垂直填滿頁(yè)面效果的相關(guān)資料,文中還給大家介紹了vue3實(shí)現(xiàn)某一個(gè)元素全屏之后就黑屏了的解決辦法,需要的朋友可以參考下
    2024-02-02
  • Vue?element實(shí)現(xiàn)權(quán)限管理業(yè)務(wù)流程詳解

    Vue?element實(shí)現(xiàn)權(quán)限管理業(yè)務(wù)流程詳解

    目前本人再使用vue-element-admin項(xiàng)目時(shí)都是通過(guò)直接刪除一些用不上的路由來(lái)進(jìn)行側(cè)邊欄的清除,但是其實(shí)有一個(gè)更加好的辦法來(lái)對(duì)項(xiàng)目的側(cè)邊欄顯示的內(nèi)用進(jìn)行管理,就是權(quán)限管理,其實(shí)也不知道這個(gè)方法好不好,原理上來(lái)說(shuō)時(shí)跟直接刪除該路由的方式時(shí)一樣的
    2022-08-08
  • 在?Vue?中控制表單輸入方法詳解

    在?Vue?中控制表單輸入方法詳解

    這篇文章主要介紹了在?Vue?中控制表單輸入方法詳解的相關(guān)資料,需要的朋友可以參考下
    2023-04-04
  • vue2使用keep-alive緩存多層列表頁(yè)的方法

    vue2使用keep-alive緩存多層列表頁(yè)的方法

    今天小編就為大家分享一篇vue2使用keep-alive緩存多層列表頁(yè)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09

最新評(píng)論