【基于HTML5的网页设计及应用】—

【基于HTML5的网页设计及应用】——判断是否为闰年

news2024/10/5 16:23:53

🎃个人专栏：

🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客

🐳Java基础：Java基础_IT闫的博客-CSDN博客

🐋c语言：c语言_IT闫的博客-CSDN博客

🐟MySQL：数据结构_IT闫的博客-CSDN博客

🐠数据结构：数据结构_IT闫的博客-CSDN博客

💎C++：C++_IT闫的博客-CSDN博客

🥽C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客

💻基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-CSDN博客

🥏python：python_IT闫的博客-CSDN博客

🐠离散数学：离散数学_IT闫的博客-CSDN博客

🥽Linux：Linux_Y小夜的博客-CSDN博客

🚝Rust：Rust_Y小夜的博客-CSDN博客

欢迎收看，希望对大家有用！

🎯功能简介

🎯代码解析

🎯核心代码

🎯效果展示

🎯功能简介

这段代码实现了一个简单的功能：判断用户选择的出生年份是否为闰年。

具体实现方式如下：

1. 通过HTML创建了一个表格，其中包含了学院、姓名、学号等信息，并使用下拉菜单让用户选择出生年份。
2. 使用JavaScript编写了两个函数：
- `isRunYear(year)`函数用于判断给定的年份是否为闰年。根据闰年的定义，如果年份能被4整除但不能被100整除，或者能被400整除，则返回`true`，否则返回`false`。
- `f()`函数是一个事件处理函数，在下拉菜单的选项发生变化时被调用。它获取选中的年份值，并通过调用`isRunYear(year)`函数来判断该年份是否为闰年。根据判断结果，将相应的提示信息更新到页面中。

总结起来，这段代码实现了一个简单的页面交互功能，用户可以选择出生年份并通过判断得知该年份是否为闰年。

🎯代码解析

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            margin: auto;
            border: 1px solid black;
            border-collapse: collapse;
        }

        tr,
        td {
            height: 40px;
            color: blue;
            text-align: center;
            border: 1px solid black;
        }
    </style>
</head>

<body>
这部分代码定义了一个基本的HTML页面结构，并设置了样式。在<head>标签中，设置了表格的样式，包括宽度、边界等。在<body>标签中，开始编写页面内容。
    <h1 align='center'>判断出生年份是否为闰年</h1>
    <table>
        <tr>
            <td>学院：</td>
            <td>00学院</td>
        </tr>
        <tr>
            <td>姓名：</td>
            <td>00</td>
        </tr>
        <tr>
            <td>学号:</td>
            <td>22145108050</td>
        </tr>
        <tr>
            <td>出生年份:</td>
            <td><select name="year" id="year" onchange='f()'>
                    <option value="2000">2000年</option>
                    <option value="2001">2001年</option>
                    <option value="2002">2002年</option>
                    <option value="2003">2003年</option>
                    <option value="2004">2004年</option>
                    <option value="2005">2005年</option>
                    <option value="2006">2006年</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>出生年份是否为闰年:</td>
            <td id='answer'></td>
        </tr>
    </table>
这部分代码定义了页面的标题和一个表格。标题使用<h1>标签，并设置其align属性为center，使标题居中显示。表格使用<table>标签，并在其中创建了四行两列的表格结构。每一行都包含了一个表格单元格，用于显示学院、姓名、学号等信息。在第四行中，使用<select>标签创建了一个下拉菜单，其中包含了多个选项，用于选择出生年份。通过设置onchange属性为f()，当下拉菜单的选项发生变化时，会调用JavaScript中的函数f()。
    <script>
        function isRunYear(year){
            if((year%4==0&&year%100!=0)||(year%400==0)){
                return true;
            }
            return false;
        }
        function f(){
            var year=document.getElementById("year").value;
            if(isRunYear(year)){
                document.getElementById("answer").innerHTML= year+"年是闰年";
            }else{
                document.getElementById("answer").innerHTML= year+"年不是闰年";
            }
        }
    </script>
这部分代码包含了两个JavaScript函数。首先，isRunYear(year)函数用于判断给定的年份是否为闰年。如果年份能被4整除但不能被100整除，或者能被400整除，则返回true；否则返回false。

其次，f()函数是一个事件处理函数，在下拉菜单的选项发生变化时被调用。它获取选中的年份值，并通过调用isRunYear(year)函数来判断该年份是否为闰年。根据判断结果，将相应的提示信息更新到页面中。

🎯核心代码

    <table>
        <tr>
            <td>学院：</td>
            <td>00学院</td>
        </tr>
        <tr>
            <td>姓名：</td>
            <td>00</td>
        </tr>
        <tr>
            <td>学号:</td>
            <td>22145108050</td>
        </tr>
        <tr>
            <td>出生年份:</td>
            <td><select name="year" id="year" onchange='f()'>
                    <option value="2000">2000年</option>
                    <option value="2001">2001年</option>
                    <option value="2002">2002年</option>
                    <option value="2003">2003年</option>
                    <option value="2004">2004年</option>
                    <option value="2005">2005年</option>
                    <option value="2006">2006年</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>出生年份是否为闰年:</td>
            <td id='answer'></td>
        </tr>
    </table>