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

    import numpy as np from tensorboardX import SummaryWriter writer=SummaryWriter(log_dir="scala&q ...

  2. tf.split( )和tf.unstack( )

    import tensorflow as tf A = [[1, 2, 3], [4, 5, 6]] a0 = tf.split(A, num_or_size_splits=3, axis=1)#不改 ...

  3. 设置HTML的TextArea标记跟随文本内容自动设置高度

    写内容的时候用的是textarea来写,可以换行,然后预览页面也要显示是换行才行,所以预览页面还是要用textarea来显示, 样式去掉边框,不可以拉伸,不可编辑 // html <textar ...

  4. jmeter之jtl文件解析（生成测试报告）命令行

    jmeter -g TestReport201905060302.jtl -o ./report 1:命令行模式将jtl转成测试图表-注意此方法只使用jmeter3.0以后版本 第一种:在测试过程中将 ...

  5. 创建一个简单的 Springboot web项目

    1.点击Project 2.点击 Next 3.项目名 4.web 项目 4.确认 5.pom.xml <?xml version="1.0" encoding=" ...

  6. 【知识】location.search获取中文时候会被编码成一串字符

    [转码] 例如:case.html?id='这个是页面的标题' 当想要使用location.search获取?id='这个是页面的标题'的时候,包含的中文会被编码成一串字符串. 所以我们需要进行解码, ...

  7. 洛谷 P1282 多米诺骨牌 ( 线性DP )

    题意 : 题目链接 分析 :  一开始这个想法也有想到,但是貌似要开很大数组,就感觉应该不行 遂放弃想其他方法,万万没想到注意到可以滚动优化(其实不优化也可以过) 定义 dp[i][j] 表示 到第 ...

  8. #424 Div2 Problem C Jury Marks (二分 && 暴力 && std::unique && 思维)

    题目链接 :http://codeforces.com/contest/831/problem/C 题意 :选手有一个初始积分,接下来有k个裁判为他加分或减分(时间顺序给出),然后告诉你n(1< ...

  9. UVa 572 Oil Deposits (Floodfill && DFS)

    题意 :输入一个m行n列的字符矩阵,统计字符“@”组成多少个八连块.如果两个字符“@”所在的格子相邻(横竖以及对角方向),就是说它们属于同一个八连块. 分析 :可以考虑种子填充深搜的方法.两重for循 ...

  10. 阿里云ECS服务器socket无法连接的问题

    把自己的项目部署到阿里云ecs服务器之后,只有127.0.0.1才能连接到服务器端,检查了阿里云安全组规则,以及socket绑定的地址无误后,发现没有开启服务器防火墙的对应端口. firewall-c ...