Js基础知识：Js实现制作简单的计算器和九九乘法表实例

1、制作一个如图所示的简易计算器的样子，如下

js简易计算器的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" size="5" id="num1" value="" />
        <select id="ysf">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
            <option value="%">%</option>
        </select>
        <input type="text" size="5" id="num2" value=""/>
        <input type="button" value="计算" id="btn" />
    </div>
    <p id="res"></p>
    <script>
        document.getElementById('btn').onclick=function(){
            var num1 = document.getElementById('num1').value;
            var num2 = document.getElementById('num2').value;
            var ysf = document.getElementById('ysf').value;
            document.getElementById('res').innerHTML=num1+"---"+num2+"---"+ysf;
            var res = document.getElementById('res')
            // res.innerHTML = num1+'x'+num2+'='+(num1 * num2)
            switch(ysf){
                    case '+':
                        res.innerHTML = num1+'+'+num2+'='+(parseInt(num1) + parseInt(num2));
                        break;
                    case '-':
                        res.innerHTML = num1+'-'+num2+'='+(parseInt(num1) - parseInt(num2));
                        break;
                    case '*':
                        res.innerHTML = num1+'*'+num2+'='+(parseInt(num1) * parseInt(num2));
                        break;
                    case '/':
                        res.innerHTML = num1+'/'+num2+'='+(parseInt(num1) / parseInt(num2));
                        break;
                    case '%':
                        res.innerHTML = num1+'%'+num2+'='+(parseInt(num1) % parseInt(num2));
                        break;
                }
        }
    </script>
</body>
</html>

2、制作一个如图所示的九九乘法表（二种方法：正和反）

js代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //九九乘法表：第一种方法
        document.write('<table border="1" width="800" align="center">')
        for (var i = 1; i <= 9; i++) {
            document.write('<tr>')
            for (var td = 1; td <= i; td++) {
                document.write('<td>'+ td + '×' + i + '=' + (td * i) + '</td>')
            }
            document.write('</tr>')
        }
        document.write('</table>')
        document.write('<br/>')
        //九九乘法表：第二种方法（相反）
        document.write('<table border="1" width="800" align="center">')
        for (var i = 9; i > 0; i--) {
            document.write('<tr>')
            for (var td = 1; td <= i; td++) {
                document.write('<td>'+ td + '×' + i + '=' + (td * i) + '</td>')
            }
            document.write('</tr>')
        }
        document.write('</table>')
    </script>
</body>
</html>

学习一段时间了,感觉js基础的熟练度不够，有的忘了。。。看来需要多练多写多记的js，记录和积累~

1、制作一个如图所示的简易计算器的样子，如下

2、制作一个如图所示的九九乘法表（二种方法：正和反）

相关文章