Git Product home page Git Product logo

clock's Introduction

Clock

说明

该插件使用canvas实现可配置,可拖拽时钟,对于不支持canvas的浏览器来说,无法使用该插件。无其他依赖项,体积小,使用简单方便。

快速上手

  1. 只需下载Clock.js文件到本地,将文件引入到html页面,示例如下:

    <script src="Clock.js"></script>

  2. 具体用法:

    //html页面
    <canvas id='clock' width='200' height='200'></canvas>
    //js页面
     var clock = new Clock({id:'clock'})
  3. 构造函数参数说明:

    Clock构造函数的参数是可配置化的一个对象,有很多参数,说明如下:

    {
        id:'clock',                //字符串类型,元素canvas的id
        hourColor: '#4C3FFC',       //字符串类型,时针颜色
        minuteColor: '#5073FF',     //字符串类型,分针颜色
        secondColor: 'red',         //字符串类型,秒针颜色
        clockBorderColor: '#BAC8FC',//字符串类型,时钟边框颜色
        dateColor: '#8299FF',       //字符串类型,日期颜色 
        numberColor: '#1905C9',     //字符串类型,时钟表盘数字颜色
        dotOfhmsColor: '#fff',      //字符串类型,时针分针秒针交织点颜色
        dotColor: '#ccc',           //字符串类型,表盘数字旁边点的颜色
        dotIntColor: '#01071F'      //字符串类型,表盘数字旁边整点的颜色
    }
    //参数id是必传项,其余参数是可选项
  4. 效果图展示与说明:

    image.png

如有不足之处,欢迎指出

clock's People

Contributors

tian-cai avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.