计算器JavaScript，，css，html。我在犹豫还要不要发这些东西，emmm，都没人看，自己看看罢了，我在想是我写的不好还是太基础了，还是太冷门了呢，如果有缘人看到给我个回复谢谢

最新推荐文章于 2024-09-02 20:34:02 发布

Zy_xxy

最新推荐文章于 2024-09-02 20:34:02 发布

阅读量72

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/Zy_xxy/article/details/121711730

版权

HTML JavaScript 计算器 DOM操作 eval

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #warp{
            width:480px;
            height: 500px;
            background-color: rgb(91,91,92);
            border-radius: 15px;
        }
        #warp .zy{
            height: 54px;
            font-size: 20px;
            background-color: rgb(91,91,92);
            color: white;
            margin:0;
            padding-left:15px;
            line-height: 54px;
            border-radius: 15px;
        }
        #warp .pm{
            height:82px;
            background-color: rgb(95,94,97);
            color: white;
            margin:0;
            padding-left:15px;
            line-height:82px;
        }
        #warp .cl{
            flex-wrap: wrap;
            display: flex;
            margin: 0;
            padding: 0;
        }
        li{
            width: 25%;
            height: 118px;
            list-style: none;
            background-color: rgb(119,121,120);
            border: 1px solid rgb(83,85,83);
            box-sizing: border-box;
            line-height: 118px;
            text-align: center;
            color: white;
        }
        #warp .zero{
            width:50%
        }
        button{
            width: 100%;
            height: 60px;
            border: 0;
            color: white;
            background-color: rgb(91,91,92);
            border-bottom-right-radius: 15px;
            border-bottom-left-radius: 15px;
        }
        #warp .cl .hu{
            background-color:rgb(86,89,88);
        }
        #warp .cl .yellow{
            background-color: rgb(255,159,9);
        }
    </style>
</head>
<body>
<div id="warp">
    <ul class="zy">自研计算器</ul>
    <ul class="pm"></ul>
    <ul class="cl">
        <li class="hu ac">AC</li>
        <li class="hu">(</li>
        <li class="hu">)</li>
        <li class="yellow">+</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="yellow">-</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li class="yellow">*</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li class="yellow">/</li>
        <li class="zero">0</li>
        <li>.</li>
        <li class="yellow">%</li>
    </ul>
    <button>计算</button>
</div>
<script>
    /**
     * 1.首先先找到li标签
     * 1.1。绑定点击事件
     * 1。2. 找到pm屏幕
     * 1.3。屏幕里的数字依次相加
     * 2.1eval
     */
        // 首先找到1-10所有事件
        // * 1.首先先找到li标签
        //  找到里面所有的值并定义变量
    const he=document.querySelectorAll('li')

    //循环找到所有li的值并打印
    for(let i=0;i<he.length;i++){
        //绑定所有的点击事件了，怎么把他放进屏幕呢
        he[i].addEventListener('click',function() {
            //    找到屏幕上找到he[i]所有he[i]的内容
            //    文本定义一个变量+点击li里面的值就能出来这个难点
            let div=document.querySelector('.pm').innerText
            let js=div+he[i].innerText
            document.querySelector('.pm').innerText=js
            console.log(js)

        })
    }

    //1为pm里的值清空
    //    怎么清空呢要找到屏幕所有的值并为AC绑定一个点击事件点击AC之后屏幕的值为0这是中点
    let a=document.querySelector('.ac')
    a.addEventListener('click',function () {
        document.querySelector('.pm').innerText=''
    })

    //把eval丢到屏幕的内容里面去。这样的话，在屏幕里所显示的数字和符号就能被eval所转换成相对应的作用和功能
    let b=document.querySelector('button')
    b.addEventListener('click',function () {
        //定义一个变量用eval给屏幕里面的属性进行计算然后求和
        var re = eval(document.querySelector('.pm').innerText);
        document.querySelector('.pm').innerText = re;

    })
</script>
</body>
</html>