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

雨点打透心脏的1/2处 2022-09-10 06:17 194阅读 0赞

> ##  效果演示：文末获取源码 ##

![20210905231949581.gif][]

> ##    代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

> ## 主要代码实现： ##

### 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>

上面的其他css样式和js等需要引入即可运行

> ## 源码获取 ##
> 
> 查看博主主页或私信博主获取
> 
> 精彩推荐更新中：
> 
> ### [HTML5大作业实战100套][HTML5_100] ###

>   打卡 文章 更新**  39  **/  100天
> 
> 大家可以**点赞、收藏、关注、评论**我啦 、需要完整文件联系下方**微信公众号获取**

[20210905231949581.gif]: /images/20220829/bdaf3669bdbb4a39b6485cc874392692.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/0f62ffd843d944be955778847cd940f7.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html