かわいいストップウォッチをメモ帳だけで作ろう！

AI・プログラミング

かわいいストップウォッチをメモ帳だけで作ろう！

こんにちは！今回は「メモ帳だけで作れるストップウォッチアプリ」をご紹介します✨
HTMLとJavaScriptだけで作れるので、小学生やパソコン初心者にもピッタリです！

✅ できること

  • スタート・ストップ・リセットができる

  • 見た目がふんわり可愛い

  • ブラウザだけで動くから、インストール不要！

💻 作り方

  1. パソコンの「メモ帳」を開きます

  2. 下のコードをコピーして貼り付けます

  3. ファイル名を stopwatch.html にして保存します（文字コードはUTF-8推奨）

  4. 保存したファイルをダブルクリックすれば、ストップウォッチが動きます！
    ストップウォッチアプリ

🧸 コピペするだけ！かわいいストップウォッチのコード

html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ストップウォッチ</title>
<style>
body {
background: linear-gradient(to bottom right, #ffe4ec, #e0f7ff);
font-family: 'Arial', sans-serif;
text-align: center;
padding: 50px;
}h1 {
font-size: 48px;
color: #ff6fa4;
margin-bottom: 20px;
}

#time {
font-size: 60px;
color: #444;
background-color: #fff;
padding: 20px 40px;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
display: inline-block;
margin-bottom: 30px;
}

button {
font-size: 20px;
padding: 10px 25px;
margin: 10px;
border: none;
border-radius: 30px;
background-color: #ffb6c1;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #ff69b4;
}
</style>
</head>
<body>
<h1>ストップウォッチ⏱️</h1>
<div id=“time”>00:00:00</div><br>
<button onclick=“start()”>スタート</button>
<button onclick=“stop()”>ストップ</button>
<button onclick=“reset()”>リセット</button>

<script>
let startTime;
let elapsedTime = 0;
let timerId;
let running = false;

function updateTime() {
const now = Date.now();
const diff = now – startTime + elapsedTime;
const sec = Math.floor(diff / 1000);
const ms = Math.floor((diff % 1000) / 10);
const min = Math.floor(sec / 60);
const hrs = Math.floor(min / 60);

const display =
String(hrs).padStart(2, ‘0’) + ‘:’ +
String(min % 60).padStart(2, ‘0’) + ‘:’ +
String(sec % 60).padStart(2, ‘0’);

document.getElementById(‘time’).textContent = display;
}

function start() {
if (running) return;
running = true;
startTime = Date.now();
timerId = setInterval(updateTime, 100);
}

function stop() {
if (!running) return;
running = false;
clearInterval(timerId);
elapsedTime += Date.now() – startTime;
}

function reset() {
running = false;
clearInterval(timerId);
elapsedTime = 0;
document.getElementById(‘time’).textContent = “00:00:00”;
}
</script>
</body>
</html>

🌸 おまけ：自分好みにアレンジしよう！

このコードは、色やボタンの形を変えて自由にカスタマイズできます。たとえば、

  • 背景をグラデーションにしたり

  • ボタンに絵文字を入れたり

  • ぴょんっとアニメーションをつけたり

ちょっと工夫するだけで、自分だけのオリジナルストップウォッチが作れます

コメント

タイトルとURLをコピーしました