js-练习题

day01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <style>
        input {
            width: 300px;
            font-size: 16px;
            line-height: 18px;
            padding:10px;
            border: 1px solid #ccc;
        }
        
        button {
            padding: 10px 20px;
            border: 1px solid #ccc;
            background: #f5f5f5;
            cursor: pointer;
        }
        .res {
            width: 300px;
            height: 100px;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>计算器</h1>
    <hr>
    
    <table>
        <tr>
            <td>加数1：</td>
            <td>
                <input type="text" id="num1">
            </td>
        </tr>

        <tr>
            <td>加数2：</td>
            <td>
                <input type="number" id="num2">
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <button onclick="add(1)">+</button>
                <button onclick="add(2)">-</button>
                <button onclick="add(3)">x</button>
                <button onclick="add(4)">÷</button>
                <button onclick="add(5)">AC</button>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <div class="res" id="box"></div>
            </td>
        </tr>
    </table>

    <script>
        
        //定义函数
        function add(mode) {
            // 获取 用户在 input 中输入的内容
            // 获取元素对象 返回对象 对象描述 id是num1的元素 
            var inputEle1 = document.getElementById('num1');
            var inputEle2 = document.getElementById('num2');
        

            //获取用户在input中输入的值
            var v1 = inputEle1.value;
            var v2 = inputEle2.value;

            //判断用户输入是否是纯数字
            if (isNaN(v1)) {
                alert('加数1必须是纯数字');
                return; 
            }
            if (isNaN(v2)) {
                alert('加数2必须是纯数字');
                return;
            }

            //把字符串转换为数字
            v1 = Number(v1);
            v2 = Number(v2);

            //两个数操作
            switch (mode) {
                case 1:
                    var sum = v1 + v2; 
                    break; //相加
                case 2:
                    var sum = v1 - v2; 
                    break; //相减
                case 3:
                    var sum = v1 * v2; 
                    break; //相乘
                case 4:
                    var sum = v1 / v2; 
                    break; //相除
                case 5: 
                    inputEle1.value = '';
                    inputEle2.value = '';
                    var sum = '';
                    break;
            }
            

            //获取放结果的div元素 innerHTML 获取或者设置 双标签内的内容
            var boxEle = document.getElementById('box');
            boxEle.innerHTML = sum;

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

简易计算器

day02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输出数字</title>
</head>
<body>
    <h1>同志交友</h1>
    <hr>
    <script>
        for (var i = 1; i <= 90; i ++) {
            //让各位数前面补0
            i = i < 10 ? '0'+i : i;

            //输出数字
            document.write(i, '&nbsp;&nbsp;&nbsp;')

            //逢10换行
            if (i % 10 === 0) {
                document.write('<br>');
            }
        }
    </script>
</body>
</html>

输出数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同志交友</title>
    <style>
        input {
            width: 50px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
        }
        select {
            width:100px;
            padding:10px;
        }
        button {
            padding: 10px 20px;
            border: 1px solid #ccc;
            background: #f5f5f5;
            cursor: pointer;
        }
        #res {
            margin-top:20px;
        }

        #res table {
            width: 700px;
            table-layout: fixed;
            border-collapse: collapse;
        }
        #res td,#res th {
            padding: 10px;
            border: 1px solid #999;
            text-align: center;
        }

        .red {
            color: red;
        }
        .green {
            color: green;
        }

    </style>
</head>
<body>
    <h1>同志交友</h1>
    <hr>

    请输入本月多少天:
    <input type="number" id="days" max="31" min="28" step="1" value="31">
    请输入本月一号星期几:
    &nbsp;&nbsp;&nbsp;
    <select  id="weekday">
        <option value="0">星期日</option>
        <option value="1">星期一</option>
        <option value="2">星期二</option>
        <option value="3">星期三</option>
        <option value="4">星期四</option>
        <option value="5">星期五</option>
        <option value="6">星期六</option>
    </select>
    &nbsp;&nbsp;&nbsp;
    <button onclick="makeCalendar()">生成日历</button>


    <div id="res"></div>


    <script>
        //声明函数
        function makeCalendar() {
            //获取 每月天数
            var days = Number(document.getElementById('days').value);
            //获取一号是星期几
            var weekday = Number(document.getElementById('weekday').value);

            //计算日历有多少行
            var rows = Math.ceil((days + weekday) / 7);
        
            //定义变量
            var html = '<table>';
            html += `
            <tr>
                <th class="red">星期日</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th class="green">星期六</th>
            </tr>
            `;

            var dayNumber = '';

            //循环 生成表格
            for (var i = 0; i < rows; i ++) {
                html += '<tr>';

                for (var j = 1; j <= 7; j ++) {
                    if (j === 1) {
                        html += '<td class="red">';
                    } else if (j === 7) {
                        html += '<td class="green">';
                    } else {
                        html += '<td>';
                    }

                    dayNumber = j + i*7 - weekday; //计算每个单元格的数值
                    //判断是否超出范围
                    if (dayNumber <= 0 || dayNumber > days) {
                        dayNumber = '';
                    }

                    html += dayNumber+'</td>';
                }
                
                html += '</tr>';
            }

            html += '</table>'


            //添加表格内容到页面
            document.getElementById('res').innerHTML = html;
        }

    </script>
</body>
</html>

日历生成器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格生成器</title>
    <style>
        input {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
        }

        button {
            padding: 10px 30px;
            border: 1px solid #ccc;
            background: #f5f5f5;
            cursor: pointer;
        }

        #res {
            margin-top: 30px;
        }
        #res table {
            table-layout: fixed;
            border-collapse: collapse;
        }
        #res td{
            padding: 20px;
        }
    </style>
</head>
<body>
    <h1>表格生成器</h1>
    <hr>
    请输入表格宽度： <input type="number" id="tableWidth" value="800"> <br>
    请输入表格行数： <input type="number" id="tableRows" value="6"> <br>
    请输入表格列数： <input type="number" id="tableCols" value="10"> <br>
    请输入表格边框： <input type="number" id="tableBorder" value="1"> <br>
    <button onclick="makeTable()">生成</button>

    <div id="res"></div>


    <script>
        function makeTable() {
            //获取用户输入
            var rows = Number(document.getElementById('tableRows').value);
            var cols = Number(document.getElementById('tableCols').value);
            var width = Number(document.getElementById('tableWidth').value);
            var borderWidth = Number(document.getElementById('tableBorder').value);


            //循环生成表格
            var html = '<table style="width:'+width+'px">';
            for (var i = 0; i < rows; i ++) {
                html += '<tr>';
                for (var j = 0; j < cols; j ++) {
                    html += '<td style="border:'+borderWidth+'px solid #ccc"></td>';
                }
                html += '</tr>';
            }
            html += '</table>';

            //把生成的内容添加到页面
            document.getElementById('res').innerHTML = html;
        }
    </script>
</body>
</html>

表格生成器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style>
        body {
            color: #333;
            /*color: red;*/
        }
        table {
            width: 900px;
            table-layout: fixed;
            /*border-collapse: collapse;*/
            empty-cells: hide;
        }
        td {
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>九九乘法表</h1>
    <hr>


    <script>

        //JavaScript生成九九乘法表
        document.write('<table>');
        //循环 输出tr 行
        for (var i = 1; i <= 9; i ++) {
            document.write('<tr>');

            //输出 td 单元格
            for (var j = 1; j <= i; j ++) {
                document.write(`<td>${i}&times;${j} = ${i * j}</td>`);
            }
            
            document.write('</tr>');
        }
        document.write('</table>');
        document.write('<br><br><br>');



        document.write('<table>');
        //循环 输出tr 行
        for (var i = 9; i >= 1; i --) {
            document.write('<tr>');
            //输出 td 单元格
            for (var j = 1; j <= i; j ++) {
                document.write(`<td>${i}&times;${j} = ${i * j}</td>`);
            }
            
            document.write('</tr>');
        }
        document.write('</table>');
        document.write('<br><br><br>');



        document.write('<table>');
        //循环 输出tr 行
        for (var i = 1; i <= 9; i ++) {
            document.write('<tr>');
            //输出空的单元格
            for (var m = 1; m <= (9-i); m ++) {
                document.write('<td></td>');
            }
            //输出 td 单元格
            for (var j = 1; j <= i; j ++) {
                document.write(`<td>${i}&times;${j} = ${i * j}</td>`);
            }    
            document.write('</tr>');
        }
        document.write('</table>');
        document.write('<br><br><br>');



        document.write('<table>');
        //循环 输出tr 行
        for (var i = 9; i >= 1; i --) {
            document.write('<tr>');
            //输出空的单元格
            for (var m = 1; m <= (9-i); m ++) {
                document.write('<td></td>');
            }
            //输出 td 单元格
            for (var j = 1; j <= i; j ++) {
                document.write(`<td>${i}&times;${j} = ${i * j}</td>`);
            }        
            document.write('</tr>');
        }
        document.write('</table>');



    </script>

</body>
</html>

九九乘法表

猜你喜欢