<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本框输入一个年份,判断是否是闰年(能被4整除却不能被100整除的年份。世纪年份能被400整除的是闰年)将结果在弹出窗口中显示</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
margin: 0 auto;
margin-left: 40%;
margin-top: 300px;
}
.year {
padding: 9px 7px;
}
.btn {
cursor: pointer;
width: 102px;
height: 38px;
background-color: #38f;
color: white;
border: 0;
margin-left: -5px;
}
.err {
font-size: 14px;
color: red;
margin-left: 2px;
}
.ok {
font-size: 14px;
color: green;
margin-left: 2px;
}
</style>
</head>
<body>
<input type="text" id="year" class="year" placeholder="请输入一个年份">
<button class="btn" onclick="validate()">判断</button>
<span id="result"></span>
<script>
function validate() {
// 1、取得input输入框的值
var year = document.getElementById('year').value;
var resultElement = document.getElementById('result');
// 2、验证input的内容
if (year == '') {
resultElement.innerHTML = '<img src="img/err.png"><span class="err">输入的年份不能为空!</span>';
return;
}
if (isNaN(year)) {
resultElement.innerHTML = '<img src="img/err.png"><span class="err">输入的年份必须为数字!</span>';
return;
}
// 3、闰年的判断
year = parseInt(year);
if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) {
resultElement.innerHTML = '<img src="img/ok.png"><span class="ok">' + year + '年是闰年!</span>';
} else {
resultElement.innerHTML = '<img src="img/err.png"><span class="err">' + year + '年不是闰年!</span>';
}
}
</script>
</body>
</html>
err.png ok.png