用jquery写的一个万年历(自写)


Posted in Javascript onJanuary 20, 2014
<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml> 
<head> 
<meta http-equiv=Content-Type content="text/html;charset=utf-8"> 
<style> 
.main{ 
width:600px; 
height:350px; 
background:gray; 
margin-left: auto; 
margin-right: auto; 
overflow:hidden; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
} 
.title{ 
text-align:center; 
} 
.date{ 
float:left; 
padding-left:31px; 
} 
.date1{ 
float:left; 
width:20px; 
height:20px; 
padding-top:10px; 
padding-left:30px; 
padding-right:30px; 
} 
.content{ 
margin-left:25px; 
} 
</style> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script> 
function getTime(year,month,day){ 
y = year 
m = month 
d = day 
var myDate = new Date(year,month-1,day); 
return myDate; 
} 
function days_in_month(year, month) { 
y = year; 
m = month; 
return 32 - new Date(y, m - 1, 32).getDate(); 
} 
function view(year,month){ var w = getTime(year,month,1).getDay()-1; 
var num = days_in_month(year,month); 
var index = 1; 
//console.log(w); 
var data = new Array(); 
for(var d = 0; d < num+w; d++){ 
if(d<w){ 
data[d] = ''; 
}else{ 
data[d] = index; 
index++; 
} 
} 
$("#content").html(''); 
for(var k =0;k < data.length;k++){ 
if(k%7==0){ 
$("#content").append("<div id='t"+k+"' class='date1'>"+data[k]+"</div><br>"); 
}else{ 
$("#content").append("<div id='t"+k+"' class='date1'>"+data[k]+"</div>"); 
} 
} 
$("#content > div").mouseover(function(){ 
if($(this).text()!=''){ 
$(this).css('background','red'); 
} 
}); 
$("#content > div").mouseout(function(){ 
if($(this).text()!=''){ 
$(this).css('background','gray'); 
} 
}); 
} 
$(document).ready(function (){ 
for(var t = 1970; t < 2999; t++){ 
$("#yearsel").append("<option value ='"+t+"'>"+t+"</option>"); 
} 
for(var y = 1; y < 13;y++){ 
$("#monthsel").append("<option value ='"+y+"'>"+y+"</option>"); 
} 
var year = new Date().getFullYear(); 
var month = new Date().getMonth()+1; 
var day = new Date().getDate(); 
var w = getTime(year,month,1).getDay()-1; 
var num = day + w -1; 
$("#yearsel").change(function(){ 
year = $("#yearsel option:selected").text(); 
month = $("#monthsel option:selected").text(); 
view(year,month); 
}); 
$("#monthsel").change(function(){ 
year = $("#yearsel option:selected").text(); 
month = $("#monthsel option:selected").text(); 
view(year,month); 
}); 
var oDate = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日',]; 
for(var i = 0;i < 7;i++){ 
$("#title").append("<div class='date'><b>"+oDate[i]+"</b></div>"); 
} 
$("#yearsel option[value='"+year+"']").attr("selected", true); 
view(year,month); 
//标记当前日期 
$("#t"+num).css('background','yellow'); 
}); 
</script> 
</head> 
<body> 
<div id="main" class="main"> 
<center><h3>万年历</h3></center> 
<select id="yearsel"> 
</select>年 
<select id="monthsel"> 
</select>月<br><br> 
<div id="title" class="title"> 
</div> 
<div id="content" class="content"> 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
javascript 快速排序函数代码
May 30 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
js控制input框只读实现示例
Jan 20 #Javascript
js给页面加style无效果的解决方法
Jan 20 #Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 #Javascript
js报$ is not a function 的问题的解决方法
Jan 20 #Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 #Javascript
文本框文本自动补全效果示例分享
Jan 19 #Javascript
不使用jquery实现js打字效果示例分享
Jan 19 #Javascript
You might like
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
angularJS 入门基础
2015/02/09 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
如何编写jquery插件
2017/03/29 jQuery
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
24式加速你的Python(小结)
2019/06/13 Python
python绘制多个子图的实例
2019/07/07 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
专营店会计助理岗位职责
2013/11/29 职场文书
高中自我评价分享
2013/12/05 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
初中同学聚会感言
2014/02/11 职场文书
新兵入伍心得体会
2014/09/04 职场文书
工作检讨书大全
2015/01/26 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书