<!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. 【NOIP2016提高A组五校联考4】square

    题目 分析 首先,设\(f_{i,j}\)表示最大的以(i,j)为左下角的正方形的边长. 转移显然,\(f_{i,j}=\max(f_{i-1,j},f_{i,j-1},f_{i-1,j-1})+1\ ...

  2. 两个惊艳的python库：tqdm和retry

    转载到请包括本文地址:http://spaces.ac.cn/archives/3902/ Python基本是我目前工作.计算.数据挖掘的唯一编程语言(除了符号计算用Mathematica外).当然, ...

  3. electron-vue 更新 使用electron-update的版本

    electron-vue使用的electron版本比较老,用最新的electron-update会报错 我用这个版本成功 "electron-updater": "^3. ...

  4. layui中从子窗口传递数据到父窗口,第三个子弹层的值传给第二个弹层

    最近做一个项目的需要多个弹层,每个弹层中还需要数据传递, 经过测试,以下方法三个弹层才有效,如果只是有两个弹层,请用其它方法 大概如图,看图自己应该明白 如何在在b页面选择好的值传给a页面的问题,这个 ...

  5. Selenium 详解xpath定位

    xpath定位在业界被戏称为元素定位的"屠龙宝刀",宝刀在手,武林我有.现在我们就来详解xpath定位方法. 一.xpath通过元素属性定位 xpath可以通过元素的属性来定位,如 ...

  6. 探究重构代码（Code refactoring）

    Code refactoring 是什么 在不改变软件的外部行为的条件下,通过修改代码改变软件内部结构,将效率低下和过于复杂的代码转换为更高效.更简单和更简单的代码. 怎样执行Code refacto ...

  7. 利用python将两张表链接

    from pyspark.sql import SparkSessionfrom pyspark.sql.types import *import os def getUser(spark,path) ...

  8. 线下作业MySQL #20175201

    1.下载附件中的world.sql.zip, 参考http://www.cnblogs.com/rocedu/p/6371315.html#SECDB,导入world.sql,提交导入成功截图 2.编 ...

  9. jieba （中文词频统计） 、collections （字频统计）、WordCloud （词云）

    py库: jieba (中文词频统计) .collections (字频统计).WordCloud (词云) 先来个最简单的: # 查找列表中出现次数最多的值 ls = [1, 2, 3, 4, 5, ...

  10. Ansible安装及常用模块

    配置文件:/etc/ansible/ansible.cfg 主机列表:/etc/ansible/hosts  安装anslibe  wget -O /etc/yum.repos.d/epel.repo ...