javascript实现的生肖查询

最新推荐文章于 2024-10-01 16:04:18 发布

蒲公英1001

最新推荐文章于 2024-10-01 16:04:18 发布

阅读量1.3k

点赞数 15

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/wangyining070205/article/details/136456070

本文介绍了一个简单的HTML/CSS/JavaScript代码，演示如何使用switch语句根据用户输入的四位数年份查询对应的生肖。适合编程初学者学习JavaScript基础操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用switch语句实现的生肖查询，只要输入年份，就可以查询是什么生肖。代码不难，适合初学者练习。
效果如下：
在这里插入图片描述

完整代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用javascript实现的生肖查询</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>请输入出生年份（4位数）</h2>
		<div id='inquire'>
			<input type="text" id="inputyear">
			<input type="button" value="查询生肖" onclick="animalSign()" id='btn1' />
		</div>
		<div class='animal'></div>
		<script>
			function animalSign(){
				var year= document.querySelector('#inputyear').value;
				var animal=document.querySelector('.animal');
				year=parseInt(year);
				switch (year % 12){
					case 0:
					animal.innerHTML='生肖猴';
					break;
					case 1:
					animal.innerHTML='生肖鸡';
					break;
					case 2:
					animal.innerHTML='生肖狗';
					break;
					case 3:
					animal.innerHTML='生肖猪';
					break;
					case 4:
					animal.innerHTML='生肖鼠'
					break;
					case 5:
					animal.innerHTML='生肖牛'
					break;
					case 6:
					animal.innerHTML='生肖虎'
					break;
					case 7:
					animal.innerHTML='生肖兔'
					break;
					case 8:
					animal.innerHTML='生肖龙'
					break;
					case 9:
					animal.innerHTML='生肖蛇'
					break;
					case 10:
					animal.innerHTML='生肖马'
					break;
					case 11:
					animal.innerHTML='生肖羊'
					break;
				}
			}
		</script>
	</body>
</html>