万年历 html 代码,用javascript 实现的万年历代码。
*{ margin:0px; padding:0px;}
#dateBody{width:300px; padding:10px; background:#CCC;}
.weekday{ width:40px; height:40px; background:#999; line-height:30px; margin:1px; text-align:center; margin-top:2px; vertical-align:middle;float:left;}
.day{ width:40px; height:40px; background:#999; line-height:40px; margin:1px; text-align:center;float:left;}
.days{ width:40px; height:40px; background:#999; line-height:40px; margin:1px; text-align:center;float:left;}
#thisDay{width:40px; height:40px; background:#093;line-height:40px; margin:1px; text-align:center;float:left;}
#setDate{ width:320px; height:40px; background:#999; vertical-align:middle; line-height:40px; font-size:16px; font-weight:600; text-align:center;}
#borthTextAre{ width:320px; height:20px; background:#96F;}
选择年份: 选择月份:
function $(id)
{
return document.getElementById(id);
}
var nowDay = new Date();
var year=parseInt(nowDay.getFullYear());
var month=parseInt(nowDay.getMonth());
builtSetYearAndMonth(100);
//显示该年该月的日历
function makeDays(year,month)
{
var firstDay = new Date(year,month,1);
//获得每月的前面空余的天数
var firstDayBefore = parseInt(firstDay.getDay());
//显示每月前面空余的天数
for(var i= 0;i
{
dayobj = document.createElement("div");
dayobj.className="day";
$("days").appendChild(dayobj);
}
//显示每月的天数
for(var i=1;i<=getDayCountByYearAndMonth(year,month);i++)
{
dayobj = document.createElement("div");
dayobj.className="day";
dayobj.name=year+"-"+(parseInt(month)+1)+"-"+i;
$("days").appendChild(dayobj);
dayobj.innerHTML = i;
//设置当天的样式
if(nowDay.getFullYear()==year && nowDay.getMonth()==month && nowDay.getDate()==i)
{
dayobj.id="thisDay";
}
dayobj.οnmοuseοver= function(){
this.style.backgroundColor="#690";
}
dayobj.οnmοuseοut= function(){
this.style.backgroundColor="#999";
}
dayobj.οnclick= function(){
//$("borthTextAre").value=this.name;
//$("borthTextAre").innerHTML = $("borthTextAre").value;
//$("borthTextAre").innerHTML="你的生日:"+this.name;
$("borthText").value = this.name;
}
}
}
//计算该年该月的天数
function getDayCountByYearAndMonth(year,month)
{
month++;
if(month==4 || month==6 || month==7 || month==9 || month==11)
return 30;
if(month==2)
{
if(((year%4==0)&&(year%100!=0)) || (year%400 == 0))
return 28;
return 29;
}
return 31;
}
//初始化年月选择器
function builtSetYearAndMonth(yearNum)
{
for(var i=-yearNum; i
yearObj = document.createElement("option");
yearObj.innerHTML =parseInt(nowDay.getFullYear())+i;
yearObj.value =parseInt(nowDay.getFullYear())+i;
$("setYear").appendChild(yearObj);
}
for(var i=0;i<12;i++)
{
monthObj = document.createElement("option");
monthObj.innerHTML=i+1;
monthObj.value =i;
$("setMonth").appendChild(monthObj);
}
$("setYear").selectedIndex = yearNum;
$("setMonth").selectedIndex = parseInt(nowDay.getMonth());
makeDays(parseInt(year),parseInt(month));
}
function chose(ele)
{
if(ele.id == "setYear"){
year = ele.value;
}
if(ele.id == "setMonth"){
month = ele.value;
}
$("days").innerHTML="";
makeDays(year,month);
}
万年历 html 代码,用javascript 实现的万年历代码。相关推荐
- (万年历一)JAVA在控制台输出万年历(1900年起)
用Java实现在控制台输出指定年月的日历 纯算法写太麻烦?Calender对象写可香了: (万年历二)JAVA在控制台输出万年历(Calendar版) 控制台打印太难看?已更新js控制页面的啦版: ( ...
- C#代码与javaScript函数的相互调用
C#代码与javaScript函数的相互调用 问: 1.如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量? 3.如何在C#中访问JavaScript的已有变量? 4 ...
- java ajax翻页_分页 工具类 前后台代码 Java JavaScript (ajax) 实现 讲解
[博客园cnblogs笔者m-yb原创, 转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] htt ...
- 用Javascript代码实现浏览器菜单命令(以下代码在 Windows XP下的浏览器中调试通过
每当我们看到别人网页上的打开.打印.前进.另存为.后退.关闭本窗口.禁用右键等实现浏览器命令的链接,而自己苦于不能实现时,是不是感到很遗憾?是不是也想实现?如果能在网页上能实现浏览器的命令,将是多么有 ...
- 非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 成品显示,可左右切换月份 ...
- .net中C#代码与javaScript函数的相互调用问题
.net中C#代码与javaScript函数的相互调用问题. 问: 1.如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量? 3.如何在C#中访问JavaScript ...
- 如何通过Chrome中的代码设置JavaScript断点?
我想强制Chrome调试器通过代码或使用某种注释标签(例如console.break()在一行上中断. #1楼 您可以使用debugger; 在您的代码中. 如果开发者控制台已打开,则执行将中断. 它 ...
- 代码流程图_助力理解js代码,进阶JavaScript代码能力——js2flowchart
引言 js2flowchart 是一个可视化库,可将任何JavaScript代码转换为漂亮的SVG流程图.你可以轻松地利用它学习其他代码.设计你的代码.重构代码.解释代码.这样一个强大的神器,真的值得 ...
- c语言编写万年历课程设计,用C语言编写万年历 C课程设计.pdf
用C语言编写万年历 C课程设计 用用 C++语言编写万年历语言编写万年历 用用 语言编写万年历语言编写万年历 学生姓名:学生姓名: 指导老师:指导老师: 学生姓名学生姓名:: 指导老师指导老师:: 摘 ...
- HTML5七夕情人节表白网页(抖音-流动爱心表白)HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 爱心表白网页
HTML5七夕情人节表白网页❤抖音-流动爱心表白❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 爱心表白网页 这是程序员表白 ...
最新文章
- 霍夫直线检测python_opencv+python 霍夫直线检测
- Hadoop之mapreduce 实例三
- azkaban 与 java任务_Azkaban的任务类型分析35:JavaProcessJob的执行
- ssh: connect to host localhost port 22: Connection refused 问题
- 《快速软件开发——有效控制与完成进度计划》
- 程序人生:织梦dedecms后台/会员验证码关闭
- springboot 整合 mongodb实现 批量更新数据
- servlet--百度百科
- android Fragments (Android官方文档中文版)
- oracle pl/sql发送邮件多个收件人问题
- 用Python实现一个动物识别专家系统--人工智能
- 入门学习必收藏!精选Photoshop、D…
- uni-app 实现记住账号密码功能
- linux spool目录 删除,Linux知识:/var/spool/clientmqueue 下垃圾文件删除
- C语言入门——自我介绍
- 制作ubuntu光盘启动盘
- ubuntu新建python代码文件_ubuntu 下python的配置及更新方法和具体使用
- mind+自定义arduino库,实现简易RFID智能家居系统
- 证明ABC猜想:意义重大,却无人能识?
- 离散信号(一) | 信号的采样和恢复+时域、频域采样定理
热门文章
- 前端需要学python吗_python是前端语言吗
- BrcmPatchRAM 黑苹果WiFi无线网卡蓝牙驱动
- linux rz 安装包,Linux系统手动安装rz sz 软件包
- 2G到5G系统的横向比较(1)多址方式与调制方式
- 物流前沿理论与方法1
- plsql 查看表空间使用情况
- gaussian09使用教程linux,Gaussian 09 GaussView5.0使用教程.ppt
- vs中怎么去链接一个库文件(ws2_32.lib)
- html制作个人简历网页
- android反编译工具推荐,Android 反编译工具的各种用法