【前端】【HTML+CSS+JavaScript(JS)】判断闰年/平年的实现

最新推荐文章于 2024-03-12 13:08:35 发布

_小鹰

最新推荐文章于 2024-03-12 13:08:35 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： css 前端 javascript html

本文链接：https://blog.csdn.net/cc2855816075/article/details/122888301

版权

前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>判断闰年/平年</title>
		<style type="text/css">
			*{
				border: 0px solid;
				text-align: center;
				font-family: "微软雅黑";
			}
			#b-box{
				margin-top: 200px;
				width: 450px;
				height: 240px;
				border-color: #FF5500;
				border-radius: 10px;
				border-width: 2px;
				margin-left: 525px;
			}
			.ln1,.ln2{
				display: inline-block;
				height: 50px;
			}
			.ln1 input{
				height: 30px;
				text-align: left;
				border-color: #FF5500;
				border-width: 2px;
				border-radius: 10px;
			}
			.ln2{
				margin-top: 25px;
				margin-left: 70px;
				margin-right: 70px;
				display: inline-block;
			
			}
			.ln2 input{
				width: 80px;
				height: 40px;
				border-radius: 10px;
			}
			.ln2 input:hover{
				color: aliceblue;
				background-color: #FF5500;
				cursor: pointer;
			}
			#tt{
				margin-top: 20px;
				font-size: 30px;
				margin-bottom: 30px;
				color: #464646;
			}
		</style>
		<script type="text/javascript">
			function estimate(){
				var year = parseInt(document.getElementById("year-res").value);
				var res = ( year%4 == 0 && year%100 != 0 || year%400==0 ) ? "是闰年" : "是平年";
				document.getElementById("year-res").value = year+ res;
			}
			function reset(){
				document.getElementById("year-res").value = "";
			}
		</script>
	</head>
	<body>
		<div id="b-box">
			<div id="tt">
				<label>判断闰年/平年</label>
			</div>
			<div class="ln1"><label>请输入一个年份：</label></div>
			<div class="ln1"><input type="text" id="year-res" value="" /></div>
			<br/>
			<!-- 不要忘记onclick -->
			<div class="ln2"><input type="button" value="判断" onclick="estimate()"/></div>
			<div class="ln2"><input type="button" value="重置" onclick="reset()"/></div>
		</div>
	</body>
</html>