{"id":28089459,"url":"https://github.com/zkerhcy/digital-clock-vue","last_synced_at":"2025-05-13T12:58:28.103Z","repository":{"id":39641143,"uuid":"245806797","full_name":"zkerhcy/digital-clock-vue","owner":"zkerhcy","description":"A digital clock simulation builds on Vue.","archived":false,"fork":false,"pushed_at":"2023-01-05T09:26:38.000Z","size":2147,"stargazers_count":10,"open_issues_count":18,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-29T09:47:39.557Z","etag":null,"topics":["clock","digital","digital-clock","javascript","vue","vue-digital-clock"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zkerhcy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-08T12:03:53.000Z","updated_at":"2023-04-11T09:53:11.000Z","dependencies_parsed_at":"2023-02-03T22:46:30.684Z","dependency_job_id":null,"html_url":"https://github.com/zkerhcy/digital-clock-vue","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkerhcy%2Fdigital-clock-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkerhcy%2Fdigital-clock-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkerhcy%2Fdigital-clock-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkerhcy%2Fdigital-clock-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zkerhcy","download_url":"https://codeload.github.com/zkerhcy/digital-clock-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948387,"owners_count":21988953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clock","digital","digital-clock","javascript","vue","vue-digital-clock"],"created_at":"2025-05-13T12:58:27.435Z","updated_at":"2025-05-13T12:58:28.068Z","avatar_url":"https://github.com/zkerhcy.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"readme":"# digital-clock-vue\n\n[![LICENSE](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/zkerhcy/digital-clock-vue/blob/master/LICENSE)\n\n\u003e A digital clock simulation build on Vue.\n\n![digital-clock](asserts/img1.gif)\n\nwithout seconds:\n\n![digital-clock-without-seconds](asserts/img2.gif)\n\nYou can also use the [digital-number](src/digital-number.vue) component.\n\n![digital-number](asserts/img3.png)\n\n## Installation\n\nvia NPM:\n\n```shell\nnpm install --save digital-clock-vue\n```\n\nvia Yarn:\n\n```shell\nyarn add digital-clock-vue\n```\n\n## Usage\n\n```js\nimport DigitalClockVue, { DigitalNumber } from 'digital-clock-vue'\n\nexport default {\n  components: {\n    DigitalClockVue,\n    DigitalNumber\n  }\n}\n```\n\n## Props\n\n| Prop          | Type    | Desc                                                 |\n| ------------- | ------- | ---------------------------------------------------- |\n| `color`       | String  | CSS color for digital number and twink.              |\n| `showSeconds` | Boolean | Determine whether to show seconds, default is false. |\n\n## Examples\n\n```html\n\u003c!-- recommend aspect ratio 4:1 --\u003e\n\u003cdigital-clock-vue\n  color=\"red\"\n  showSeconds\n  style=\"background: black; width: 400px; height: 100px;\"\n/\u003e\n\n\u003c!-- recommend aspect ratio when without seconds 8:3 --\u003e\n\u003cdigital-clock-vue\n  color=\"#39af78\"\n  style=\"background: #2f4053; width: 240px; height: 90px;\"\n/\u003e\n\n\u003c!-- digital number --\u003e\n\u003cdiv\u003e\n  \u003cdigital-number\n    :key=\"item\"\n    :num=\"item\"\n    color=\"#1973de\"\n    style=\"width: 45px; height:75px; margin-left: 2px;\"\n    v-for=\"item in Array.apply(null, {length: 10}).map((_, i) =\u003e i)\"\n  \u003e\u003c/digital-number\u003e\n\u003c/div\u003e\n```\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkerhcy%2Fdigital-clock-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzkerhcy%2Fdigital-clock-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkerhcy%2Fdigital-clock-vue/lists"}