查询生肖案例

1. 我想在座的各位都应该知道自己的生肖吧，什么？不知道？不知道不要紧，今天我来教大家用代码来实现一个可以查询生肖的案例。
2. 样式展示：这里原本白色的页面背景被我用一张图片来点缀了，不为别的只为好看，中间也就是我们主要的查询部分了，这里我使用了边框和白色的透明背景样式来形成了一个外盒，外盒里面的样式也就是一个文本框和按钮组成。

1. 效果展示：当我们在文本框里输入一串数字（年份），然后按下“查询生肖”按钮时，页面就会弹出警告框，警告框里会告诉你所输入的年份对应的生肖。

1. 代码讲解：首先我们在新建的HTML文档里的body标签中间写上一个div标签，div标签里加上input（文本框）和button（按钮）标签；给body，div和input标签分别给它类和ID名，而button标签给它一个点击事件就行了。

1. 然后就是写CSS样式部分了，在head标签下新建一个style标签，在此标签里给写好了类名的标签添加样式，如图所示，有疑问的地方我已经注释出来了。

1. 接下来就是JS部分了，也是在body标签里，新建一个script标签，我们来声明一个生肖的类，然后我们按下按钮时获取文本框的内容，判断年份是否小于0，如果小于0的话，就弹出警告框告知，这一步我们要用到if语句。

1. 随后我们用if语句中取余的方法来获取年份所对应的生肖，然后将获取的生肖赋值到当时生肖的类。

1. 最后将我们输出的结果在警告框里显示。