拿来做课设哈哈哈-“久坐提醒器”的网页应用

news2024/10/5 22:21:18

这篇文章将介绍一个名为“久坐提醒器”的网页应用，它通过HTML、CSS和JavaScript三种技术实现。下面是对这三种技术在实现该应用中的作用和代码的详细解析。
在这里插入图片描述

在这里插入图片描述

HTML：构建网页结构

HTML（HyperText Markup Language）是网页的基础结构，它定义了网页的框架和内容。在“久坐提醒器”这个应用中，HTML代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>久坐提醒器</title>
    <!-- 省略CSS样式部分 -->
</head>
<body>
    <!-- 容器 -->
    <div class="container">
        <h2>久坐提醒器</h2>
        <!-- 提醒间隔输入框 -->
        <input type="number" id="reminderTime" placeholder="设置提醒间隔（分钟）" min="1" />
        <!-- 开始提醒按钮 -->
        <button id="startButton">开始提醒</button>
        <!-- 提醒日志容器 -->
        <div id="logContainer">
            <p>提醒日志：</p>
        </div>
    </div>
    <!-- 音频元素 -->
    <audio id="alertSound" src="ls.mp3" preload="auto" hidden></audio>
    <!-- 模态框 -->
    <div id="myModal" class="modal">
        <div class="modal-content">
            <!-- 关闭按钮 -->
            <span class="close">&times;</span>
            <!-- 提醒文本 -->
            <p id="modalText">时间到，站起来休息一下！</p>
        </div>
    </div>
    <!-- 省略JavaScript脚本部分 -->
</body>
</html>

CSS：设置网页样式

CSS（Cascading Style Sheets）用于设置网页的视觉样式和布局。以下是“久坐提醒器”应用的CSS样式代码：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
}

/* 省略其他CSS样式 */

CSS代码定义了网页的背景颜色、字体、布局等，以及容器、输入框、按钮和模态框的样式。

JavaScript：添加交互功能

JavaScript是实现网页交互功能的关键技术。以下是“久坐提醒器”应用的JavaScript代码：

var startButton = document.getElementById('startButton');
var reminderTimeInput = document.getElementById('reminderTime');
var alertSound = document.getElementById('alertSound');
var modal = document.getElementById('myModal');
var closeSpan = document.querySelector('.close');
var logContainer = document.getElementById('logContainer');
var reminderTimeout = null;
var hasStarted = false;

startButton.addEventListener('click', function() {
    var time = parseInt(reminderTimeInput.value) * 60000;
    if (isNaN(time) || time < 1) {
        alert('请输入一个有效的分钟数！');
        return;
    }
    if (!hasStarted) {
        startButton.disabled = true;
        hasStarted = true;
        reminderTimeout = setTimeout(function() {
            showReminder();
        }, time);
    }
});

function showReminder() {
    modal.style.display = "block";
    alertSound.play();
    logReminder();
}

function logReminder() {
    var logEntry = document.createElement('div');
    logEntry.className = 'logEntry';
    logEntry.textContent = '提醒 ' + (logContainer.children.length + 1) + 
        ', 时间: ' + new Date().toLocaleTimeString();
    logContainer.prepend(logEntry);
    logContainer.scrollTop = 0;
}

closeSpan.onclick = function() {
    modal.style.display = "none";
    alertSound.pause();
    alertSound.currentTime = 0;
    startButton.disabled = false;
    hasStarted = false;
};

window.onclick = function(event) {
    if (event.target == modal) {
        closeSpan.onclick();
    }
};