js html css淘宝足迹日历效果,js实现简单的日历显示效果函数示例
本文实例讲述了js实现简单的日历显示效果函数。分享给大家供大家参考,具体如下:
用一个函数简单的实现一个月份的日历,效果如下:
这个日历效果有高亮显示,我实现的思维比较简单。
我把上面的日历效果用表格table生成,分成两个部分。
第一个部分:就是前面的第一排,我用一行
显示,这一部分表示的上个月份留下来的日期和这个月份的日期的混合日期;
第二部分:就是剩下的所有排,这里我用五行
显示,这一部分表示的是这个月份和下个月份的日期的混合日期。
这里为什么要用6行
来显示日历的效果呢?原因是有的月份跨越了6行,所以为了兼容所有的月份,只好用6行了。
下面是代码:
js的日历
table tr td {
width:27px;
text-align:center;
}
(function(){
//获取日历的函数,参数是年份year和月份Month,默认是今年当月的日历
function getcalendar(year,month){
year = year ? year : new Date().getFullYear();
//month是0开始到11结束的,获取当前月份必须加1
month = month ? month : new Date().getMonth()+1;
var last = new Date(year,month-1,0);
var lastdate = last.getDate();//获取上个月的最大日期
var lastday = last.getDay();//获取上个月最大日期的星期几
var months = new Date(year,month,0);
var Maxdate = months.getDate();//获取这个月最大的日期
//获取当前的日期,为的是高亮显示当前的日期
var today = new Date().getDate();
var thisyear = new Date().getFullYear();
var thismonth = new Date().getMonth()+1;
var str = '
\< | '+year+'年'+month+'月 | \> | ||||
日 | 一 | 二 | 三 | 四 | 五 | 六 |
---|
//获取上个月在这个月份中存在的最后日期
var remainlastdate = lastdate - lastday;
var t = 1;
str += '
';
for(var g=0;g<=6;g++){
//星期是从0开始到6结束的,小于等于上个月最大星期的日期则是上个月的日期
if(g <= lastday){
str +='
'+ remainlastdate++ +'';
}else{
//高亮显示当前日期
if(thisyear == year && thismonth == month && today == t){
str +='
'+ t++ +'';
//假如不是当前月份则默认1为高亮日期
}else if((thisyear != year && t == 1) || (thismonth != month && t == 1)){
str +='
'+ t++ +'';
}else{
//该月份的普通日期
str +='
'+ t++ +'';
}
}
}
str += '
';
//除去上面的部分,这个月从哪里开始
var remainlastday = 6 - lastday + 1;
var nextMonthday = 1;//下一个月份的开始日期
//这里i最大值为5是为了兼容所有的月份,有的月份可能跨越6个tr
for(var i=1;i<=5;i++){
str += '
';
for(var j=0;j<7;j++){
if(remainlastday <= Maxdate){
if(thisyear == year && thismonth == month && today == remainlastday){
str +='
'+ remainlastday++ +'';
}else{
if((thisyear != year && remainlastday == 1) || (thismonth != month && remainlastday == 1)){
//剩下的天数从这里开始的话,默认的第一天还是为红色
str +='
'+ remainlastday++ +'';
}else{
str +='
'+ remainlastday++ +'';
}
}
}else{
str +='
'+ nextMonthday++ +'';
}
}
str += '
';
}
str +='
';
return str;
}
return window.calendar=getcalendar;
})();
document.write(calendar(2018,1));
上面的函数简单的实现了日历,当然,要想让这个日历变得更强大,更有意思,你还得自己动手修改一下上面的函数。
有什么bug还望读者指出。
PS:这里再为大家推荐几款日历相关在线工具供大家参考:
希望本文所述对大家JavaScript程序设计有所帮助。
js html css淘宝足迹日历效果,js实现简单的日历显示效果函数示例相关推荐
- js html css淘宝足迹日历效果,JavaScript实现简单日历效果
本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下 实现效果: 根据所选择的年月,列出当月对应是周几,效果图如下: 实现思路: 1.使用select标签保存年 ...
- js实现天猫淘宝购物放大镜效果
前言 分享一个笔者写过的js实现天猫淘宝购物放大镜效果的例子 正文 代码如下: <!DOCTYPE html> <html><head><meta chars ...
- 淘宝网返回顶部JS代码效果
淘宝网返回顶部JS代码效果 http://hi.baidu.com/huangyongliang/blog/item/99f069cb0e731b12be09e619.html posted on 2 ...
- html+css淘宝静态网页
引言 暑假自学了HTML和CSS,找了个淘宝首页来验证自己的学习成果. 项目源码百度网盘链接:https://pan.baidu.com/s/1Lwoddqk6YwfjSa9W-P_f4g 提取码:f ...
- 3.用js实现关闭淘宝二维码
用js实现关闭淘宝二维码 css代码如下: <style> *{ margin:0 ; padding: 0; } .box{ border: 1px solid black; margi ...
- 案例:js实现关闭淘宝二维码
案例:js实现关闭淘宝二维码 先看效果演示: js实现过程: 第1步.获取页面元素 var x = document.getElementById('x');//id比较好用,因为id具有唯一性// ...
- 怎么删除淘宝足迹 淘宝足迹多久才能形成
有些小伙伴想查找以前的一些淘宝足迹,但是又不知道还能不能找得到,那么今天小编就来给大详细讲述淘宝足迹时间有多久?如何删除淘宝足迹?希望可以帮助到大家解决实际问题. 1.淘宝足迹时间有多久? 淘宝我的足 ...
- 【Auto.js脚本】淘宝618集喵币列车活动 自动浏览任务
[Auto.js脚本]淘宝618集喵币列车活动 自动浏览任务 附上使用方法: 1.打开Auto.js(该软件的相关用法就不细说了,无障碍,悬浮窗权限这些),右下角导入脚本 2.打开淘宝,进入活动页面, ...
- JavaScript仿淘宝京东放大镜效果(鼠标事件)------JavaScript学习之路10
JavaScript仿淘宝京东放大镜效果 注意 一定计算好放大比例,本程序放大5倍,具体放大倍数,自定 效果 完整源码 <!DOCTYPE html> <html lang=&quo ...
最新文章
- 【图像分类案例】(2) DenseNet 天气图片四分类(权重迁移学习),附Tensorflow完整代码
- C#开发Unity游戏教程之判断语句
- Python入门二(1)
- Java面试宝典之开源框架!
- Ubuntu LXC
- 从 ES 到 Kylin,斗鱼客户端性能分析平台进化之旅
- Linux 信号量 生产者消费者小例题
- AI和大数据结合,智能运维平台助力流利说提升核心竞争力
- java怎么跟qtp脚本传参数_QTP多个Action之间传递参数的方法详解
- python实现单链表快速排序升序linkedqueue_LeetCode 总结 - 搞定 Linked List 面试题
- 2014年电大计算机应用基础考,2017年电大计算机应用基础网考精彩试题与问题详解...
- linux下python脚本处理数据_在Linux中通过Python脚本访问mdb数据库的方法
- 部门角色权限rbac_直白的解说一下RBAC权限设计
- 细化-从百度识图效果对智能识图的一些思考2
- IntelliJ IDEA 之汉化包安装
- Java-如何防范CSRF攻击
- redis.exceptions.ResponseError: Command # 2 (HDEL select_6 1) of pipeline caused error: WRONGTYPE Op
- 华为HCNA之OSPF多区域配置实验
- 《超级演说家》刘媛媛:寒门贵子
- oracle大对象的存储,(16 ) Oracle数据库可以存储极大的对象,CLOB表示【16】大对象。...
热门文章
- I.MX6 Goodix GT9xx touchscreen driver porting
- IBM的“认知计算时代”
- 利用Powershell自动部署asp.net mvc网站项目 (一)
- 郭的好象在推销,实在内容很少.
- perl 字符串删除末尾几个字符_Perl字符串处理函数大全
- python r语言 作图_R语言低级绘图函数-rect
- 三电平igbt死区时间计算_IGBT基础与运用知识
- mysql 字段可以存数组吗_mysql怎么存数组
- 一加7充电_夜话丨一加7超级快充明天见
- USB接口供电蓝牙彩色灯带控制器