react实现买单小费AA制费用计算器代码
代码语言:html
所属分类:其他
代码描述:react实现买单小费AA制费用计算器代码
代码标签: react 买单 小费 AA制 费用 计算器 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'); :root{ --strongCyan: hsl(172, 67%, 45%); --veryDarkCyan: hsl(183, 100%, 15%); --darkGrayishCyan: hsl(186, 14%, 43%); --darkGrayerCyan: hsl(184, 14%, 56%); --lightGrayishCyan: hsl(185, 41%, 84%); --lightGrayerCyan: hsl(189, 41%, 97%); --formInputFontSize: 24px; } html{ height:100%; font-family:'Space Mono', sans-serif;. -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } body{ margin:0; background-color: var(--lightGrayishCyan); text-align:center; } #container{ display:flex; flex-direction:column; align-items:center; } #projectTitle{ text-transform: uppercase; font-size: 1.25em; font-weight:bold; letter-spacing:0.5em; color: var(--veryDarkCyan); opacity:0.75; word-wrap:break-word; width: 5em; margin: 4em 0 2.5em 0; } #appWrapper{ display:flex; justify-content:space-around; background-color:white; border-radius:1em; } .inputContainer{ overflow:hidden; white-space: nowrap; } #controlsWrapper{ text-align:left; padding: 2rem; } .controlsText{ font-size: 0.8rem; font-weight:bold; opacity: 0.9; color: var(--veryDarkCyan); margin:0; margin-bottom:2px; } .customStyle{ filter: invert(18%) sepia(18%) saturate(5952%) hue-rotate(156deg) brightness(97%) contrast(101%); opacity: 0.5; margin-left:0; } .inputContainer{ margin-top:0.5em; margin-bottom:1.5em; } .symbolAdjustment{ border:0; border-radius:5px; font-size: 18px; background-color: var(--lightGrayerCyan); padding: 0.3em 0.6em; } .symbolAdjustment input{ border:0; margin:0; padding:0; background-color: transparent; text-align:right; font-family: 'Space Mono', sans-serif; color: var(--veryDarkCyan); font-size: var(--formInputFontSize); opacity: 0.7; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } #tipOptions{ margin-top:0.5em; margin-bottom:1.5em; display:grid; grid-template-rows: 1fr 1fr; grid-template-columns: repeat(3, 1fr); grid-column-gap: 0.75rem; grid-row-gap: 0.75rem; } .selectTip{ border:0; border-radius:5px; font-size: 1em; font-family: 'Space Mono', sans-serif; padding: .5em; font-weight:bold; background-color: var(--veryDarkCyan); color:white; } .customTipBtn{ background-color: var(--lightGrayerCyan); color: var(--veryDarkCyan); } #tipDisplayWrapper{ background: white; border-radius:1em; padding: 2rem 2rem 2rem 0; height:max-content; } #coloredWrapper{ background: var(--veryDarkCyan); border-radius: 1em; padding: 2rem; } .display{ display:flex; justify-content: space-between; } .labels{ display:flex; flex-direction: column; justify-content:center; margin-right:3em; } .labels > *{ margin:0; text-align:left; } .displayText{ font-size: 0.8rem; font-weight:bold; opacity: 0.9; color: white; margin-bottom:2px; } .displayText_small{ font-size:0.7rem; text-align:left; color: var(--lightGrayishCyan); opacity:0.7; } .displayNumber{ font-size: 2.5em; color: var(--strongCyan); font-weight:bold; } .buttonsContainer{ display:flex; flex-direction:column; justify-content:space-evenly; margin-top:3em; } .displayBtns{ border:0; border-radius:5px; font-family: 'Space Mono', sans-serif; font-size: 1.1rem; font-weight:bold; text-transform:uppercase; letter-spacing:1px; padding: 0.5rem 3rem; width:100%; margin-bottom:10px; color:var(--veryDarkCyan); align-self:bottom; background-color: var(--strongCyan); } .inactive{ opacity:0.4; } .active{ opacity:1; } .attribution{ margin-bottom:0; font-size:13px; color: var(--darkGrayishCyan); } .attribution a{ text-decoration: none; font-weight:bold; color: var(--strongCyan); } /* Active States */ input[type=number]:focus{ outline:0; cursor:pointer; } .inputContainer:focus-within{ border-radius: 2pt; box-shadow: 0 0 0 1pt var(--strongCyan); outline: none; transition: .1s; } .selectTip:hover:not([disabled]), .selectTip:active:not([disabled]), .selectTip:focus:not([disabled]){ cursor:pointer; background-color: var(--strongCyan); filter: brightness(120%); color: var(--veryDarkCyan); transition: background-color .25s; } .displayBtns:hover:not([disabled]), .displayBtns:active:not([disabled]), .displayBtns:focus:not([disabled]){ cursor:pointer; filter: brightness(120%); } .checked{ background-color: var(--strongCyan); } @media (max-width:420px){ #appWrapper{ display:flex; flex-direction:column; border-radius:2.5em; } #tipOptions{ display:grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: repeat(2, 1fr); grid-column-gap: 0.75rem; grid-row-gap: 0.75rem; } #tipDisplayWrapper{ justify-self:center; align-self:center; padding:1rem 0; } #coloredWrapper{ justify-self:center; align-self: center; } } </style> </head> <body> <div id="container"> <p id="projectTitle">Splitter</p> <div id="app"></div> </div> <!-- partial --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script> <script> //786 function UserControls({ select }) { //this is the component that will accept user instructions const handleInput = e => { //nothing }; return /*#__PURE__*/( React.createElement("div", { id: "controlsWrapper" }, /*#__PURE__*/ React.createElement("label", { for: "billAmount" }, /*#__PURE__*/ React.createElement("p", { class: "controlsText" }, "Bill")), /*#__PURE__*/ React.createElement("div", { class: "inputContainer" }, /*#__PURE__*/ React.createElement("span", { class: "symbolAdjustment" }, /*#__PURE__*/React.createElement("span", { class: "fa fa-usd customStyle" }), /*#__PURE__*/ React.createElement("input", { type: "number", pattern: "[0-9]*", id: "billAmount", name: "billAmount", defaultValue: 0, min: "0", class: "numericalInput", onChange: handleInput }))), /*#__PURE__*/ React.createElement("p", { class: "controlsText" }, "Select Tip %"), /*#__PURE__*/ React.createElement("div", { id: "tipOptions.........完整代码请登录后点击上方下载按钮下载查看
网友评论0