HTML+CSS+JS实现 ❤️React简单的计算器实例❤️

原创

java李杨勇 2022-03-09 10:15:35 ©著作权

文章标签 css html5 html React简单计算器实例前端大作业 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者java李杨勇的原创作品，请联系作者获取转载授权，否则将追究法律责任

效果演示：文末获取源码

HTML+CSS+JS实现 ❤️React简单的计算器实例❤️_React简单计算器实例

代码目录：

HTML+CSS+JS实现 ❤️React简单的计算器实例❤️_css_02

主要代码实现：

CSS样式：

:root {
    /* color palette :: https://coolors.co/app/d63c6b-5cc8ff-efefef-292f36-d6d6d6 */
    --white: #efefef;
    --white-alpha: rgba(239, 239, 239, .64);
    --grey: #d6d6d6;
    --gray: var(--grey);
    --black: #292f36;
    --pure-black: #131313;
    --pure-black-alpha: rgba(19, 19, 19, .64);
    --pure-black-alpha-light: rgba(19, 19, 19, .24);
    --pure-black-alpha-transparent: rgba(19, 19, 19, .12);
    --primary: #d63c6b;
    --primary-dk: #c41c4f;
    --accent: #5cc8ff;
    --accent-dk: #00a3f5;
    --transition: 300ms;
    --easing: cubic-bezier(1, 1, 1, 1);
    --easing-bounce-in: cubic-bezier(0, 0, .43, 1.3);
    --easing-bounce-out: cubic-bezier(.43, 1.3, 0, 0);
    font-size: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

html,
body {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom right, var(--accent) 0%, var(--primary) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body {
    padding-top: 20px;
    user-select: none;
}

button {
    outline: none;
    border: 0;
    padding: 1rem;
    background-color: var(--black);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--accent);
    transition: all var(--transition) var(--easing);
}

button:hover {
    color: var(--accent-dk);
}

button.block {
    width: 100%;
}

button.transparent {
    background-color: transparent;
}

button.no-padding {
    padding: 0;
}

button.long-text {
    font-size: 1rem;
}

.react-calculator {
    position: relative;
    margin: 0 auto;
    width: 320px;
    box-shadow: 0 19px 38px var(--pure-black-alpha-light), 0 15px 12px var(--pure-black-alpha-transparent);
}

body::-webkit-scrollbar,
.editable-field::-webkit-scrollbar,
.memory-bank::-webkit-scrollbar {
    width: .5rem;
}

body::-webkit-scrollbar:horizontal,
.editable-field::-webkit-scrollbar:horizontal,
.memory-bank::-webkit-scrollbar:horizontal {
    height: .5rem;
}

body::-webkit-scrollbar-track,
body::-webkit-scrollbar:horizontal,
.editable-field::-webkit-scrollbar-track,
.editable-field::-webkit-scrollbar:horizontal,
.memory-bank::-webkit-scrollbar-track,
.memory-bank::-webkit-scrollbar:horizontal {
    background-color: var(--pure-black);
}

body::-webkit-scrollbar-thumb,
body::-webkit-scrollbar:horizontal,
.editable-field::-webkit-scrollbar-thumb,
.editable-field::-webkit-scrollbar:horizontal,
.memory-bank::-webkit-scrollbar-thumb,
.memory-bank::-webkit-scrollbar:horizontal {
    background-color: var(--primary);
}

s body:hover::-webkit-scrollbar-thumb,
s body:hover::-webkit-scrollbar:horizontal,
s .editable-field:hover::-webkit-scrollbar-thumb,
s .editable-field:hover::-webkit-scrollbar:horizontal,
s .memory-bank:hover::-webkit-scrollbar-thumb,
s .memory-bank:hover::-webkit-scrollbar:horizontal {
    background-color: var(--primary-dk);
}

.editable-field {
    position: relative;
    width: 320px;
    height: 80px;
    z-index: 10;
    outline: none;
    box-shadow: 0 4px 2px -2px var(--pure-black-alpha);
    padding: .5rem;
    overflow-y: hidden;
    overflow-x: scroll;
    background-color: var(--pure-black-alpha);
    font-size: 2rem;
    line-height: 2;
    color: var(--primary);
    text-align: right;
    direction: rtl;
    white-space: nowrap;
}

.memory-bank {
    position: absolute;
    top: 80px;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding: 0;
    background-color: var(--pure-black-alpha);
    color: var(--accent-dk);
    transition: height 150ms var(--easing), overflow 1ms var(--easing) 200ms, padding 1ms var(--easing) 200ms;
}

.memory-bank .toggle-close {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 2px 5px;
}

.memory-bank .toggle-close .title {
    display: inline-block;
    transform: rotate(45deg);
}

.memory-bank.visible {
    height: calc(100% - 80px);
    padding: 10px;
    overflow-y: auto;
    transition: height 200ms var(--easing), padding 1ms var(--easing);
}

.button-set--functions,
.button-set--equations {
    background-color: var(--black);
}

.button-set--functions button,
.button-set--equations button {
    display: inline-block;
    width: 80px;
    height: 80px;
    vertical-align: top;
    text-transform: uppercase;
    font-variant: small-caps;
    color: var(--primary);
}

.button-set--functions button:hover,
.button-set--equations button:hover {
    color: var(--primary-dk);
}

.button-set--numbers {
    width: 240px;
    float: left;
    background-color: var(--black);
}

.button-set--numbers button {
    display: block;
    position: relative;
    width: 80px;
    height: 80px;
    float: left;
    background-color: var(--black);
    transition: box-shadow var(--transition) var(--easing);
}

.button-set--numbers button:last-child {
    width: 100%;
}

.button-set--functions {
    clear: left;
    float: left;
    width: 240px;
}

部分HTML代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>React Calculator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <script src='js/react.min.js'></script>
    <script src='js/EventEmitter.min.js'></script>
    <script src="js/script.js"></script>

</body>

</html>