使用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>
本文含有隐藏内容，请 开通VIP 后查看