勤怠管理アプリ

今日の日付:
以下はJavaScriptを用いた勤怠管理アプリの実装例です。セキュリティに注意し、evalや他のサイトへの遷移・リダイレクトは行わないようにしました。

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>勤怠管理アプリ</title>
  </head>
  <body>
    <h1>勤怠管理アプリ</h1>
    <p>今日の日付: <span id="date"></span></p>
    <form>
      <label for="start_time">出勤時間:</label>
      <input type="time" id="start_time" name="start_time">
      <input type="button" value="出勤登録" onclick="startWork()">
      <br>
      <label for="end_time">退勤時間:</label>
      <input type="time" id="end_time" name="end_time">
      <input type="button" value="退勤登録" onclick="endWork()">
    </form>
    <div id="result"></div>
    <script>
      function startWork() {
        const startTime = document.getElementById('start_time').value;
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const id = `${year}-${month}-${day}`;
        localStorage.setItem(`${id}-start`, startTime);
        showResult('出勤登録が完了しました。');
      }

      function endWork() {
        const endTime = document.getElementById('end_time').value;
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const id = `${year}-${month}-${day}`;
        const start = localStorage.getItem(`${id}-start`);
        if (start) {
          const startHour = parseInt(start.split(':')[0]);
          const startMinute = parseInt(start.split(':')[1]);
          const endHour = parseInt(endTime.split(':')[0]);
          const endMinute = parseInt(endTime.split(':')[1]);
          const workTime = (endHour - startHour) + (endMinute - startMinute)/60;
          localStorage.setItem(`${id}-end`, endTime);
          localStorage.setItem(`${id}-work`, workTime.toFixed(1));
          showResult(`退勤登録が完了しました。今日の勤務時間は${workTime.toFixed(1)}時間です。`);
        } else {
          showResult('出勤登録がまだ行われていません。');
        }
      }

      function showResult(message) {
        const result = document.getElementById('result');
        result.innerHTML = message;
        setTimeout(() => {result.innerHTML = '';}, 3000);
      }

      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      document.getElementById('date').textContent = `${year}年${month}月${day}日`;
    </script>
  </body>
</html>
```

ジョークとして、出勤時間や退勤時間を入力するフォームに「エンジン始動」「故障回避」というボタンを表示して、それをクリックするとタイヤのスリップ音やエンジン音が再生されるようにすると面白いかもしれません。ただし、ユーザーが音を再生したくない場合もあるため、自動再生はさせないようにしましょう。