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 相关文章推荐
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
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数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
php处理带有中文URL的方法
2016/07/11 PHP
javascript处理table表格的代码
2010/12/06 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Python判断两个对象相等的原理
2017/12/12 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
python包的导入方式总结
2021/03/02 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
实用求职信模板范文
2019/05/13 职场文书