用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 相关文章推荐
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
jquery中post方法用法实例
Oct 21 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
同时提取多条新闻中的文本一例
2006/10/09 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
python集合类型用法分析
2015/04/08 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
python3实现高效的端口扫描
2019/08/31 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
初一地理教学反思
2014/01/16 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL