以下が実装例になります。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>運賃計算</title>
</head>
<body>
<h1>運賃計算</h1>
<form>
<label for="initialFee">初乗り運賃（1kmまで）：</label>
<input type="number" id="initialFee" name="initialFee"><br><br>
<label for="additionalFee">加算運賃（0.5kmごとに）：</label>
<input type="number" id="additionalFee" name="additionalFee"><br><br>
<label for="distance">乗る距離（km）：</label>
<input type="number" id="distance" name="distance"><br><br>
<input type="button" value="運賃を計算する" onclick="calculateFare()">
</form>
<div id="result"></div>
<script>
function calculateFare() {
const initialFee = Number(document.getElementById("initialFee").value);
const additionalFee = Number(document.getElementById("additionalFee").value);
const distance = Number(document.getElementById("distance").value);
if (initialFee < 0 || additionalFee < 0 || distance < 0) { // セキュリティ対策
document.getElementById("result").innerHTML = "入力が不正です。"; // エラーメッセージを表示
} else {
const fare = initialFee + Math.ceil((distance - 1) / 0.5) * additionalFee; // Math.ceilは小数点を切り上げる関数
document.getElementById("result").innerHTML = "運賃は " + fare + " 円です。";
}
}
</script>
</body>
</html>
```
ジョークとしては、「運賃を払わないと、タクシーのおじさんが腕相撲を挑んできます。」などが挙げられます。ただし、ジョークも適度に控えめにすることが大切です。
