<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同志交友</title>
<style>
input {
width: 300px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
border: 1px solid #ccc;
background: #f5f5f5;
}
#res {
margin-top:20px;
width: 300px;
min-height: 100px;
padding: 10px;
border:1px solid #ccc;
}

</style>
</head>
<body>
<h1>同志交友</h1>
<hr>
<h3>请输入您的生日:</h3>
<input type="date" id="yearInput">
<button onclick="makeFn()">提交</button>

<div id="res"></div>

<script>
//声明函数
function makeFn() {
//获取用户输入的日期
var date = document.getElementById('yearInput').value;

//从日期中获取年 并且转换为Number
var year = Number(date.split('-')[0]);

//判断
var animal = '';
switch (year % 12) {
case 0: animal = '猴'; break;
case 1: animal = '鸡'; break;
case 2: animal = '狗'; break;
case 3: animal = '猪'; break;
case 4: animal = '鼠'; break;
case 5: animal = '牛'; break;
case 6: animal = '虎'; break;
case 7: animal = '兔'; break;
case 8: animal = '龙'; break;
case 9: animal = '蛇'; break;
case 10: animal = '马'; break;
case 11: animal = '羊'; break;
default: animal = '驴'; //前面的条件都不满足
}

//把结果显示到页面中
document.getElementById('res').innerHTML = '您的生肖是: '+animal;

/*
year % 12 -- 0 ~ 11
鼠 4 2008 奥运会 + 12 (2020)
牛 5 2009
虎 6 2010
兔 7
龙 8
蛇 9
马 10
羊 11
猴 0
鸡 1
狗 2
猪 3
*/

}

//console.log(2020 % 12)

</script>
</body>
</html>

最新文章

  1. window.onload和$(document).ready()的区别
  2. Wechat4j之Hello world——使用wechat4j快速开发java版微信公众号
  3. C#构造函数相关主题
  4. dfs.replication 参数 动态修改
  5. 第1章 PCI总线的基本知识
  6. Spring MVC 使用介绍(十二)控制器返回结果统一处理
  7. Linux中CPU亲和性(affinity)
  8. 阅读:ECMAScript 6 入门(1)
  9. python 关于 input
  10. node.js模块的坑
  11. OC开发_Storyboard——MapKit
  12. 多线程执行顺序诡异现象谈,你不知道的pthread_create
  13. MongoDB对Javascript的支持
  14. &lt;U+FEFF&gt; character showing up in files. How to remove them?
  15. go 学习 ---golang命令
  16. c++ 的vector、array和数组的比较
  17. [GO]方法的继承
  18. [Objective-C语言教程]程序结构(3)
  19. python SQLAchemy多外键关联
  20. 从Windows复制文件到Linux显示乱码问题

热门文章

  1. 更新Navicat Premium 后打开数据库出现1146 - Table &#39;performance_schema.session_variables&#39; doesn&#39;t exist
  2. Spring 核心之IOC 容器
  3. 《Head First 软件开发》阅读四
  4. hexo+github+Theme Art Design文章发布
  5. 013:URL传参数
  6. vertica,greenplumr容器安装
  7. Python黑科技:FuckIt.py
  8. [LeetCode]-DataBase-Nth Highest Salary
  9. for aws associate exam
  10. easyhook源码分析二——注入