jQuery实现根据生日计算年龄 星座 生肖


Posted in Javascript onNovember 23, 2016
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

 <script type="text/javascript">
 //根据输入的生日自动获取星座,生肖和年龄。
 var year = new Array("猪", "鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗");
 jQuery(function () {
  $("#Birthday").blur(function () {
  setTimeout(function () {
   var strHtml = "";
   var date = new Date($("#Birthday").val().replace(/-/g, "/"));
   var con = getxingzuo(date.getMonth() + 1, date.getDate());
   strHtml += "你的星座是:" + con;
   var zodiac = year[(parseInt(date.getFullYear()) + 9) % 12];
   strHtml += "<br/>你的生肖是:" + zodiac;
   var Age = new Date().getFullYear() - date.getFullYear();
   strHtml += "<br/>你的年龄是:" + Age;
   $("#div1").append(strHtml);
  }, 200);
  })
 })
 function getxingzuo(month, day) {
  var d = new Date(1999, month - 1, day, 0, 0, 0);
  var arr = [];
  arr.push(["魔羯座", new Date(1999, 0, 1, 0, 0, 0)])
  arr.push(["水瓶座", new Date(1999, 0, 20, 0, 0, 0)])
  arr.push(["双鱼座", new Date(1999, 1, 19, 0, 0, 0)])
  arr.push(["牡羊座", new Date(1999, 2, 21, 0, 0, 0)])
  arr.push(["金牛座", new Date(1999, 3, 21, 0, 0, 0)])
  arr.push(["双子座", new Date(1999, 4, 21, 0, 0, 0)])
  arr.push(["巨蟹座", new Date(1999, 5, 22, 0, 0, 0)])
  arr.push(["狮子座", new Date(1999, 6, 23, 0, 0, 0)])
  arr.push(["处女座", new Date(1999, 7, 23, 0, 0, 0)])
  arr.push(["天秤座", new Date(1999, 8, 23, 0, 0, 0)])
  arr.push(["天蝎座", new Date(1999, 9, 23, 0, 0, 0)])
  arr.push(["射手座", new Date(1999, 10, 22, 0, 0, 0)])
  arr.push(["魔羯座", new Date(1999, 11, 22, 0, 0, 0)])
  for (var i = arr.length - 1; i >= 0; i--) {
  if (d >= arr[i][1]) return arr[i][0];
  }
 }
 </script>
</head>
<body>
 <div id="div1" style="width:200px;height:200px;">
  <input type="text" id="Birthday" value="请输入你的生日!" />
  <input type="button" value="开始计算" />
 </div>
</body>
</html>

以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
jQuery 跨域访问问题解决方法
Dec 02 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
JS DOMReady事件的六种实现方法总结
Nov 23 #Javascript
domReady的实现案例
Nov 23 #Javascript
BootStrap按钮标签及基本样式
Nov 23 #Javascript
JavaScript仿百度图片浏览效果
Nov 23 #Javascript
Asp.Net之JS生成分页条的方法
Nov 23 #Javascript
javascript判断firebug是否开启的方法
Nov 23 #Javascript
JavaScript表单验证开发
Nov 23 #Javascript
You might like
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
DOM 高级编程
2015/05/06 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
bat和python批量重命名文件的实现代码
2016/05/19 Python
深入理解python对json的操作总结
2017/01/05 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python基础教程之while循环
2019/08/14 Python
Python netmiko模块的使用
2020/02/14 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
用canvas显示验证码的实现
2020/04/10 HTML / CSS
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
高三语文教学反思
2014/01/15 职场文书
环保建议书500字
2014/05/14 职场文书
品牌转让协议书
2014/08/20 职场文书