51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

JavaScript案例:简单计算(附计算器)

计算年龄

思路分析:

  1. 弹出一个输入框(prompt),让用户输入出生年份(用户输入)
  2. 把用户输入的值用变量保存起来,然后用今年的年份减去变量值,结果就是现在的年龄(程序内部处理)
  3. 弹出警示框(alert),把计算的结果输出(输出结果)
<script>
    var year = prompt('请输入你的出生年份');
    var age = 2022 - year;
    alert('您今年已经' + age + '岁了');
</script>

简单加法器

思路分析:

  1. 先弹出一个输入框,提示用户输入第一个值,并保存。
  2. 再弹出一个输入框,提示用户输入第二个值,并保存。
  3. 把这俩个值相加,并将结果赋给新的变量(注意数据类型转换)。
  4. 弹出警示框(alert),把计算的结果输出(输出结果)。
    var num1 = prompt('请输入第一个值');
    var num2 = prompt('请输入第二个值');
    var result = parseFloat(num1) + parseFloat(num2);
    alert('你的结果是:' + result)

炫酷计算器

演示地址计算器(演示站去除了动态特效)

HTML内容:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <form class="calculator" name="calc">
            <input type="text" readonly class="value" name="txt" />
            <span class="num clear" onclick="calc.txt.value=''">c</span>
            <span class="num" onclick="document.calc.txt.value +='/'">/</span>
            <span class="num" onclick="document.calc.txt.value +='*'">*</span>
            <span class="num" onclick="document.calc.txt.value +='7'">7</span>
            <span class="num" onclick="document.calc.txt.value +='8'">8</span>
            <span class="num" onclick="document.calc.txt.value +='9'">9</span>
            <span class="num" onclick="document.calc.txt.value +='-'">-</span>
            <span class="num" onclick="document.calc.txt.value +='4'">4</span>
            <span class="num" onclick="document.calc.txt.value +='5'">5</span>
            <span class="num" onclick="document.calc.txt.value +='6'">6</span>
            <span class="num plus" onclick="document.calc.txt.value +='+'">+</span>
            <span class="num" onclick="document.calc.txt.value +='1'">1</span>
            <span class="num" onclick="document.calc.txt.value +='2'">2</span>
            <span class="num" onclick="document.calc.txt.value +='3'">3</span>
            <span class="num" onclick="document.calc.txt.value +='0'">0</span>
            <span class="num" onclick="document.calc.txt.value +='00'">00</span>
            <span class="num" onclick="document.calc.txt.value +='.'">.</span>
            <span class="num equal" onclick="document.calc.txt.value =eval(calc.txt.value)">=</span>
        </form>
    </div>
</body>
<script type="text/javascript" src="https://cdn.staticfile.org/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
<script>
    VanillaTilt.init(document.querySelector(".container"), {
        max: 25,
        speed: 400,
        glare: true,
        "max-glare": 0.2,
    });
</script>

</html>

CSS内容:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #091921;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#e91e63, #ffc107);
    clip-path: circle(22% at 30% 20%);
}

body::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#e91e63, #ffc107);
    clip-path: circle(20% at 70% 90%);
}

.container {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    overflow: hidden;
    z-index: 10;
    backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}

.container .calculator {
    position: relative;
    display: grid;
}

.container .calculator .value {
    grid-column: span 4;
    height: 140px;
    width: 300px;
    text-align: right;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 30px;
    background: transparent;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.container .calculator span {
    display: grid;
    place-items: center;
    width: 75px;
    height: 75px;
    color: #fff;
    font-weight: 400;
    cursor: pointer;
    font-size: 20px;
    user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.container .calculator span:hover {
    transition: 0s;
    background: rgba(255, 255, 255, 0.05);
}

.container .calculator span:active {
    background: #14ff47;
    color: #192f00;
    font-weight: 500;
}

.container .calculator .clear {
    grid-column: span 2;
    width: 150px;
    background: rgba(255, 255, 255, 0.05);
}

.container .calculator .plus {
    grid-row: span 2;
    height: 150px;
}

.equal {
    background: rgba(255, 255, 255, 0.05);
}
赞(2)
未经允许不得转载:工具盒子 » JavaScript案例:简单计算(附计算器)