javascript实现生肖查询

发布于:2025-03-09 ⋅ 阅读:(20) ⋅ 点赞:(0)

今年是农历乙巳年,蛇年,今天突发奇想,想知道公元0年是农历什么年,生肖是什么。没想到AI给我的答复是,没有公元0年。我瞬间呆愣,怎么可能?后来详细查询了一下,还真是没有。具体解释如下:
在现行的公元纪年体系中,是以耶稣诞生之年作为公元元年(即公元 1 年),在这之前的时间被称为公元前,公元前 1 年之后紧接着就是公元 1 年,不存在公元 0 年这个年份。这种纪年法是由意大利医生兼哲学家阿洛伊修斯・里利乌斯改革儒略历制定的一种历法,后经教皇格列高利十三世批准颁行。它在全球范围内得到了广泛的应用,成为了现代社会中最常用的纪年方式之一。
活了半辈子了,今天才知道,没有公元0年,是不是很搞笑?
这样的话,我去年写的那个查询生肖程序,公元1年开始往后是对的,公元前就不对了,错位了1年。
在这里插入图片描述

那公元前有生肖了吗?我又问了一下AI。AI告知,有记载的生肖最早可以追溯到战国时期,大约在公元前475年至公元前221年之间。
那我的程序需要小改一下,如果是公元前,年份要+1,
修改后代码如下。

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>生肖查询-数组实现</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			h2 {
				text-align: center;
				margin-top: 80px;
				color: #333;
			}

			#inquire {
				margin: 50px auto;
				width: 344px;
			}

			#inquire input {
				float: left;
				outline: none;
			}

			#inquire:after {
				content: "";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}

			#inputyear {
				width: 200px;
				height: 43px;
				line-height: 43px;
				padding-left: 20px;
				border: 1px solid #ccc;
				border-right: none;
				border-radius: 5px 0 0 5px;
				font-size: 20px;
				/* 左上角 左下角*/
			}

			#btn1 {
				width: 120px;
				height: 45px;
				line-height: 45px;
				border: 1px solid #ccc;
				background: #EAEAEA;
				border-radius: 0 5px 5px 0;
				/* 右上角 右下角*/
				cursor: pointer;
				color: #444;
				font-size: 16px;
			}

			.animal {
				font-size: 36px;
				text-align: center;
				color: #ff8400;
				margin: 60px auto;
				width: 344px;
			}
		</style>
	</head>
	<body>
		<h2>请输入出生年份</h2>
		<div id='inquire'>
			<input type="text" id="inputyear">
			<input type="button" value="查询生肖" onclick="getZodiac()" id='btn1' />
		</div>
		<div class='animal'></div>
		<script>
			function getZodiac() {
				const zodiacs = ["猴", "鸡", "狗", "猪", "鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊"];
				var year = document.querySelector('#inputyear').value;
				if (isNaN(year)||year==0){
					alert("请输入正确的年份")
					return
				}
				year = parseInt(year);
				var animal = document.querySelector('.animal');
				if (year < 0) {
					year = year + 1
				}
				var index = year % 12
				index = (index < 0) ? index + 12 : index
				animal.innerHTML = zodiacs[index]
			}
		</script>
	</body>
</html>