zoukankan html css js c++ java

js-练习题

day01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <style>
        input {
             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 {
             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 {
             50px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
        }
        select {
            100px;
            padding:10px;
        }
        button {
            padding: 10px 20px;
            border: 1px solid #ccc;
            background: #f5f5f5;
            cursor: pointer;
        }
        #res {
            margin-top:20px;
        }

        #res table {
             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+'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 {
             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>

九九乘法表

day03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        #box {
            font-size:60px;
            margin-top:200px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        //定义一个固定的时间
        //倒计时的秒数
        var seconds = 3000;

        runTime();   //调用一下

        //定时
        var timer = setInterval(runTime, 1000);


        function runTime(){
            //计算包含的小时数
            var h = Math.floor(seconds / 3600);
            var s = seconds - h * 3600; //剩下的秒数
            //计算包含的分钟数
            var m = Math.floor(s / 60); 
            //计算剩下的秒
            s -= m * 60;  

            //给个位数 补0
            h = h < 10 ? '0'+h : h;
            m = m < 10 ? '0'+m : m;
            s = s < 10 ? '0'+s : s;

            //拼接字符串
            var timeHtml = `距离预产期还有${h}小时${m}分${s}秒`;

            //判断倒计时结束
            if (seconds <= 0) {
                clearInterval(timer);
                timeHtml = '生了';
            }

            document.querySelector('#box').innerHTML = timeHtml;


            seconds --;
        }
    </script>
</body>
</html>

倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        #box {
            font-size:60px;
            margin-top:200px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        //定义结束时间
        var endDate = new Date('02/05/2019 00:00:00');
        //当前的时间
        var currDate = new Date(); 

        //倒计时的秒数
        var seconds = Math.round(endDate.getTime()/1000) - Math.round(currDate.getTime()/1000);

        runTime();   //调用一下

        //定时
        var timer = setInterval(runTime, 1000);


        function runTime(){
            //包含的天数
            var d = Math.floor(seconds / (3600 * 24));
            var s = seconds - d * 3600 * 24;
            //计算包含的小时数
            var h = Math.floor(s / 3600);
            s -= h * 3600; //剩下的秒数
            //计算包含的分钟数
            var m = Math.floor(s / 60); 
            //计算剩下的秒
            s -= m * 60;  

            //给个位数 补0
            d = d < 10 ? '0'+d : d;
            h = h < 10 ? '0'+h : h;
            m = m < 10 ? '0'+m : m;
            s = s < 10 ? '0'+s : s;

            //拼接字符串
            var timeHtml = `距离过年还有${d}天${h}小时${m}分${s}秒`;

            //判断倒计时结束
            if (seconds <= 0) {
                clearInterval(timer);
                timeHtml = '生了';
            }

            document.querySelector('#box').innerHTML = timeHtml;


            seconds --;
        }
    </script>
</body>
</html>

倒计时-指定结束时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style>
        .outer {
            margin:200px auto 0px;
            width: 600px;
            height: 40px;
            border: 1px solid #111;
        }
        .inner {
            height: 40px;
            width: 40%;
            background: #369;
        }
        .progress {
            margin-top:2px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="progress"></div>


    <script>

        var innerEle = document.querySelector('.inner');
        var proEle = document.querySelector('.progress');
        var m = 0;
        var timer = setInterval(function(){
            innerEle.style.width = m+'%';
            proEle.innerHTML = m+'%';

            if (m >= 100){
                clearInterval(timer);
                return;
            }

            m += 1; 
        }, 17)
    </script>
</body>
</html>

进度条

查看全文

相关阅读:
博雅机器学习十讲1
tensorflow学习笔记1
卓有成效的程序员3
卓有成效的程序员2
卓有成效的程序员1
探索需求6
数据预处理
 数据科学介绍
 探索需求5
探索需求4

原文地址：https://www.cnblogs.com/xujinjin18/p/9458162.html

最新文章
Ajax
PS快捷键
 反射
 TDP协议
 UDP通信
 UDP/TCP协议
 网络协议
 线程池
 多线程----Runnable接口
 HttpServletResponse类