用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 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
详解vue的diff算法原理
May 20 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
通过js随机函数Math.random实现乱序
May 19 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
Terran建筑一览
2020/03/14 星际争霸
简单的JS多重继承示例
2008/03/13 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
javascript折半查找详解
2015/01/26 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
js中的面向对象入门
2017/03/06 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
jQuery实现滑动开关效果
2020/08/02 jQuery
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
Python functools模块学习总结
2015/05/09 Python
Python功能键的读取方法
2015/05/28 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
python elasticsearch环境搭建详解
2019/09/02 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
中专生自我鉴定
2013/12/17 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
电子专业求职信
2014/06/19 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
python 远程执行命令的详细代码
2022/02/15 Python
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库