lit-html实现实时走动的时钟效果代码-html代码-BFW代码库

lit-html实现实时走动的时钟效果代码

代码语言：html

所属分类：其他

代码描述：lit-html实现实时走动的时钟效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  

    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
      }
      lit-clock {
        width: 100vmin;
        height: 100vmin;
      }
    </style>



</head>



  <body>
    <lit-clock></lit-clock>


  
      <script  type="module">


import { html, render, svg } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js';
import range from 'https://unpkg.com/lodash-es@4.17.4/range.js';

/** 
 * Adapted from the Ractive.js clock example: http://www.ractivejs.org/examples/clock/
 */
export class LitClock extends HTMLElement {

  get date() {return this._date;}
  set date(v) {this._date = v;this.invalidate();}

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    setInterval(() => {
      this.date = new Date();
    }, 1000);
  }

  render() {
    return html`
      <style>
        :host {
          display: block;
        }
        
        .clock-face {
          stroke: #333;
          fill: white;
        }
        
        .minor {
          stroke: #999;
          stroke-width: 0.5;
        }
        
        .major {
          stroke: #333;
        }
        
        .hour {
          stroke: #333;
        }
        
        .minute {
          stroke: #666;
        }
        
        .second, .second-counterweight {
          stroke: rgb(180,0,0);
        }
        
        .second-co.........完整代码请登录后点击上方下载按钮下载查看