简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 9月12号用Javascript做相册与计算器的实战学习
Blogger Information
Blog 17
fans 0
comment 0
visits 13547
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
9月12号用Javascript做相册与计算器的实战学习
18674060620的博客
Original
754 people have browsed it

这期用Javascript完成相册与计算器的案例学习，这节课学的东西不算太多，课后通过作业发现了自己对语法还是有很多的不理解，思维上还是没有跟上。

使用js完成一个功能相对完整的计算器案例：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        .box{
            width: 500px;
            height: 200px;
            background-color: #efefef;
            border: 1px solid lightgrey;
            text-align: center;
            margin: 20px auto;
            color: #636363;
            border-radius: 15px;
            box-shadow: 2px 2px 2px #999;
        }
        table{
            margin: auto;
        }
        td{
            width: 100px;
            height: 30px;
            padding: 5px 10px;
        }
        input,select{
            width: 100%;
            height: 100%;
            border: none;
            text-align: left;
            padding-left: 15px;
        }
        button{
            width: 100%;
            height: 100%;
            border: none;
            background-color: skyblue;
            color: white;
        }
        button:hover{
            cursor: pointer;
            background-color: coral;
            width: 110%;
            height: 110%;
        }
    </style>
</head>
<body>
<div class="box">
    <h2>计算器</h2>
    <form>
        <table>
            <tr>
                <td><input type="text" name="opt1" placeholder="操作数1"></td>
                <td>
                    <select name="option" id="">
                        <option value="null">请选择操作</option>
                        <option value="add">+</option>
                        <option value="sub">-</option>
                        <option value="mul">*</option>
                        <option value="div">/</option>
                    </select>
                </td>
                <td><input type="text" name="opt2" placeholder="操作数2"></td>
                <td><button type="button">计算</button></td>
            </tr>
            <tr>
                <td align="right" colspan="2"><h3>结果:</h3></td>
                <td align="left" colspan="2"><h3 id="result"></h3></td>
            </tr>
        </table>
    </form>
</div>
<script>
    //1. 获取操作数,按钮,结果占位符
    let opt1 = document.getElementsByName('opt1')[0];
    let opt2 = document.getElementsByName('opt2')[0];
    let opt = document.getElementsByName('option')[0];
    let btn = document.getElementsByTagName('button')[0];
    let result = document.getElementById('result');
    //2. 给按钮添加事件,进行计算
    btn.onclick = function () {
        //操作数初始化
        let data1 = 0;
        let data2 = 0;

        if (opt1.value.length === 0){
            alert('第一个操作数不能为空');
            opt1.focus();
            return false;
        } else if(isNaN(opt1.value)){
            alert('第一个操作数必须为数字');
            opt1.focus();
            return false;
        }else if(opt2.value.length ===0){
            alert('第2个操作数不能为空');
            opt1.focus();
            return false;
        }else if(isNaN(opt2.value)){
            alert('第2个操作数必须为数字');
            opt1.focus();
            return false;
        }else {
            data1 = parseFloat(opt1.value);
            data2 = parseFloat(opt2.value);
        }
        //对操作符进行处理
        let option = opt.value;  // 拿到了用户选择的操作
        let temp = 0;
        let flag = '';

        switch (option) {
            case 'null':
                alert('请选择操作类型');
                opt.focus();
                return false;
            case 'add':
                flag = '+';
                temp = data1 + data2;
                break;
            case 'sub':
                flag = '-';
                temp = data1 - data2;
                break;
            case 'mul':
                flag = '*';
                temp = data1 * data2;
                break;
            case 'div':
                flag = '/';
                //进行除数不能为零的判断和处理
                if (data2 === 0) {
                    alert('除数不能为零');
                    opt2.focus();
                    opt2.value = '';
                    return false;
                } else {
                    temp = data1 / data2;
                    // 四舍五入,仅保留二位小数
                    temp = Math.round(temp * 100) / 100;
                }

                break;
        }

        let str = '<span style="color:coral">';

        str += data1 + ' ' +flag + ' ' + data2 + ' = ' +temp;

        str += '</span>';

        result.innerHTML = str;
    }
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！