番茄时间网页版 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>番茄时间</title> <style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Oxygen|Rubik:300); html, body { width: 100%; height: 100%; box-sizing: border-box; font-family: "Rubik", Arial, sans-serif; font-size: 12px; letter-spacing: 0.6px; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; padding: 0; background: -webkit-linear-gradient(315deg, #B8D087, #00996D); background: linear-gradient(135deg, #B8D087, #00996D); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .hidden { display: none; } .container { box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.8), 0 25px 55px 0 rgba(0, 0, 0, 0.21); width: 290px; height: 420px; background-color: #1F2025; color: #DADADB; } .header { text-align: center; padding: 0 20px 20px 30%; font-size: 15.6px; border-bottom: solid #18191d 1px; } .timer { height: 200px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .timer-display { color: #B8D087; font-size: 36px; margin-top: 60px; margin-left: 10px; text-align: center; } svg#gradient { width: 100px; height: 40px; vertical-align: bottom; pointer-events: none; } svg#gradient text { fill: url(#linearGradient); } #status { text-align: center; height: 20px; margin-top: -30px; margin-bottom: 30px; color: #636779; } .start { background: -webkit-linear-gradient(315deg, #B8D087, #00996D); background: linear-gradient(135deg, #B8D087, #00996D); box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.8), 0 25px 55px 0 rgba(0, 0, 0, 0.21); width: 290px; text-align: center; color: white; padding: 20px 20px; cursor: pointer; } .start:hover { background: #00996D; } .start:active { background: -webkit-linear-gradient(315deg, #B8D087, #00996D); background: linear-gradient(135deg, #B8D087, #00996D); } .inner-circle { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-48%, -73.5%); transform: translate(-48%, -73.5%); } .outer-circle { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-48%, -73.5%); transform: translate(-48%, -73.5%); z-index: 1; } .progress-color0 { fill: url(#greenGradient); } .progress-color1 { fill: #353741; } #action-title { position: absolute; font-size: 8px; left: 50%; margin-top: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #1F2025; padding: 5px 20px; border-radius: 20px; border: solid #636779 1px; } .actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; color: #636779; } .actions div { padding-bottom: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .set-timer, .set-break { padding-top: 20px; border: solid #18191d 1px; } .set-timer { border-right: none; border-left: none; } .set-break { border-right: none; } .set-display { color: #DADADB; font-size: 16.8px; padding-top: 10px; } .actions .minus-add { font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .actions .minus-add div { cursor: pointer; margin: 1px; padding: 5px; margin-bottom: 10px; -webkit-box-flex: .5; -ms-flex: .5; flex: .5; } .actions .minus-add div:hover { color: #DADADB; } .actions .minus-add div:active { color: #353741; } .spinner-container { position: absolute; z-index: 2; left: 50%; top: 50%; margin-top: -40px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .spinner-mask { position: absolute; background-color: #1F2025; height: 45px; width: 50px; margin-top: 181px; left: 200px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .spinner { -webkit-transform: rotate(150deg); transform: rotate(150deg); -webkit-animation: rotator 1.2s linear infinite; animation: rotator 1.2s linear infinite; } @-webkit-keyframes rotator { 0% { -webkit-transform: rotate(150deg); transform: rotate(150deg); } 20% { -webkit-transform: rotate(200deg); transform: rotate(200deg); } 100% { -webkit-transform: rotate(390deg); transform: rotate(390deg); } } @keyframes rotator { 0% { -webkit-transform: rotate(150deg); transform: rotate(150deg); } 20% { -webkit-transform: rotate(200deg); transform: rotate(200deg); } 100% { -webkit-transform: rotate(390deg); transform: rotate(390deg); } } .spinning { stroke-dasharray: 187; stroke-dashoffset: 185; -webkit-transform-origin: center; transform-origin: center; -webkit-animation: dash 1.2s infinite, colors 1.2s infinite; animation: dash 1.2s infinite, colors 1.2s infinite; } @-webkit-keyframes colors { 0% { stroke: #B8D087; } 50% { stroke: #00996D; } 100% { stroke: #B8D087; } } @keyframes colors { 0% { stroke: #B8D087; } 50% { stroke: #00996D; } 100% { stroke: #B8D087; } } @-webkit-keyframes dash { 0% { stroke-dashoffset: 185; } 50% { stroke-dashoffset: 175; } 100% { stroke-dashoffset: 185; } } @keyframes dash { 0% { stroke-dashoffset: 185; } 50% { stroke-dashoffset: 175; } 100% { stroke-dashoffset: 185; } } </style> </head> <body> <div class='container'> <div class='header'> <svg id='gradient' style='width: auto;'> <defs> <linearGradient id='linearGradient' x1='0%' x2='100%' y1='0%' y2='100%'> <stop offset='0%' stop-color='#B8D087'></stop> <stop offset='100%' stop-color='#00996D'></stop> </linearGradient> </defs> <text fill-opacity='1' y='36px'> Pomodoro Clock </text> </svg> </div> <div class='timer'> <div class='spinner-container'> <div class='spinner-mask'></div> <svg class='spinner' height='240px' viewBox='0 0 66 66' width='240px' xmlns='http://www.w3.org/2000/svg'> <circle class='path' cx='33' cy='33' fill='none' id='spineroo' r='30' stroke-cap='round' stroke-width='.5'></circle> </svg> </div> <div class='outer-circle'></div> <div class='inner-circle'></div> <div class='timer-display'> <svg id='gradient'> <defs> <linearGradient id='linearGradient' x1='0%' x2='100%' y1='0%' y2='100%'> <stop offset='0%' stop-color='#B8D087'></stop> <stop offset='100%' stop-color='#00996D'></stop> </linearGradient> </defs> <text fill-opacity='1' id='timer-display-time' y='36px'> 25:00 </text> </svg> </div> </div> <div id='status'></div> <div id='action-title'> <small>SETTINGS</small> </div> <div class='actions'> <div class='set-timer'> session length <div class='set-display'> <span id='set-timer-display'>25</span> min </div> <div class='minus-add'> <div class='setting-button' id='minus-timer'>-</div> <div class='setting-button' id='add-timer'>+</div> </div> </div> <div class='set-break'> break length <div class='set-display'> <span id='set-break-display'>5</span> min </div> <div class='minus-add'> <div class='setting-button' id='minus-break'>-</div> <div class='setting-button' id='add-break'>+</div> </div> </div> </div> </div> <div class='start' id='start-timer'>START</div> <div class='start hidden' id='reset-timer'>RESET</div> </body>  <script src="https://cdn.bootcss.com/d3/3.5.12/d3.min.js"></script> <script type="text/javascript"> "use strict"; //progress bars overlay var radius = 90, padding = 50, radians = 2 * Math.PI; var dimension = 2 * radius + 2 * padding, points = 50, percentage = 0.62; var angle = d3.scale.linear().domain([0, points - 1]).range([0, radians]); var line = d3.svg.line.radial().interpolate("basis").tension(0).radius(radius).angle(function (d, i) { if (i < points * percentage + 1) { return angle(i); } }); var svg = d3.select(".outer-circle").append("svg").attr("width", dimension).attr("height", 200).append("g"); svg.append("path").datum(d3.range(points)).attr("class", "line").attr("fill", "none").attr("stroke-dasharray", "7 3").attr("stroke-width", "25px").attr("stroke", "#1F2025") //#1F2025 .attr("d", line).attr("transform", "translate(135,106) rotate(-110)"); //progress bars var elapsedPercent = 0; var r = 100; var pi = Math.PI; var green1 = "#B8D087"; var green2 = "#00996D"; var data = { upper: calcPercent(0), lower: calcPercent(elapsedPercent) }; var progress = 0; function calcPercent(percent) { return [percent, 100 - percent]; } var canvas = d3.select(".inner-circle").append("svg").attr("height", r + 100).attr("width", r + 150); var group = canvas.append("g").attr("transform", "translate(" + 120 + "," + 110 + ")"); var arc = d3.svg.arc().innerRadius(r / 1.2).outerRadius(r); //returns objects based on data var pie = d3.layout.pie().sort(null).value(function (data) { return data; }).startAngle(-110 * (pi / 180)).endAngle(110 * (pi / 180)); var arcs = group.selectAll(".arc").data(pie(data.lower)).enter().append("g").attr("class", "arc"); var defs = canvas.append("defs").append("linearGradient").attr("id", "greenGradient").attr("gradientUnits", "objectBoundingBox").attr("x1", "0").attr("y1", "0").attr("x2", "1").attr("y2", "1"); defs.append("stop").attr("offset", "0%").attr("stop-color", green1); defs.append("stop").attr("offset", "100%").attr("stop-color", green2); var path = arcs.append("path").attr("class", function (data, index) { return "progress-color" + index; }).attr("d", arc); /////////timer var startButton = document.getElementById("start-timer"); var resetButton = document.getElementById("reset-timer"); var timeDisplay = document.getElementById("timer-display-time"); var statusDisplay = document.getElementById("status"); var spinner = document.getElementById("spineroo"); var sessionTimer = parseInt(document.getElementById("set-timer-display").innerHTML, 10); var breakTimer = parseInt(document.getElementById("set-break-display").innerHTML, 10); elapsedPercent = 0; var seconds = 60; var minutes = undefined; var timer = undefined; var breakTime = false; //start timer startButton.addEventListener('click', function () { timer = setInterval(timerFn, 1000); //console.log("button: " + startButton.innerHTML.trim() + " | session: " + sessionTimer + " | break: " + breakTimer); startButton.classList.toggle("hidden"); resetButton.classList.toggle("hidden"); spinner.classList.toggle("spinning"); statusDisplay.innerHTML = "In session!"; minutes = sessionTimer - 1; function timerFn() { seconds--; //console.log("time: " +minutes + ":" + seconds + " | percent: " + elapsedPercent); progress(); if (seconds < 10 && minutes < 10) { timeDisplay.innerHTML = "0" + minutes + ":0" + seconds; } else if (seconds < 10) { timeDisplay.innerHTML = minutes + ":0" + seconds; } else if (minutes < 10) { timeDisplay.innerHTML = "0" + minutes + ":" + seconds; } else { timeDisplay.innerHTML = minutes + ":" + seconds; } if (seconds === 0 && minutes === 0) { if (breakTime === false) { breakTime = true; minutes = breakTimer - 1; seconds = 60; elapsedPercent = 0; statusDisplay.innerHTML = "Take a break!"; console.log("break time"); } else { breakTime = false; minutes = sessionTimer - 1; seconds = 60; elapsedPercent = 0; statusDisplay.innerHTML = "In session!"; console.log("work time"); } } if (seconds === 0) { minutes--; seconds = 60; } }; function progress() { var secondsElapsed = minutes * 60 + seconds; var totalSeconds = undefined; if (breakTime === true) { totalSeconds = breakTimer * 60; } else { totalSeconds = sessionTimer * 60; } elapsedPercent = (1 - secondsElapsed / totalSeconds) * 100; path.data(pie(calcPercent(elapsedPercent))).attr("d", arc); } }); //reset timer resetButton.addEventListener('click', function () { startButton.classList.toggle("hidden"); resetButton.classList.toggle("hidden"); spinner.classList.toggle("spinning"); clearInterval(timer); seconds = 60; minutes = sessionTimer - 1; elapsedPercent = 0; timeDisplay.innerHTML = sessionTimer + ":00"; statusDisplay.innerHTML = "Reset!"; console.log("reset"); path.data(pie(calcPercent(elapsedPercent))).attr("d", arc); }); //timer settings var settingOptions = { "add-break": function addBreak() { if (breakTimer < 51) { var _timer = breakTimer++; document.getElementById("set-break-display").innerHTML = _timer + 1; } }, "minus-break": function minusBreak() { if (breakTimer > 5) { var _timer2 = breakTimer--; document.getElementById("set-break-display").innerHTML = _timer2 - 1; } }, "add-timer": function addTimer() { if (sessionTimer < 99) { var _timer3 = sessionTimer++; document.getElementById("set-timer-display").innerHTML = _timer3 + 1; document.getElementById("timer-display-time").innerHTML = _timer3 + 1 + ":00"; } }, "minus-timer": function minusTimer() { if (sessionTimer > 25) { var _timer4 = sessionTimer--; document.getElementById("set-timer-display").innerHTML = _timer4 - 1; document.getElementById("timer-display-time").innerHTML = _timer4 - 1 + ":00"; } } }; var buttonSettings = document.getElementsByClassName("setting-button"); var _loop = function _loop(i) { buttonSettings[i].addEventListener("click", function () { var operation = buttonSettings[i].getAttribute("id"); settingOptions[operation](); startButton.classList.remove("hidden"); resetButton.classList.add("hidden"); spinner.classList.remove("spinning"); clearInterval(timer); seconds = 60; minutes = sessionTimer - 1; elapsedPercent = 0; console.log("setting up"); }); }; for (var i = 0; i < buttonSettings.length; i++) { _loop(i); } </script> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>番茄时间</title>  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">   <style type="text/css"> body { background-color: #CF3A24; } .timer-top { background-color: #407A52; height: 15vh; width: 100vw; position: fixed; box-shadow: 0px 3px 6px #3f3f3f; color: #8DB255; text-align: center; font-family: "Pacifico"; font-size: 8vh; padding: 2.5vh; } .timer-work { margin-top: 40vh; width: 100vw; position: fixed; height: 10vh; border-bottom: solid 3px #F2F1EF; } .timer-work #timer-work-text { overflow: hidden; width: 700vh; color: #F2F1EF; font-size: 7vh; font-family: "Quattrocento Sans"; margin-left: calc(50vw - 148.8vh); transition: all 1s ease-in-out; } .timer-work #timer-work-text p { float: left; margin-left: 0; margin-right: 0; text-align: center; } .timer-work #timer-work-text .dots { width: 15vh; } .timer-work #timer-work-text .num { width: 9vh; } .circle { margin-top: calc(50vh + .8vh); margin-left: calc(50vw - 5.5vh); width: 10.17vh; height: 10.17vh; position: fixed; border-radius: 50%; background-color: #CF3A24; } .arrow { position: fixed; margin-top: calc(50vh + .1vh); margin-left: calc(50vw - 3.8vh); font-size: 6.8vh; color: #F2F1EF; width: 6.9vh; height: 11.6vh; transition: transform 600ms ease-in-out; cursor: pointer; transform: rotate(90deg); } .divide { margin-left: -5vw; z-index: -1; box-shadow: inset 0 0 4px black; margin-top: calc(50vh + 3.8vh); position: fixed; width: 110vw; height: 4vh; overflow: hidden; background-color: #4F170E; } .timer-break { margin-top: 61.75vh; width: 100vw; position: fixed; height: 10vh; } .timer-break #timer-break-text { border-top: solid 3px #F2F1EF; overflow: hidden; width: 700vh; color: #F2F1EF; font-size: 7vh; font-family: "Quattrocento Sans"; margin-left: calc(50vw - 148.8vh); transition: all 1s ease-in-out; } .timer-break #timer-break-text p { float: left; margin-left: 0; margin-right: 0; text-align: center; } .timer-break #timer-break-text .dots { width: 15vh; transform: rotate(180deg); } .timer-break #timer-break-text .num { width: 9vh; } </style> </head> <body> <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Quattrocento+Sans" rel="stylesheet"> <a href="https://baike.baidu.com/item/%E7%95%AA%E8%8C%84%E5%B7%A5%E4%BD%9C%E6%B3%95/6353502?fr=aladdin" target="_blank"> <div class="timer-top">番茄时间</div> </a> <div class="timer-work"> <div id="timer-work-text"> <p class="num">30</p><p class="dots"> . . . . </p><p class="num">35</p><p class="dots"> . . . . </p><p class="num">40</p><p class="dots"> . . . . </p><p class="num">45</p><p class="dots"> . . . . </p><p class="num">50</p><p class="dots"> . . . . </p><p class="num">55</p><p class="dots"> . . . . </p><p class="num">0</p><p class="dots"> . . . . </p><p class="num">5</p><p class="dots"> . . . . </p><p class="num">10</p><p class="dots"> . . . . </p><p class="num">15</p><p class="dots"> . . . . </p><p class="num">20</p><p class="dots"> . . . . </p><p class="num">25</p><p class="dots"> . . . . </p><p class="num">30</p><p class="dots"> . . . . </p><p class="num">35</p><p class="dots"> . . . . </p><p class="num">40</p><p class="dots"> . . . . </p><p class="num">45</p><p class="dots"> . . . . </p><p class="num">50</p><p class="dots"> . . . . </p><p class="num">55</p><p class="dots"> . . . . </p><p class="num">0</p><p class="dots"> . . . . </p><p class="num">5</p><p class="dots"> . . . . </p><p class="num">10</p><p class="dots"> . . . . </p><p class="num">15</p><p class="dots"> . . . . </p><p class="num">20</p><p class="dots"> . . . . </p><p class="num">25</p><p class="dots"> . . . . </p><p class="num">30end</p> </div> </div> <div class="circle"></div> <span class="arrow" id="play-head" onclick="start()">&#9650</span> <div class="divide"></div> <div class="timer-break"> <div id="timer-break-text"> <p class="num">30</p><p class="dots"> . . . . </p><p class="num">35</p><p class="dots"> . . . . </p><p class="num">40</p><p class="dots"> . . . . </p><p class="num">45</p><p class="dots"> . . . . </p><p class="num">50</p><p class="dots"> . . . . </p><p class="num">55</p><p class="dots"> . . . . </p><p class="num">0</p><p class="dots"> . . . . </p><p class="num">5</p><p class="dots"> . . . . </p><p class="num">10</p><p class="dots"> . . . . </p><p class="num">15</p><p class="dots"> . . . . </p><p class="num">20</p><p class="dots"> . . . . </p><p class="num">25</p><p class="dots"> . . . . </p><p class="num">30</p><p class="dots"> . . . . </p><p class="num">35</p><p class="dots"> . . . . </p><p class="num">40</p><p class="dots"> . . . . </p><p class="num">45</p><p class="dots"> . . . . </p><p class="num">50</p><p class="dots"> . . . . </p><p class="num">55</p><p class="dots"> . . . . </p><p class="num">0</p><p class="dots"> . . . . </p><p class="num">5</p><p class="dots"> . . . . </p><p class="num">10</p><p class="dots"> . . . . </p><p class="num">15</p><p class="dots"> . . . . </p><p class="num">20</p><p class="dots"> . . . . </p><p class="num">25</p><p class="dots"> . . . . </p><p class="num">30end</p> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> // 2.4 vh increments every 30 seconds, 10 cycles per min 24 vh per cycle var $timer = $("#timer"), $arrow = $(".arrow"), $break = $("#timer-break-text"), $work = $("#timer-work-text"), $playHead = $("#play-head"); var positionWork = ['calc(50vw - ', 148.8, 'vh)'], positionBreak = ['calc(50vw - ', 148.8, 'vh)']; var workClockTime = 25, breakClockTime = 5; //main function that runs at the startup and sets the play heads $(document).ready(function() { positionWork[1] += 120; $work.css("margin-left", positionWork.join("")); positionBreak[1] += 24; $break.css("margin-left", positionBreak.join("")); //countDownBreak(positionBreak); }); function start() { $playHead.css("transform", "rotate(0deg)"); setTimeout(function() { countDown(positionWork, positionBreak, "工作"); }, 30000); } function countDown(timeWork, timeBreak, selector) { if (selector == "工作") { timeWork[1] -= 2.4; timeWork[1] = Math.round(timeWork[1] * 10) / 10; $(".timer-top").html("工作"); $work.css("margin-left", timeWork.join("")); if (timeWork[1] == 148.8) { positionWork[1] += 120 $work.css("margin-left", positionWork.join("")); $playHead.css("transform", "rotate(180deg)"); countDown(positionWork,positionBreak,"休息"); return false; } setTimeout(function() { countDown(timeWork,timeBreak,"工作"); }, 30000); } else if (selector == "休息") { timeBreak[1] -= 2.4; timeBreak[1] = Math.round(timeBreak[1] * 10) / 10; $(".timer-top").html("休息"); $break.css("margin-left", timeBreak.join("")); if (timeBreak[1] == 148.8) { positionBreak[1] += 24; $break.css("margin-left", positionBreak.join("")); $playHead.css("transform", "rotate(0deg)"); countDown(positionWork,positionBreak,"工作"); return false; } setTimeout(function() { countDown(timeWork,timeBreak,"休息"); }, 30000); } } </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 番茄时间网页版