react打造一个番茄时间管理提醒倒计时时钟效果代码
代码语言:html
所属分类:其他
代码描述:react打造一个番茄时间管理提醒倒计时时钟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet"> <style> .app-wrapper { position: relative; margin: 0 auto; width: 300px; padding: 20px; box-shadow: inset 0 0 10px #DFDFDF; background-color: #F9F9F9; font-family: "Lato", sans-serif; } .clearfix:after { content: ''; display: table; clear: both; } .activity-type { position: absolute; left: 50%; transform: translate(-50%, -50%); font-size: 20px; text-transform: uppercase; } .activity-type.work { top: 28%; color: #218559; } .activity-type.rest { top: 76%; color: #06A2CB; } .progress-bar { position: relative; } .progress-bar svg { display: block; transform: rotate(-90deg); margin: 0 auto; } .progress-bar circle { stroke-width: .5em; stroke-dasharray: 565.48; } .progress-bar__indicator { transition: stroke-dashoffset .5s ease-out; } .work .progress-bar__indicator { stroke: #218559; } .rest .progress-bar__indicator { stroke: #06A2CB; } .progress-bar__bg { stroke: #eee; } .progress-bar__text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 60px; } /* buttons */ .buttons { } .button { position: absolute; padding: 10px 15px; background-color: transparent; border: none; font-size: 14px; } .button:hover { box-shadow: inset 0 0 0 30px rgba(0,0,0, .1); } .button:focus { outline: none; } .button.start { top: 10px; right: 10px; } .button.reset { top: 10px; left: 10px; } /* time control */ .time-control { } .time-control button { display: inline-block; padding: 10px 15px; font-size: 1.2em; background-color: transparent; border: none; } .time-control button:focus { outline: none; } .time-control button:hover { box-shadow: inset 0 0 0 30px rgba(0,0,0, .1); } .time-control.minutes { float: left; } .time-control.seconds { float: right; } .time-control span { display: inline-block; width: 50px; text-align: center; } .time-control p { padding: 0; margin: 0; text-transform: capitalize; text-align: center; } /* control sections */ .section-work { background-color: } .section-label--work { color: #218559; border-bottom: 2px solid #218559; } .section-label--rest { color: #06A2CB; border-bottom: 2px solid #06A2CB; } </style> </head> <body> <div id="root"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.16.13.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.16.13.js"></script> <script> function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}function TimeControl({ onInc, onDec, value, className, label }) { return ( React.createElement("div", { className: `time-control${' ' + className}` }, React.createElement("p", { className: "label" }, label), React.createElement("button", { onClick: onDec }, "-"), React.createElement("span", null, value), React.createElement("button", { onClick: onInc }, "+"))); } function Button({ className, label, onClick }) { return React.createElement("button", { className: className, onClick: onClick }, label); } function Buttons({ isPaused, value, work, rest, handleStartPause, handleReset, setTime }) { const label = isPaused && value === 0 ? 'Start' : isPaused && value > 0 ? 'Continue' : 'Pause'; const workTime = new Date(work * 1000); const restTime = new Date(rest * 1000); return ( React.createElement("div", { className: "buttons" }, React.createElement(Button, { className: "button start", onClick: handleStartPause, label: label }), React.createElement(Button, { className: "button reset", onClick: handleReset, label: "Reset" }), React.createElement("div", { className: "section-work clearfix" }, React.createElement("p", { className: "section-label--work" }, "Work time"), React.createElement(TimeControl, { className: "minutes", value: ('0' + workTime.getMinutes()).slice(-2), label: "minutes", onInc: setTime.bind(null, 'work', 'minutes', true), onDec: setTime.bind(null, 'work', .........完整代码请登录后点击上方下载按钮下载查看
网友评论0