用html与js实现简单日历,纯JS实现简单的日历
本文实例为大家分享了纯JS实现日历的具体代码,供大家参考,具体内容如下
封装代码:
(function(cmf){
cmf.showDcalendar=function(){
var fnname=cmf.fn
var id="cmfrili2"
var yy=f23timeselecta1.value,mm=f23timeselecta2.value-1
var newdara=new Date()
var dd=newdara.getDate();
var d=new Date(yy,mm,1),t
if(mm==0){mm=12;yy--}
var a,b,c,d2
t='
var ds='日,一,二,三,四,五,六'.split(",")
for(x=0;x<7;x++)t+='
'+ds[x]+''
t+='
'
//计算显示上个月有几号在日历上
a=d.getDay()
if(a==0)a=7
r=[]
var c2=0
for(var x=0;x
{
d2=new Date(d-24*3600*1000*(a-x))
r[r.length]="1"+d2.getDate()
c2++
}
//计算显示这个月有几号在日历上
mm++
if(mm==13){mm=1;yy++}
c=cmf.getMonthM(yy,mm)//计算哪年哪月 有多少天
d=new Date(yy,mm,1)
for(var x=1;x<=c;x++)r[r.length]="2"+x
//计算显示下个月有几号在日历上
c2+=c//r数组有多少个
d2=new Date(yy,mm-1,c)
a=d2.getDay()//这个月最后一天星期几
a=7-a
if(c2<36)a+=7
for(var x=1;x
'
document.getElementById(id).innerHTML=t
}
cmf.getMonthM=function(y,m){//计算哪年哪月 有多少天 月份从1开始
if(m==4 || m==6 || m==9 || m==11)return 30
if(m==2)return (y%4==0 && y%100!=0)|| y%400==0?29:28
return 31
}
cmf.showd=function(id,fn){
cmf.fn=fn
var g='
var newdara=new Date()
var yy=newdara.getFullYear();
var mm=newdara.getMonth()+1;
document.getElementById(id).innerHTML=g
var s='border-width:1px;border-style:solid;border-color:#000000 #cccccc #cccccc #000000;width: 44px;'
var t=''
+'
'
+cmf.timeselect_ms(1,'年') +' |
'
+cmf.timeselect_ms(2,'月') +' |
document.getElementById("cmfrili1").innerHTML=t
cmf.showDcalendar()
}
cmf.timeselect_ms=function(n,m,n2)
{
var t='
t+='
◄'
if(m!=null)t+='
'+m+''
t+='
►'
if(n2!=null)t+='
'+n2+''
t+='
'
return t
}
cmf.timeselect_up=function(n,m){
var o=document.getElementById("f23timeselecta"+n),c=o.value
if(c=="")c=1
if(n==1)//年
{
if(m==2){//减
c--
}else if(m==1){//加
c++
}
}
else
{
if(m==2){//减
if(c<2) return
c--
}else if(m==1){//加
if(c==12) return
c++
}
}
o.value=c
if(m==1 || m==2)cmf.showDcalendar()
}
})(window.cmf={})
使用:
日历
cmf.showd('ri','dianji')
function dianji(d,ti){
$("#ri td").css('border','')
$(ti).css('border','1px solid #aa0000')
alert(d)
}
使用代码中dianji()函数是用户点击某天弹出某天的日期;效果如下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
用html与js实现简单日历,纯JS实现简单的日历相关推荐
- html js 循环提示框,纯js超酷消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...
- js ajax局部替换,纯JS实现AJAX局部刷新功能
AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 J ...
- 简单的纯JS小游戏--消灭星星
先看看效果图: 因为CSDN图片大小的限制,所以只截了部分区域 先准备css和一张星星图片,很简单,body背景设为黑色. <style>body {background-color: b ...
- js html css淘宝足迹日历效果,js实现简单的日历显示效果函数示例
本文实例讲述了js实现简单的日历显示效果函数.分享给大家供大家参考,具体如下: 用一个函数简单的实现一个月份的日历,效果如下: 这个日历效果有高亮显示,我实现的思维比较简单. 我把上面的日历效果用表格 ...
- 日历签到html,简单的手机移动端日历签到js代码
特效详情: 一款简单的手机移动端日历签到js代码,挺不错的手机签到页面,可自定义已签到日期,连续几天签到代码. js代码 var isSign = false; var myday = new Arr ...
- 纯JS+CSS手写日历
介绍 今天带来一个纯JS+css手写的日历, 一开始先显示当前日期,比如下方25日就是当前日期会有较深蓝色背景色,鼠标指着的日期是下方图片14日的淡蓝色背景色 上面显示日期,可左右选择上个月或者下个月 ...
- html5网页怎么实现内容追加,纯js实现网页内容复制后自动追加自定义内容
网页操作内容复制内容后纯js实现监听自动追加自定义内容 不少网站技术或者博客上有这样的处理,当我们复制代码的时候,会自动加上一段本信息版权为XXXX,这是怎么实现的呢? 其实实现的方式很简单,可以在我 ...
- JSF2.0与纯JS框架
2019独角兽企业重金招聘Python工程师标准>>> 用了JSF一段时间了,也写了几个组件了,对这个框架多少有了一些了解.另外我也用过EXT这样的纯JS的组件系统,因此我想对比一下 ...
- 纯js实现html转pdf
项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式. 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf. 咋不上天呢-- 查 ...
- js纯ajax,自动完成JS类(纯JS, Ajax模式)
自动完成JS类(纯JS, Ajax模式) 更新时间:2009年03月12日 23:51:15 作者: 自动完成JS类,用户体验较好.封装成类,方便使用.本站 一. 封装的JS文件 //****** ...
最新文章
- 5个有趣的Python小知识,返回结果让人出乎意料~
- MYSQL性能调优及架构设计学习笔记-基础篇MYSQL架构组成
- mysql常用的hint
- mysql中engine=innodb和engine=myisam的区别
- 国家开放大学2021春1171科学与技术题目
- Knative 健康检查机制分析
- 内网穿透工具_utools让你3步搭建一个内网穿透工具
- SharePoint 常用操作杂谈
- 【Oracle】权限
- android之monkey测试
- 「深度」物料成本不到1500的iPhone6s凭什么5288元起售?
- python-excel 批量新建excel工作表
- 雅虎34条军规(网页优化)
- android httpclient gradle,Apache HttpClient Android (Gradle)
- Oracle彻底卸载干净教程
- Cesium 编辑空间测量功能,任意修改
- Java字符串基础语法
- 【习题5】用Python完成新建文档写古诗+复制
- 源支付3.1版本全开源版+店员监控软件+手机监控APP源码
- 前端图像处理之马赛克
热门文章
- 人到中年,没事多休息,有空多赚钱!
- python cli_测试Python命令行(CLI)应用程序的4种技术
- JS实现网页打印功能
- 天眼查、企查查APP的Authorized值和sign值破解思路记载
- HDU 3954 Level up 2011 Alibaba Programming Contest 线段树
- 从数据库导出数据到EXCEL换行的问题解决方法(即数据库字段太长自动换行)
- 色彩搭配 — 总结1
- 法国科学家大脑计算机,最新发现:人类大脑的“人性基因”正加速进化
- 计算机科学与技术的培养方案,计算机科学与技术专业培养方案2017版.PDF
- 5款伊思儷超媒體繁体游戏 中文简体补丁