{"_id":"r-analog-clock","_rev":"2-895f4b69308fa0b078ce2fe02d87ae0a","name":"r-analog-clock","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"r-analog-clock","version":"1.0.0","description":"基于react和concise-clock开发的模拟时钟组件","main":"lib/index.js","scripts":{"build":"nwb build-react-component","start":"nwb serve-react-demo","release":"npm run build & npm publish"},"dependencies":{"concise-clock":"^1.0.3"},"peerDependencies":{"react":"16.x"},"devDependencies":{"antd":"^3.11.6","nwb":"0.23.x","prop-types":"^15.6.2","react":"^16.7.0","react-dom":"^16.7.0"},"author":{"name":"wenlun"},"license":"MIT","keywords":["react","react.js","react-component","clockwise","clock","digital clock","r-digital-clock","react-digital-clock","analog clock","r-clock","react-clock","react-analog-clock","time","模拟时钟","数字时钟"],"repository":{"type":"git","url":"git+https://github.com/destiny-wenlun/r-analog-clock.git"},"bugs":{"url":"https://github.com/destiny-wenlun/r-analog-clock/issues"},"homepage":"https://github.com/destiny-wenlun/r-analog-clock#readme","gitHead":"5f0ff14a62709564ba5c682b4def776569650eae","_id":"r-analog-clock@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"8.9.3","_npmUser":{"name":"wenlun","email":"1070586554@qq.com"},"dist":{"integrity":"sha512-WmYJGWWOr0u7Z2jzF9D3eedcfFcuFH/YE8w4dlsSJHk5FJci8mFUfO7kNtJa4XkMi4svVQPhlPBdQj9eBunCBA==","shasum":"89f8ab412f73514b849a1cf2e0eb7cb4d59a8e52","tarball":"https://registry.npmjs.org/r-analog-clock/-/r-analog-clock-1.0.0.tgz","fileCount":6,"unpackedSize":13477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcIvdNCRA9TVsSAnZWagAAEfwP+QDsUaeQaF/glPCp2eJb\nC6MAYwPnaAIPa9anaB9VRPiqZ8It850ympQJExHZwCY9lFb6oDm6nG0TeElc\nNUsWcpZ+CfCtupBp/vi3gJ59sKo+FQHlx1d1v1rvSW4ofDMkNCIklSXNWydo\nY8srvLyJifpv8SqzESB/kBBqrxFvApT/46Q4tzPaX1qxDZ6Z+g+wFv8XBfr/\n2RWiu045GnCyHGDBb+TNCG9FEHOSpNBuZX8/lcvbQVbhnSq1+561UYS+3S4s\nYNX3G1JGpzudPWMzmWkTqd0ZkJVQ+fbWEkNtPx1XnooRT4+CcY6gMAnL1jNC\njNN1b1Wnr+hDdb3OBOwaUt+zL+0FlgbnP9E7neGXBXRHTGpoHqiGt3q7kKhm\nYsXH+X4yOe97uYX2Byg79HN/4SJda1pLKOJ0b8HsA3KXiUlASwb2eFzMJOzu\nUGiBqGO9oBhQrWFkQ2zJ3DtTDj0QOPrPNGmUhhU9FjQW+dkhV3U1xYmxO+WQ\nJt3OzWOo3/v2Pk+DEIdwSpjIpgaW8C6xnXAG1mpjVVvvLybKTyPys2cbeC+c\n+AcqPmI3M8WFSpgXcNcpUdoNFt1j+Kz9sEMD3L+mJx4e6d2GE3ZssnOFlsYN\ndLMJPHZ2SG9cQLYEnlUiIOA/s8k19wt3a8lE/wXHZxpT7kSGlMrjja1EmJaV\n+qDg\r\n=WDtA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhZEdsCo44oIm43CprpKscWe4yICrq9WOX0s43c1WA+gIhAN2EnSKM4XpA2tqrR20zmINxmjw0+31oj/ALZiy8bzw3"}]},"maintainers":[{"name":"wenlun","email":"1070586554@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r-analog-clock_1.0.0_1545795405262_0.9610241371772863"},"_hasShrinkwrap":false},"1.0.1":{"name":"r-analog-clock","version":"1.0.1","description":"基于react和concise-clock开发的模拟时钟组件","main":"lib/index.js","scripts":{"build":"nwb build-react-component","start":"nwb serve-react-demo","release":"npm run build & npm publish"},"dependencies":{"concise-clock":"^1.0.4"},"peerDependencies":{"react":"16.x"},"devDependencies":{"antd":"^3.11.6","nwb":"0.23.x","prop-types":"^15.6.2","react":"^16.7.0","react-dom":"^16.7.0"},"author":{"name":"wenlun"},"license":"MIT","keywords":["react","react.js","react-component","clockwise","clock","digital clock","r-digital-clock","react-digital-clock","analog clock","r-clock","react-clock","react-analog-clock","time","模拟时钟","数字时钟"],"repository":{"type":"git","url":"git+https://github.com/destiny-wenlun/r-analog-clock.git"},"bugs":{"url":"https://github.com/destiny-wenlun/r-analog-clock/issues"},"homepage":"https://github.com/destiny-wenlun/r-analog-clock#readme","gitHead":"e311695aa8e5cad69a0b840a53b4dadc72691650","_id":"r-analog-clock@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"8.9.3","_npmUser":{"name":"wenlun","email":"1070586554@qq.com"},"dist":{"integrity":"sha512-oLTYilV6oDiyNzN+n1RF/LQsvk62xZUCXojLlnQxbh/VtHU9HKbsOgcl9/aHq8rMpAiKN2nVqWuskT2fLRg38w==","shasum":"e3197049de2b6b2f08376f5c0c681739c351dcc4","tarball":"https://registry.npmjs.org/r-analog-clock/-/r-analog-clock-1.0.1.tgz","fileCount":6,"unpackedSize":13712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLE+9CRA9TVsSAnZWagAAoNAP/0HOJMa6Xs2evXKvMDg2\nLQVgE/Ppk6pwyyBL6xUg0P4nLiBWeumXoOIcvjTkmkhHjVrQN1BEKiSWfU9n\nuQzNNXqmBs7MNJsGQSju+OSYklViUhM4oPn3e6RwwWL/BCFAPYx57aRHuHBQ\nyX5daEQoZZhtKcp3BM0+Qwn8ttQnfXS6h3gmKPOgsyLJEg+8iEtfSHgi02ik\n4XHWRRc70G8XWK0WRkVMNdG6JkDQpF1eDsBTFXSCB+fuYeDfuXEPV5JpSPF8\njYRLLvF+O054xXqMdGzWqB4431KE/QQ7YGylz2Vrza1JtzeXLnmFvFsuqgzv\nBXNneSaeLkgqWpsSJUZY748ZfWRKJjoS+i2qY+fOjS7adYdY71A+2Mpo/Qgr\nB5YZIKXcGqcmcB74R8IBQbj9j8o8Q0pWoNZ/r7ypk7rL5C/JAUKTsasuzURK\nd6DLIaNmCWlRilnJnG8cVQnYJvX/YX6twEJ/apY7OmD/vPq7Q8M1j346TvP7\nIZM4tu0H+L/lyZs2OKORkozCFQ0WHzx1C7WtMsLNhGN1IcEAiUbt+Imz8gqZ\ni2GIqb+gJ1HuNC17HptXB3Zcau4ZjS0JLuli+67le9n6ypmhYDCCf6ltvE9i\nyI00tEfeeoXjBhvzoj0svMYd12nzTUicbuyb/G7A/IyK0VHx6o5W3EsjKzSS\nXUWP\r\n=Y9eJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQ+XUWUogKzA9zhFBVMbaI1UwAifUeup63ocaBJfU3tgIgKyykhqbYvScJR3UoAScBmlOcBXCN+UX8vrfSECuq/i8="}]},"maintainers":[{"name":"wenlun","email":"1070586554@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r-analog-clock_1.0.1_1546407869161_0.6937612988517912"},"_hasShrinkwrap":false}},"time":{"created":"2018-12-26T03:36:45.261Z","1.0.0":"2018-12-26T03:36:45.387Z","modified":"2022-05-14T00:04:26.665Z","1.0.1":"2019-01-02T05:44:29.318Z"},"maintainers":[{"name":"wenlun","email":"1070586554@qq.com"}],"description":"基于react和concise-clock开发的模拟时钟组件","homepage":"https://github.com/destiny-wenlun/r-analog-clock#readme","keywords":["react","react.js","react-component","clockwise","clock","digital clock","r-digital-clock","react-digital-clock","analog clock","r-clock","react-clock","react-analog-clock","time","模拟时钟","数字时钟"],"repository":{"type":"git","url":"git+https://github.com/destiny-wenlun/r-analog-clock.git"},"author":{"name":"wenlun"},"bugs":{"url":"https://github.com/destiny-wenlun/r-analog-clock/issues"},"license":"MIT","readme":"# 效果图\n<img src=\"https://raw.githubusercontent.com/destiny-wenlun/concise-clock/master/img/demo1.gif\" width=\"177\"  /><img src=\"https://raw.githubusercontent.com/destiny-wenlun/concise-clock/master/img/demo2.gif\" width=\"177\"  /><img src=\"https://raw.githubusercontent.com/destiny-wenlun/concise-clock/master/img/demo3.gif\" width=\"177\"  /><img src=\"https://raw.githubusercontent.com/destiny-wenlun/concise-clock/master/img/demo4.gif\" width=\"177\"  /><img src=\"https://raw.githubusercontent.com/destiny-wenlun/concise-clock/master/img/demo5.gif\" width=\"177\"  /><img src=\"https://raw.githubusercontent.com/destiny-wenlun/concise-clock/master/img/demo6.gif\" width=\"177\"  />\n\n>说明：这是基于react开发的一个模拟时钟组件。\n\n# 1.安装&使用\n* 安装\n```javascript\nnpm install -D r-analog-clock\n```\n+ 使用\n```javascript\nimport React, { Component } from 'react'\nimport AnalogClock from 'r-analog-clock'\n\nclass Demo extends Component{\n    render(){\n        return (\n            <div>\n                <AnalogClock />\n            </div>\n        )\n    }\n}\n```\n\n# 2.例子\n## 2.1 最简单使用\n* 代码\n```javascript\nimport React, { Component } from 'react'\nimport AnalogClock from 'r-analog-clock'\nclass Demo extends Component{\n    render(){\n        return (\n            <div>\n                <AnalogClock />\n            </div>\n        )\n    }\n}\n```\n* 效果  \n<br/>\n<img src=\"https://raw.githubusercontent.com/destiny-wenlun/concise-clock/master/img/demo1.gif\" width=\"300\"  />\n\n## 2.2 显示罗马数字\n* 代码\n```javascript\nimport React, { Component } from 'react'\nimport AnalogClock from 'r-analog-clock'\nclass Demo extends Component{\n    render(){\n        return (\n            <div>\n                <AnalogClock scaleType=\"roman\"/>\n            </div>\n        )\n    }\n}\n```\n* 效果  \n<br/>\n<img src=\"https://raw.githubusercontent.com/destiny-wenlun/concise-clock/master/img/demo2.gif\" width=\"300\"  />\n\n## 2.3 自定义边框颜色、背景色、刻度线颜色以及小时数字颜色\n* 代码\n```javascript\nimport React, { Component } from 'react'\nimport AnalogClock from 'r-analog-clock'\nclass Demo extends Component{\n    render(){\n        return (\n            <div>\n                <AnalogClock \n                    bordercolor=\"brown\" \n                    backgroundColor=\"black\" \n                    hourColor=\"white\" \n                    scaleColor=\"yellow\"/>\n            </div>\n        )\n    }\n}\n```\n* 效果\n<br/>\n<img src=\"https://raw.githubusercontent.com/destiny-wenlun/concise-clock/master/img/demo3.gif\" width=\"300\"  />\n\n## 2.4 自定义边框图片、背景图片\n* 代码1\n```javascript\nimport React, { Component } from 'react'\nimport AnalogClock from 'r-analog-clock'\nclass Demo extends Component{\n    render(){\n        return (\n            <div>\n                <AnalogClock \n                     borderImage=\"/static/img/border.png\"\n                     backgroundImage=\"/static/img/bg.jpg\"/>\n            </div>\n        )\n    }\n}\n```\n* 代码2 使用远程图片\n```javascript\nimport React, { Component } from 'react'\nimport AnalogClock from 'r-analog-clock'\nclass Demo extends Component{\n    render(){\n        return (\n            <div>\n                <AnalogClock \n                     borderImage=\"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545553805386&di=ec656215a2958d617ef30631e96304e0&imgtype=0&src=http%3A%2F%2Fimg1.ali213.net%2Fshouyou%2Fupload%2Fimage%2F2018%2F07%2F09%2F584_2018070952816881.png\"\n                     backgroundImage=\"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545553773235&di=1c768f80fc088c2edc20fa75af77c515&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F03%2F20160703164252_2WySB.jpeg\"/>\n            </div>\n        )\n    }\n}\n```\n* 效果\n<br/>\n<div>\n    <img src=\"https://raw.githubusercontent.com/destiny-wenlun/concise-clock/master/img/demo4.gif\" width=\"300\"  />\n    <img src=\"https://raw.githubusercontent.com/destiny-wenlun/concise-clock/master/img/demo5.gif\" width=\"300\"  />\n</div>\n\n# 3. props\n|属性|说明|类型|默认值|\n|:-|:-|:-|:-|\n|size|模拟时钟大小|Number|300|\n|time|指定显示某个时间，若有指定，那么时钟会停在指定的时间,类型可以是Date对象或字符串，如果是字符串，那么必须满足格式:\"hh:mm:ss\"|String \\| Date|-|\n|padding|内边距|Number|5|\n|borderWidth|边框宽度|Number|15|\n|borderColor|边框颜色|String|black|\n|borderImage|边框背景图片，优先级高于borderColor|String|-|\n|backgroundColor|背景色|String|white|\n|backgroundImage|背景图片，优先级高于backgroundColor|String|-|\n|backgroundMode|背景图显示模式,可选值part或full|String|full|\n|backgroundAlpha|背景图片的透明度|Number|0.5|\n|scaleType|显示的刻度类型，roman：罗马数字，arabic：阿拉伯数字，none：不显示|String|arabic|\n|scaleColor|刻度线颜色|String|#666|\n|hourColor|刻度值颜色|String|#666|\n|handType|指针类型|line \\| triangle|triangle|\n|secondHandColor|秒针颜色|String|red|\n|minuteHandColor|分针颜色|String|#666|\n|hourHandColor|时针颜色|String|black|\n|showShadow|时针颜色|Boolean|true|\n\n# 4. 方法\n>提示：给AnalogClock组件增加ref属性可获取组件的React实例，实例可执行下面的方法。例如：\n```javascript\nimport React, { Component } from 'react'\nimport AnalogClock from 'r-analog-clock'\nclass Demo extends Component{\n    componentDidMount() {\n        // this.ac.run();//运行时钟，如果props没有传入tiem属性，组件会自动调用run方法\n        // this.ac.stop();//停止时钟\n    }\n    render(){\n        return (\n            <div>\n                <AnalogClock ref={ac => this.ac = ac}/>\n            </div>\n        )\n    }\n}\n```\n\n|方法名|说明|\n|:-|:-|\n|run|如果模拟时钟处于停止状态，那么可以执行此方法重新运行模拟时钟。|\n|stop|执行此方法，可以停止一个正在运行的模拟时钟。|                  ","readmeFilename":"README.md"}