web基础4.17

最新推荐文章于 2025-06-06 18:04:50 发布

xiaoyue2019

最新推荐文章于 2025-06-06 18:04:50 发布

阅读量342

点赞数

分类专栏：前端作业都到这里来文章标签： web html5 前端 jQuery

本文链接：https://blog.youkuaiyun.com/xiaoyue2019/article/details/124234071

版权

前端作业都到这里来专栏收录该内容

3 篇文章

订阅专栏

(论述题)
1）在网页上显示当前日期（x年x月x日）、时间（x点x分x秒)、星期(星期x）
2）根据时间5-11点，网页显示“早上好”、11-13点显示“中午好”，13-17点显示“下午好”、17-21点显示“晚上好”21点到4点显示“快睡觉”
3）表单中提供文本框、按钮，可以让用户输入1-5个成绩，（个数不确定，可以字符串形式，也可以一个个输入方式）
4）按下计算按钮，提示框显示所有成绩和平均成绩

<!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>肖越</title>
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        #first {
            text-align: center;
            background-image: url("img/background.jpeg");
            height: 1240px;
            width: 1000px;
        }
        
        #time {
            font-weight: 1000px;
        }
        
        #buttonAdd {
            width: 100px;
            margin-right: 9px;
        }
        
        #buttonCalc {
            width: 100px;
        }
        
        #calcFor {
            font-weight: 1000px;
            color: red;
        }
        
        #howTouse {
            font-weight: 1000px;
            color: red;
        }
        
        #second {
            margin-top: 10px;
            margin-right: 10px;
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="first">

        <p id="time"></p>
        <h2>平均成绩计算器</h2>
        <input id="score1" disabled="true" type="text">:
        <input id="score2" type="text"><br>
        <button id="buttonAdd">确定</button><button id="buttonCalc">计算</button>
        <p id="calcFor">计算公式：学生平均成绩=学生成绩/学生数量（结果四舍五入）</p>
        <p id="howTouse">使用方式：输入学生成绩，确定保存，输入完所有成绩后点击计算</p>
        <div id="second"></div>
    </div>

    <script>
        var welcome = "hello";

        function getFormatDate() {
            var nowDate = new Date();
            var year = nowDate.getFullYear();
            var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
            var date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
            var hour = nowDate.getHours() < 10 ? "0" + nowDate.getHours() : nowDate.getHours();
            var minute = nowDate.getMinutes() < 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes();
            var second = nowDate.getSeconds() < 10 ? "0" + nowDate.getSeconds() : nowDate.getSeconds();
            if (5 < hour && hour < 11) {
                welcome = "早上好！";
            } else if (11 < hour && hour < 13) {
                welcome = "中午好！";
            } else if (13 < hour && hour < 17) {
                welcome = "晚上好！";
            } else {
                welcome = "快睡觉！";
            }
            return year + "年" + month + "月" + date + "日  " + hour + ":" + minute + ":" + second + "  " + welcome;
        }

        function setTime() {
            $("#time").text(getFormatDate());
        }


        $(function() {
            // 定义分数数组、序号
            var scores = [];
            var num = 1;

            // 初始化score1
            $("#score1").val(num);

            // 增加成绩
            $("#buttonAdd").click(function() {
                var test = $("#score2").val();
                scores.push(test);
                num += 1;
                $("#score1").val(num);
                $("#second").append("<p>id:" + num + ", 成绩： " + test + " 分</p>");
                console.log(num, scores);
            });

            // 计算成绩
            $("#buttonCalc").click(function() {
                $("#score1").val("平均成绩为");
                var acc = 0;
                $.each(scores, function(index, value) {
                    acc += parseInt(value);
                })
                var avg = acc / $(scores).length;
                console.log(scores.length, acc);
                $("#score2").val(parseInt(avg));
            });

            // 按秒刷新时间
            setInterval(setTime, 1000);


        });
    </script>
</body>

</html>