<!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>

js swich的更多相关文章

  1. 莫名其妙的js基础学习！

    JavaScript基本组成部分: 1,ECMAScript:js的语法标准,基本的变量,运算符,函数,if语句,for语句等 2,DOM:操作网页上的元素API,比如盒子的移动,变色,轮播图等. 3 ...

  2. 《js高程》笔记总结一：基本概念（语法，数据类型，流程控制，函数）

    1.ECMA 欧洲计算机制造商协会 2.";"的作用 代码后的:当压缩代码时可以用于压缩代码,有效的间隔开代码. 3.数据类型有 undefined,null,boolean,st ...

  3. 2018.1.22 js

    1.JavaScrip运算符 [案例]a+=b 等价于 a=a+ba-=b 等价于 a=a-ba*=b 等价于 a=a*ba/=b 等价于 a=a/ba%=b 等价于 a%=b2.逻辑控制语句语法1: ...

  4. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  5. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  6. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  7. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  8. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  9. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

随机推荐

  1. Apache服务器配置https

    https://startssl.com这个网站可以给我们免费提供可信任的https证书,这里简单介绍一下配置的过程. 首先服务器需要安装openssl和apache的mod_ssl.so模块,并且需 ...

  2. python 关于字节串和字符串

    import pickle s=pickle.dumps(clf) f=open('svm.txt','wb') #使用二进制方式打开,write进字节,否则进字符 f.write(s) f.clos ...

  3. 【leetcode】Heaters

    Winter is coming! Your first job during the contest is to design a standard heater with fixed warm r ...

  4. 为什么要用setTimeout模拟setInterval ？

    setInterval有两个缺点: 使用setInterval时,某些间隔会被跳过: 可能多个定时器会连续执行: 在前一个定时器执行完前,不会向队列插入新的定时器(解决缺点一) 保证定时器间隔(解决缺 ...

  5. java+web+批量下载文件

    JavaWeb 文件下载功能 文件下载的实质就是文件拷贝,将文件从服务器端拷贝到浏览器端,所以文件下载需要IO技术将服务器端的文件读取到,然后写到response缓冲区中,然后再下载到个人客户端. 1 ...

  6. #333 Div2 Problem B Approximating a Constant Range (尺取 && RMQ || 尺取 && multiset)

    题目链接:http://codeforces.com/contest/602/problem/B 题意 :给出一个含有 n 个数的区间,要求找出一个最大的连续子区间使得这个子区间的最大值和最小值的差值 ...

  7. 微信小程序POST请求参数传递不到后台, 前台获取不到后端返回的数据， 以及 post 请求返回 404 但后台能收到数据

    1 微信小程序POST请求参数传递不到后台 需要在微信请求 wx.request 改变默认 header 配置为如下 wx.request({ url: 'test.php', //仅为示例,并非真实 ...

  8. sqli-labs（22）

    接下里我们进入第二二关 好像和第21关一样 cookie的base64加密注入 闭合变成了双引号而已 0X01 构造语句进行尝试 " union select 1,2,3# IiB1bmlv ...

  9. Ubuntu 12.04输入密码登陆后又跳回到登录界面

    先找到这个文件: /home/user/.xsession-errors 打开这个文件.   这个文件记录了系统启动的日志,从这里你就可以看到启动的时候哪里出了问题. 对于我的来说,问题出在这里: & ...

  10. SpringMVC - <mvc:default-servlet-handler/> 导致 Controller失效

    原文地址:http://blog.csdn.net/j080624/article/details/66969987