<!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. solairs11与solairs10 ftp服务的区别

    Migration from Solaris WU-FTPD to ProFTPD Introduction ------------ This document provides an overvi ...

  2. Mysql使用Merge引擎分表--方式及优缺点

    merge:是SQL语句的一种.具体来说,MERGE语句会检查原数据表记录和目标表记录.如果记录在原数据表和目标表中均存在,则目标表中的记录将被原数据表中的记录所更新(执行Update操作):如果目标 ...

  3. Nginx 502 Bad Gateway 的错误的解决方案

    我用的是nginx反向代理Apache,直接用Apache不会有任何问题,加上nginx就会有部分ajax请求502的错误,下面是我收集到的解决方案. 一.fastcgi缓冲区设置过小 出现错误,首先 ...

  4. 查看系统的DPI

    #include <Windows.h> #include <iostream> int main() { SetProcessDpiAwarenessContext(DPI_ ...

  5. 【POJ2152】Fire

    题目大意:给定一棵 N 个节点的无根树,点有点权,边有边权,现需要选出一个点集,满足树上任意一个点到该点集的距离不超过该点的给定值,求选出点集点权的最小值是多少. 题解:可以发现,对于以 i 为根的子 ...

  6. python（Django2.0） 安装

    前言 哇 ,python 是真的强大,看看如何安装的python: 下载咯 在python的官网下载python对应版本:https://www.python.org/downloads/window ...

  7. 误删除mysql的root账号

    误删除mysql的root账号 mysql 测试通过 # mysql 误删除root最高权限用户 操作步骤: .停止mysql服务 (如果你删除了root用户,但没有退出操作对话框,恭喜节省了些麻烦, ...

  8. Error: pgraster_wkb_reader: grayscale band type 10 unsupported

    错误原因:Float32 is not supported for rendering.即栅格数据类型Float32不支持. cmd中用GDAL查看.在波段中的数据类型是Float32的不支持渲染. ...

  9. PHP培训教程 php几个不起眼儿的小技巧

    说是不起眼儿的小技巧,其实应该说是不常用的常规应用吧.很多事情就是这样,知道是一马事儿,会用是一马事儿,精习又是另外一马事儿.而成为高手更是需要扎实的基本功. str_repeat 重复输出字符串就靠 ...

  10. C#内存占用释放

    序言 系统启动起来以后,内存占用越来越大,使用析构函数.GC.Collect什么的也不见效果,后来查了好久,找到了个办法,就是使用 SetProcessWorkingSetSize函数.这个函数是Wi ...