用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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
JavaScript 中的六种循环方法
Jan 06 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
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
python写的一个文本编辑器
2014/01/23 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
Java的基础面试题附答案
2016/01/10 面试题
商务考察邀请函范文
2014/01/21 职场文书
毕业生就业协议书
2014/04/11 职场文书
村委会换届选举方案
2014/05/03 职场文书
毕业横幅标语
2014/10/08 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
沈阳故宫导游词
2015/01/31 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle