html怎么制作万年历,js+html制作简单日历的方法
新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑
代码:
无标题文档
* {margin: 0;padding: 0}
#calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative}
#calendar h4 {text-align: center;margin-bottom: 10px}
#calendar .a1 {position: absolute;top: 20px;left: 20px;}
#calendar .a2 {position: absolute;top: 20px;right: 20px;}
#calendar .week {height: 30px;line-height: 20px;border-bottom: 1px solid #000;margin-bottom: 10px}
#calendar .week li {float: left;width: 30px;height: 30px;text-align: center;list-style: none;}
#calendar .dateList {overflow: hidden;clear: both}
#calendar .dateList li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;list-style: none;}
#calendar .dateList .ccc {color: #ccc;}
#calendar .dateList .red {background: #F90;color: #fff;}
#calendar .dateList .sun {color: #f00;}
$(function() {
//必要的数据
//今天的年 月 日 ;本月的总天数;本月第一天是周几???
var iNow=0;
function run(n) {
var oDate = new Date(); //定义时间
oDate.setMonth(oDate.getMonth()+n);//设置月份
var year = oDate.getFullYear(); //年
var month = oDate.getMonth(); //月
var today = oDate.getDate(); //日
//计算本月有多少天
var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
//判断闰年
if(month == 1) {
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
allDay = 29;
}
}
//判断本月第一天是星期几
oDate.setDate(1); //时间调整到本月第一天
var week = oDate.getDay(); //读取本月第一天是星期几
//console.log(week);
$(".dateList").empty();//每次清空
//插入空白
for(var i = 0; i < week; i++) {
$(".dateList").append("
");
}
//日期插入到dateList
for(var i = 1; i <= allDay; i++) {
$(".dateList").append("
" + i + "")
}
//标记颜色=====================
$(".dateList li").each(function(i, elm){
//console.log(index,elm);
var val = $(this).text();
//console.log(val);
if (n==0) {
if(val
$(this).addClass('ccc')
}else if(val==today){
$(this).addClass('red')
}else if(i%7==0 || i%7==6 ){
$(this).addClass('sun')
}
}else if(n<0){
$(this).addClass('ccc')
}else if(i%7==0 || i%7==6 ){
$(this).addClass('sun')
}
});
//定义标题日期
$("#calendar h4").text(year + "年" + (month + 1) + "月");
};
run(0);
$(".a1").click(function(){
iNow--;
run(iNow);
});
$(".a2").click(function(){
iNow++;
run(iNow);
})
});
2013年10月
上月
下月
- 日
- 一
- 二
- 三
- 四
- 五
- 六
更多精彩内容请点击专题《javascript日历插件使用方法汇总》进行学习
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html怎么制作万年历,js+html制作简单日历的方法相关推荐
- html日历页面节假日_js+html制作简单日历的方法
这篇文章主要为大家详细介绍了js html制作简单日历的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑 ...
- php中文网 日历,PHP简单日历实现方法
这篇文章主要介绍了PHP简单日历实现方法,涉及php日期与时间的相关运算操作,非常简单实用,需要的朋友可以参考下 运行效果截图如下: 具体代码如下:<?php /* * Created on 2 ...
- html css制作五子棋,js实现带简单Ai的网页五子棋制作(UI篇)
前言: 最近学了html,css,js,想找个项目来练习一下,就做了一个简单的网页五子棋,主要用到了canvas画图,逻辑部分都是js来写的,很简单,在这里简单的记录一下开发流程. 创建棋盘: 用ca ...
- oracle 制作日历表,oracle 用sql生成日历的方法
BI分析中,经常需要将事实表与时间维度表关联起来,按年/月/日来逐层展示,常用的做法是创建一张日历表,结构类似如下: create table T_BAS_CALENDAR ( d_year NUM ...
- HTML / CSS / JS 编程入门 —— 使用 Lightly 制作可切换主题的简单网页
HTML.CSS 和 JavaScript 是前端编程密不可分的三大语言,我们一般看到的网页都由这三种语言组合编程而成.这三者之间究竟有什么样的关系?他们又是通过什么样的软件编成的呢? 目录 1. H ...
- js 万年历农历转阳历 方法_利用JS制作万年历的方法
本篇文章主要介绍了利用JS制作万年历的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用JS来实现在网 ...
- 用 node.js 来制作数据可视化视频吧
TNTWeb - 全称腾讯新闻前端团队,组内小伙伴在 Web 前端.NodeJS 开发.UI 设计.移动 APP 等大前端领域都有所实践和积累. 目前团队主要支持腾讯新闻各业务的前端开发,业务开发之余 ...
- city如何使用 mega unity_制作思路和CityEngine的简单使用
最近什么都不想干,就总结一下之前做过的一些东西.首先是建立一个虚拟城市,目前这个城市还在建造中,主要是用于自己的之后的动画和开放世界游戏制作,下面说以下自己之前的思路. 说起城市建模,可以说是哗的一下 ...
- 甘特图制作_使用excel制作甘特图其实很简单,仅需4步搞定,项目进度一目了然...
Hello,今天跟大家分享下如何在excel中制作甘特图.甘特图能直观的表现出任务的进度,以及各个项目之间的关联性 如果说你的项目众多,可以使用更专业的Project来制作甘特图,使用Project制 ...
最新文章
- rhel6Inode详解
- 个人做asp.net时犯过的错或是一点心得什么的(我就经常的更新一下吧)
- python 修改文件名_Python 批量修改文件名
- SAP Cloud for Customer里新的Lead UI对Mashup集成的支持原理
- [pytorch、学习] - 3.13 丢弃法
- Java 11新字符串方法的基准
- Spring再次涵盖了您:继续进行消费者驱动的消息传递合同测试
- (十八)深入浅出TCPIP之epoll的一些思考
- Create groups 与 Create folder references的区别
- Cortex-M3学习笔记(一)
- 框架中的Blob数据的定义
- 邵阳市计算机学校2021,邵阳市计算机中等专业学校在2021年邵阳市中等职业学校班主任基本功比赛中荣获市一等奖...
- java布尔值_Java中的布尔值与布尔值
- 深度学习花书-2.9 伪逆矩阵
- 中标麒麟linux系统安装打印机_国产操作系统中标麒麟系统安装教程
- 计算机教室消防说明,6.7 消防专用电话的设置
- iis6 增加PHP+MYSQL等时,记得 PHP目录要给EVERYONE权限
- BERT模型--transflow转为pytorch
- 如何关闭windows电脑里的休眠
- ubuntu linux编译环境搭建,Ubuntu14.04开发环境搭建