2021-10-08 vue.js实现抖音很火八卦时间数字罗盘屏保壁纸

本文链接：https://blog.csdn.net/baidu_39093251/article/details/120656230

vue.js实现抖音很火八卦时间数字罗盘屏保壁纸

代码如下.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Clock</title>
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.6.9/vue.min.js"></script>
<style>
html,
body {
   
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000;
}
#clock {
   
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* .content {
    width: 700px;
    height: 700px;
} */
canvas {
   
    background-color: #000;
    width: 100%;
    height: 100%;
}
</style>
</head>

<body>
<div id="clock">
    <div id="content">
        <canvas ref="cav" width="1400" height="1400"></canvas>
    </div>
</div>
<script>
//https://cubic-bezier.com/#.17,.67,.83,.67
function TransitionTrigger(duration, p1, p2, handler) {
   
    let timestamp = 0;
    let p0 = {
   x: 0, y: 0};
    let p3 = {
   x: 1, y: 1};

    function loop(frame) {
   
        if (timestamp === 0) {
   
            timestamp = frame;
        }
        let diff = frame - timestamp;
        let b = bezier(diff / duration);
        handler && handler(b.y);
        if (diff <= duration) {
   
            window.requestAnimationFrame(loop);
            return;
        }
        handler && handler(1);
    }

    function bezier(t) {
   
        let x = p0.x * Math.pow((1 - t), 3) + 3 * p1.x * t * Math.pow((1 - t), 2);
        x += 3 * p2.x * t * t * (1 - t);
        x += p3.x * t * t * t;
        let y = p0.y * Math.pow((1 - t), 3) + 3 * p1.y * t * Math.pow((1 - t), 2);
        y += 3 * p2.y * t * t * (1 - t);
        y += p3.y * t * t * t;
        return {
   x, y};
    }

    this.start = function () {
   
        window.requestAnimationFrame(loop);
    };
}

new Vue({
   
    el: '#clock',
    name: 'clock',
    data() {
   
        return {
   
            dom: null,
            ctx: null,
            date: null,
            center: [400, 400],
            months: [],
            days: [],
            weeks: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
            hours: [],
            minutes: [],
            seconds: [],
            radiusStep: 100,
            wordsMapping: [