手把手教你用JavaScript实现类似Google日历的控件

js日历控件

60 浏览量更新于2024-09-02 收藏 43KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

资源详情

资源推荐

javascript实现日历控件实现日历控件(年月日关闭按钮年月日关闭按钮)

经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但

重要的是实现的过程

经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的

过程.

下面是要实现的下面是要实现的html结构结构:

</select></span></div><div id="biaoti"></div><div id="body"></div></div>

先说一下日历查询的算法:

w=y+parseInt(y/4)+parseInt(c/4)-2*c+parseInt(26*(m+1)/10)+d-1 ;

下面是详细的说明过程,有兴趣的可以去看下:

//www.jb51.net/article/32572.htm

以下是实现的以下是实现的javascript代码代码:

复制代码代码如下:

sx.activex.calender={

bind:function(target){

var a=document.createElement("div");

var head=document.createElement("div");

var biaoti=document.createElement("div");

var select=document.createElement("select");

var yface=document.createElement("span");

var mface=document.createElement("span");

var body=document.createElement("div");

var select1=document.createElement("select");

yface.appendChild(select);

mface.appendChild(select1);

head.appendChild(yface);

head.appendChild(mface);

a.appendChild(head);

a.appendChild(biaoti);

a.appendChild(body);

yface.insertBefore(document.createTextNode("年 "),yface.firstChild)

mface.insertBefore(document.createTextNode("月 "),mface.firstChild)

a.style.position="absolute";

biaoti.style.height="10%";

for(var i=0;i<7;i++){

var can=document.createElement("span")

can.style.width="14%";

can.style.height="100%";

can.style.textAlign="center";

biaoti.appendChild(can);

}

biaoti.all[0].innerText="日"

biaoti.all[1].innerText="一"

biaoti.all[2].innerText="二"

biaoti.all[3].innerText="三"

biaoti.all[4].innerText="四"

biaoti.all[5].innerText="五"

biaoti.all[6].innerText="六"

head.style.height="20%";

a.style.position="absolute";

a.style.height="200px";

a.style.width="302px";

a.style.border="1px red solid";

yface.style.width="50%";

yface.style.padding="5px";

yface.style.height="100%";

select.style.width="80%";

for(var i=1960;i<2010;i++){

var option=document.createElement("option");

option.text=i;

select.add(option);

}

mface.style.width="50%";

mface.style.padding="5px";

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38706603

粉丝: 10
资源: 923

手把手教你用JavaScript实现类似Google日历的控件

js 仅显示年月的时间选择控件

基于datepicker的年月日切换时间周期选择控件

可以选择年月日的时间控件

vue3 手撕日历控件

selenium 日历控件

datepick 同时 显示 两个 日历控件

selenium日历控件

javascript 使用ocx控件实现批量打印控件

javascript查找系统控件

模拟日历，每天打开这个页面都能定时显示年月日和星期几用JavaScript实现

年季度月周日控件html,基于bootstrap按年、季度、年月、年月日的日历插件(原创)...

应用JAVASCRIPT实现以下功能，通过点击按钮，点击按钮看结果，获取随机数。

javascript怎么查找系统控件

有一个按钮控件，且该按钮控件用来控制一整个页面的深浅色外观，当点击该按钮控件时图标变为太阳图标，再按一次时图标变为月亮图标。（利用 HTML CSS JavaScript）

SpringBoot+vue+elementUI如何用JavaScript实现模拟鼠标点击事件来实现点击按钮一次实现点击按钮两次

用HTML css JavaScript如何实现一个日历

js日历选择只显示年月选项

年季度月周日控件htmlhejavascript,基于element UI按年、季度、年月、年月日的日历插件给一个完整案例

最新资源

datepick 同时显示两个日历控件