JavaScript做的一个日历

小米手机上的日历看着不错,就用javascript试着做了一下,如图:

核心内容就是三个部分,公历部分--->script.js,农历部分--->lunar.js,天气部分--->weather.js,尽管日历上加个天气好像看起来不那么恰当,但本来就是练习,就顺便写了。

script.js主要在表格上填写日期信息以及绑定一些事件处理程序,基本上就是一个calendar对象,具体过程就是先得到当天的星期和本月的天数,这样当月的公历日期信息就完整了,而上月和下月的公历信息也跟着出来了。

lunar.js以公历的年月日信息为输入参数,计算出对应的农历日期,关于农历日期的计算,参照的是网上的查表法,表中包含了1900-2049这50年的信息,具体就是先计算出当天距离农历1900.1.1这天的总天数,然后再根据这个数推算出当天的农历日期

weather.js用来获取天气信息,数据来源是中国天气网的接口,这些接口有返回json数据的,也有返回xml数据的,需要用Ajax获取资源再进行解析,但是由于浏览器的同源策略ajax不能跨域,所以就用了getWeather.php来获取json数据,此外查询天气需要对应的城市代码,这个天气网上也有数据,写了一个python文件把这些城市代码给抓取了下来。

具体源代码在这里:https://github.com/ckzhou/MIUI-Calendar

时间: 2024-09-30 14:49:19

JavaScript做的一个日历的相关文章

javascript做的一个根据table中某个td的值为日期时的倒计时

JavaScript代码: <script> window.onload = window.onload = function () { getTdValue(); } //根据传过来的天数(day)和日期(datatime),返回在传入日期上加上天数后的日期.如:day=2.datatime=2018/3/7 11:28:09,那么返回的日期就是2018/3/9 11:28:09 function showTime(day, datatime) { var dayTime = day * 2

做了一个密码强度输入测试

<!doctype html> <html> <head> <meta charset="utf-8"> <title>密码强度输入测试</title> <style type="text/css"> .cont { margin-left:300px; margin-top:50px; border:solid 1px #ccc; width:520px; padding:20px

JavaScript做定时器

2015-03-28 18:08:52 通过JavaScript做定时器有两种方法: 第一种为不循环定时器:只出现一次,通过window.setTimeout('function_name();',timeout);方法 timeout为毫秒数,意为过timeout后,执行function_name();函数,window可省 <script language='javascript'> //定义一个函数,显示你好信息,要求该函数在页面加载5秒后被调用 function getHello(){

用javascript做一款属于自己的播放器

用js可以做播放器?你没有看错,javascript结合html5是完全可以实现一款个性化的视频播放器的.在项目早些时候 我们是通过phoneGap提供的插件实现的视频播放,但是有一个问题,我们的项目是一个单页应用,翻页的时候,实际 上是用translateX的位移模拟手机上的滑动翻页效果的,而用phoneGap提供的视频播放器,它的层级是我们的前端代码 无法控制的,也就是说,页面滑动的时候,视频没有跟着一起动,感觉就是脱离了页面.后来我们大胆的采用html5的video 来实现播放.因为vid

使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果

360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打造一个超酷的全景幻灯实现,相信大家一定会喜欢的! 在这个教程中没有使用到任何插件,我们将使用HTML,css和javascript来实现,当然,也使用是jQuery这个框架! 如何实现? 我们将使用预先按照360生成的图片进行轮播来实现动画展示效果.包含了180个图片.所以加载时间可能比较长. 代码实现 我们将在css代

自定义的一个日历Calender

产品要做签到功能,签到功能要基于一个日历来进行,所以就根据 要求自定义了一个日历 自定义控件相信做android都知道: (1)首先创建一个类,继承一个容器类或者是一个控件 (2)然后就是你需要设置的属性等的,在attrs文件夹中 (3)然后就是在类里边进行属性的设置以及布局等等功能的添加 其实自定义一个日历问题都不多,很多人都会想到通过一个gridView然后填充就可以,确实是这样,主要是在显示每个月的第一天的位置以及每个月显示多少天有点绕. 思路:通过判断当前星期几然后进行日历的填充,但是填

y combinator 做的一个调查_可以学习一下

RoR: 在网络营运平台企业中,RoR站稳使用率第一的位置.其用户包括:ZenPayroll (人力资源).Asile50 (零售平台).BackerKit (众筹平台).Rainforest (QA测试)等. Ruby on Rails是一种结合Ruby语言与Rails平台的一种网页编程语言,Ruby语言以自然.简洁.快速著称,全面支持面向对象程序设计,而Rails则是Ruby广泛应用方式之一,在Rails平台上设计出一套独特的MVC开发架构,采取模型(Model).外观(View).控制器(

JavaScript写的一个带AI的井字棋

最近有一门课结束了,需要做一个井字棋的游戏,我用JavaScript写了一个.首先界面应该问题不大,用html稍微写一下就可以.主要是人机对弈时的ai算法,如何使电脑方聪明起来,是值得思考一下的.开始游戏后,由玩家先行.那么站在计算机的角度,可以对多种情况进行分析,并按照重要程度赋予权值.情况如下: 1.同一排(行.列.对角线)有且只有两个棋子,并且都是自己的,只要再进一步就能获胜,那么剩下的那个位置权值最高,优先级最大.赋予一级权值. 2.同一排(行.列.对角线)有且只有两个棋子,并且都是对方

最近做了一个Spring Boot小项目,大家帮忙找找bug吧, http://www.dbeetle.cn

最近做了一个Spring Boot小项目,网站顶部有源码地址,欢迎大家访问 http://www.dbeetle.cn 欢迎各位访问,提出意见,找找bug 网站说明 甲壳虫社区(Beetle Community) 一个开源的问答社区.论坛博客,您可以提出自己的问题.发布自己的文章.和其他用户交流 目前功能有第三方登陆.查看.发布.评论.消息通知.顶置.一键已读.搜索等 后续会不断更新完善,欢迎大家提供更好的建议 使用技术 Spring Boot.Mybatis.Thymeleaf.BootStr