【网页特效-时间特效】一个使你自己可以动手创建的日历本,可是很有
手工日历的制作流程

手工日历的制作流程
先来说说准备工作哈,你得有纸,各种各样的纸,厚的薄的,彩色的白色的,我记得我刚开始弄的时候,啥纸都分不清,闹了不少笑话!还有笔,彩笔、马克笔啥的,越多越好。
对了,还有剪刀、胶水,这可不能少!
说到这,我想起有一次我做日历,胶水买错了,粘啥都粘不住,唉,那叫
一个郁闷!
然后呢,咱们得设计一下日历的样式。
你是喜欢横版的还是竖版的?是简
约风还是花哨风?我跟你说,我刚开始就喜欢那种花里胡哨的,觉得好看,结
果做出来眼花缭乱的,自己都看不下去,哈哈!
接下来就是画格子啦,这可是个细致活儿。
每个月的天数可不一样,你得
算清楚喽,不然就闹笑话啦!我记得好像有一次,我把二月画多了好几天,被
朋友好一顿笑话,嗯... 画格子的时候,要尽量画得整齐,不然歪歪扭扭的可不好看。
再然后就是写字啦,把月份、日期、星期啥的都写上。
这时候你的字可得
写好看点,不然整个日历就掉价啦!我就因为字丑,被我家孩子吐槽过,哼!
对了,你还可以在日历上加点装饰,比如贴点小花、小动物啥的。
有一回
我贴了个小兔子,结果贴歪了,那感觉,别提多别扭了!
哦,差点忘了,你还可以在每个月的页面上写点小提示,比如生日、纪念
日啥的。
我就经常这么干,感觉特别贴心。
我这说得有点乱,你可别嫌弃哈!反正做手工日历就是要有耐心,别着急。
要是中间出错了,也别怕,改过来就行。
想当初我也是做了好多失败品,才慢
慢摸到门道的。
我跟你说,如果时间充裕,你还可以尝试用不同的材料,像布料啥的,说
不定会有惊喜哦!
怎么样,朋友,准备好动手试试了吗?要是有啥问题,随时来问我哈!。
DIY日历

展示自己的作品
评价
修改
保存
小结本节课的学习收获
作
业
设
计
板
书
设
计
教
后
感
想
内容
第3课DIY日历桌面
施教时间
教学目标
1、了解日历制作的一般过程及“光影魔术手”的基本功能。
2、通过“光影魔术手”软件的使用,体会学习使用新软件的方法。
3、在制作日历图片及设置桌面背景的过程中,进一步提高图片处理的方法及桌面背景的设置技巧。
重点
利用“光影魔术手”制作日历。
难点
制作出有“创意”的作品。
教学准备
预设教学流程
二次备课
教师活动
学生活动
一、创设情境,激发兴趣。
1.出示一组精美的日历,激发学生的兴趣。一份精美的日历已成为书记的必备之物。如果DIY日历,并设为计算机桌面,那将是一件充满个性又实用的创作!
2.布置任务:DIY当月的一张日历,并设置为计算机桌面。
二、DIYபைடு நூலகம்历。
1.DIY日历的软件很多,可以用一般的图像处理软件,也可以用专门制作日历的小软件,
尝试自己制作一份日历
将制作好的日历设置成桌面背景。
预设教学流程
二次备课
教师活动
学生活动
四、展示、交流、评价。
开展“日历桌面DIY大比拼”活动,让学生介绍自己作品的设计意图和成功之处,其他学生进行评价补充和提出建议,教师再从创意、美观、技术等角度适当加以引导,让学生进一步完善自己的作品。
五、课堂小结。
如“光影魔术手”。
2.学生启动“光影魔术手”软件,尝试制作日历。
3.抽学生演示,学习制作方法:
光影生辉——DIY个性日历

任务效果图
活动一
图像的光影调整
通过本活动,掌握图像处理的基本操作,
懂得针对图像的不足采取适当的补救措施,
如:裁剪画面、调整曝光等,并添加边框、
装饰图案等进行简单的美化。
光影魔术手工作界面
菜单栏
工具栏
图像编 辑区
状态栏
打开图片
方法:
单击工具栏中的“打开”按钮,选择需
要打开的图片文件。
裁剪图像
图形。
进入“自由文字与图层”工作界面
方法:
单击菜单栏“工具”→“自由文字与图
层”命令,弹出“自由文字与图层”窗口。
添加水印图片
方法:单击工具列表中的“水印”按钮
添加文字
方法:单击工具列表中的“文字”按钮
绘制线条
方法:单击工具列表中的“直线”按钮
活动四
DIY个性日历
通过本活动,掌握利用日历模板制作日历
方法:单击工具栏中的“裁剪”按钮
自动曝光
方法:单击工具栏中的“曝光”按钮
数码补光
在菜单栏中单击“效果”→“数码补光”
添加轻松边框
在菜单栏中单击“工具”→“轻松边框”
趣味涂鸦
在菜单栏中单击“工具”→“趣味涂鸦”
保存图片
方法: 单击工具栏中的“保存”或 “另存为” 按钮,可保存修改后的图片。
思考:
自定义日历效果
1. 绘制一个半透明的白色矩形,以便摆放日 历文字。 2. 单击菜单栏“工具”→“日历”命令,弹 出“日历”对话框,选择“自定义日历” 选项卡。 3. 在左边的设置选项中调整日期,并适当设 置年份标题、月份标题等字体的样式;在 中间的编辑区移动年份标题、月份标题和 日期的位置。
自定义日历效果
项目三 视听世界——计算机多媒体
网页制作特效——鼠标特效代码

网页制作特效——鼠标特效(一)时钟环绕鼠标<html><head><title>跟随鼠标的日期时间表盘</title></head><BODY><!--将以下代码加入HTML的<Body></Body>之间--><SCRIPT language=JavaScript><!--dCol="0000FF"fCol="FF0000"sCol="00FF00"mCol="000000"hCol="000000"ClockHeight=40;ClockWidth=40;ClockFromMouseY=0;ClockFromMouseX=100;d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");m=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");date=new Date();day=date.getDate();year=date.getYear();if (year < 2000) year=year+1900;TodaysDate="年"+m[date.getMonth()]+" "+day+"日"+d[date.getDay()]+" "+year;D=TodaysDate.split('');H='...';H=H.split('');M='....';M=M.split('');S='.....';S=S.split('');Face='1 2 3 4 5 6 7 8 9 10 11 12';font='Arial';size=1;speed=0.6;ns=(yers);ie=(document.all);Face=Face.split(' ');n=Face.length;a=size*10;ymouse=0;xmouse=0;scrll=0;props="<font face="+font+" size="+size+" color="+fCol+">";props2="<font face="+font+" size="+size+" color="+dCol+">";Split=360/n;Dsplit=360/D.length;HandHeight=ClockHeight/4.5HandWidth=ClockWidth/4.5HandY=-7;HandX=-2.5;scrll=0;step=0.06;currStep=0;y=new Array();x=new Array();Y=new Array();X=new Array();for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}if (ns){for (i=0; i < D.length; i++)document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');for (i=0; i < n; i++)document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');for (i=0; i < S.length; i++)document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');for (i=0; i < M.length; i++)document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');for (i=0; i < H.length; i++)document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');}if (ie){document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < D.length; i++)document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+' </font></div>');document.write('</div></div>');document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');for (i=0; i < n; i++)document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i] +'</font></div>');document.write('</div></div>');document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < H.length; i++)document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';te xt-align:center;font-weight:bold">'+H[i]+'</div>');document.write('</div></div>');document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < M.length; i++)document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';t ext-align:center;font-weight:bold">'+M[i]+'</div>');document.write('</div></div>')document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < S.length; i++)document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';te xt-align:center;font-weight:bold">'+S[i]+'</div>');document.write('</div></div>')}(ns)?window.captureEvents(Event.MOUSEMOVE):0;function Mouse(evnt){ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY; xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;}(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;function ClockAndAssign(){time = new Date ();secs = time.getSeconds();sec = -1.57 + Math.PI * secs/30;mins = time.getMinutes();min = -1.57 + Math.PI * mins/30;hr = time.getHours();hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;if (ie){Od.style.top=window.document.body.scrollTop;Of.style.top=window.document.body.scrollTop;Oh.style.top=window.document.body.scrollTop;Om.style.top=window.document.body.scrollTop;Os.style.top=window.document.body.scrollTop;}for (i=0; i < n; i++){var F=(ns)?yers['nsFace'+i]:ieFace[i].style;F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);}for (i=0; i < H.length; i++){var HL=(ns)?yers['nsHours'+i]:ieHours[i].style;HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);}for (i=0; i < M.length; i++){var ML=(ns)?yers['nsMinutes'+i]:ieMinutes[i].style;ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);}for (i=0; i < S.length; i++){var SL=(ns)?yers['nsSeconds'+i]:ieSeconds[i].style;SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);}for (i=0; i < D.length; i++){var DL=(ns)?yers['nsDate'+i]:ieDate[i].style;DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll; DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);}currStep-=step;}function Delay(){scrll=(ns)?window.pageYOffset:0;Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);for (i=1; i < D.length; i++){Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);}y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);for (i=1; i < n; i++){y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);}ClockAndAssign();setTimeout('Delay()',40);}if (ns||ie)window.onload=Delay;//--></SCRIPT></body></html>该文章转摘自-网页制作大宝库() - 原文链接:/texiao/shubiao/201007026251.shtml(二)银光鼠标:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>很有特色的荧光鼠标</title><meta name="GENERATOR" content="Microsoft FrontPage 5.0"></head><body id="mybody" style="filter:light(enabled=1);" bgcolor="#ffffff" text="#000000"><divid="Layer1" style="height: 32; left: 66; position: absolute; top: 41; width: 52"><dd><div align="right"><img src="images/light.gif" width="29" height="30"></div></dd></div><p align="center"><b><font size="5">日落大道上的亚洲男孩</font></b></p><table border="0" width="100%"><tr><td width="82%"><font face="宋体" color="#FF00FF" style="font-size: 9pt"></font><span style="font-size: 9pt">人人爱谈张爱玲,尤其在论及服饰的时候。
日历网站设计制作方案

日历网站设计制作方案背景介绍随着互联网的飞速发展,越来越多的人们喜欢使用日历应用程序和网站来记录每天的活动和事件。
因此,设计制作一个高质量的日历网站是非常必要的。
本文将介绍一个日历网站的设计制作方案,让用户可以充分利用网站记录重要的日期和活动。
目标用户和需求本日历网站的目标用户是需要高效记录日历和事件的人们。
这些人可能是日常工作繁忙的职业人士、学生、日程安排严谨的专业人士等。
这些用户需要一个易于使用的日历网站,能够快速且准确地添加、编辑和查看每天的事件。
同时,用户还希望网站提供一些有用的功能,如即时提醒、数据备份、分享等。
网站设计方案页面设计日历网站的页面设计应该简洁、清晰,同时充分利用页面空间,让用户在不同的设备上都能够流畅地访问。
主要组件包括:•月份显示器:用于显示当前月份、选择月份以及显示不同的活动和事件。
在月份显示器下方,显示本月的每一天。
•添加事件功能:用户可以通过单击日期或者事件添加按钮,添加新的事件。
在添加事件页面,应该提供一些必填、选填项,如事件名称、事件时间、事件重复规则等。
•事件列表:在日历页面,用户可以通过选择不同的日期或月份,查看该日期或月份中添加的所有事件列表。
每个事件应该显示重要信息,如事件名称、日期、时间、重复规则等。
•设置功能:用户可以在设置中选择关注日历颜色、添加活动提醒功能、备份数据等功能。
•状态栏:用于提醒用户添加的下一步行动。
•搜索功能:用于在不同日期范围内搜索特定事件。
技术实现这个日历网站可以使用各种技术来实现。
以下是一些常见的实现方案:•前端开发:使用HTML、CSS和JavaScript等技术,实现网站的界面和交互逻辑。
•后端开发:使用PHP、Python、Ruby等语言和MySQL、PostgreSQL等数据库技术,实现网站的后端逻辑和数据库层。
•框架:使用现有的Web开发框架(如React、Vue等),以快速实现这个日历网站。
•移动应用:将日历网站作为移动应用的一部分发布到应用商店,让用户下载并在常用的移动设备上使用。
如何制作个性化的月历和年历的Word技巧

如何制作个性化的月历和年历的Word技巧在现代社会中,人们常常需要制作个性化的月历和年历来规划自己的时间和安排,而Microsoft Word作为一个常用的办公软件,提供了许多方便的工具和技巧来帮助我们制作个性化的月历和年历。
本文将介绍一些制作个性化月历和年历的Word技巧,以帮助读者快速掌握制作个性化日历的方法。
一、插入表格制作月历1. 打开Word软件,选择"插入"菜单,并点击"插入表格"按钮。
2. 选择表格大小,通常一个月的日历包含7列和6行,可以选择7列6行的表格。
3. 在表格中填入日期和星期几的信息,并进行格式设置,如字体、颜色、居中对齐等。
4. 在表格中插入重要的日期或事件,如节假日、生日等,并进行格式设置,使其突出显示。
5. 根据需求添加额外的信息,如每天的天气预报、每周的计划等。
二、利用模板制作年历1. 在Word软件中选择"文件"菜单,并点击"新建"按钮。
2. 在模板搜索框中输入"年历"关键词,并选择适合的模板。
3. 下载并打开选择的模板,根据自己的需要进行编辑和定制。
4. 修改模板中的日期、标题、图片等信息,使其符合个人偏好和需求。
5. 根据需要添加额外的内容,如假期安排、重要事项、备忘录等。
三、利用自定义页边距和页面布局1. 在Word软件中打开一个新的文档。
2. 选择"页面布局"菜单,并点击"页边距"按钮。
3. 在弹出的页面边距设置对话框中,设置合适的页边距,如留白的大小。
4. 根据需要选择合适的页面布局,如横向排列或纵向排列。
5. 在页面上逐个添加月份和日期,并进行格式设置,如字体、颜色、大小等。
6. 添加或绘制其他的图案、图片或装饰物,使其更加个性化。
四、利用Word的自定义样式和主题1. 在Word软件中,选择"开始"菜单,并点击"样式"按钮。
如何用Excel制作日历
如何用Excel制作日历Excel是一种功能强大的办公软件,可以用来制作各种类型的日历。
下面是一种制作Excel日历的简单方法:第一步:创建一个新的Excel工作簿。
打开Excel并选择一个空白工作簿,这将创建一个新的电子表格。
第二步:设置行和列的大小。
选择整个工作表,然后右击鼠标并选择“行高”和“列宽”选项来调整它们的大小,以便适应你的日历布局。
第三步:添加月份和年份。
选择你想要添加日历的起始日期所在的单元格(通常是在最左上角的单元格),然后输入月份和年份信息。
第四步:创建日历的表头。
在日期信息下方的单元格中,输入一个表头,包括星期几的名称。
例如,用“A1”单元格开始,输入“星期日”,在右侧的单元格依次输入“星期一”,“星期二”等。
第五步:填充日期。
从表头开始的下一行,依次输入日历中的每一天的日期。
你可以手动输入,也可以使用Excel的自动填充功能。
选择第一个日期,然后将鼠标悬停在右下角的小黑点上,直到你看到一个加号。
然后,按住鼠标左键并拖动鼠标,直到填充所需的日期范围。
第六步:调整日期格式。
选中日期单元格范围并右击,选择“格式单元格”选项。
在“数字”选项卡中,选择你想要的日期格式,然后点击“确定”。
第七步:设置周末颜色。
选择你想要改变颜色的日期范围,然后在“开始”选项卡上的“填充颜色”图标下选择一个你喜欢的颜色。
第八步:添加其他重要日期。
如果你想要标记一些特殊的日期,比如节假日或者重要的事情,你可以在相应的日期下方的单元格中输入这些信息。
第九步:设置打印选项。
在准备打印之前,你可能需要设置打印选项,比如纸张方向、边距和打印区域。
点击“文件”选项卡的“打印预览”按钮来预览你的日历,并通过“页面布局”选项卡上的工具来进行相应的设置。
第十步:打印日历。
一旦你对打印设置满意,你可以点击“文件”选项卡中的“打印”按钮打印你的日历。
web日历编写课程设计
web日历编写课程设计一、课程目标知识目标:1. 让学生掌握Web日历的基本结构及功能,理解其背后的编程逻辑;2. 学会使用HTML、CSS和JavaScript等前端技术实现Web日历的基本布局和样式设计;3. 掌握如何在前端代码中实现日期的动态显示、事件添加和事件提醒等功能。
技能目标:1. 培养学生独立编写Web日历代码的能力,提高编程实践操作技能;2. 提升学生运用前端技术解决问题的能力,培养创新思维和实际应用能力;3. 增强学生的团队协作能力,通过合作完成Web日历项目。
情感态度价值观目标:1. 培养学生对编程的兴趣,激发学习热情,提高自主学习能力;2. 培养学生具备良好的编程习惯,注重代码规范和版本控制;3. 增强学生的自信心,敢于面对编程挑战,培养克服困难的意志力。
课程性质:本课程为实践性较强的课程,注重培养学生的动手能力和实际应用能力。
学生特点:学生具备一定的计算机基础知识,对前端编程有一定了解,但实践经验不足。
教学要求:教师需采用案例教学、任务驱动等教学方法,引导学生主动参与,注重理论与实践相结合,提高学生的实际操作能力。
在教学过程中,关注学生的个体差异,给予个性化指导,确保每位学生都能达到课程目标。
通过课程学习,使学生能够独立完成一个具有基本功能的Web日历项目,为今后的编程学习和职业发展奠定基础。
二、教学内容1. HTML基础知识回顾:HTML文档结构、常用标签及其属性;2. CSS样式设计:选择器、盒模型、布局、颜色与字体;3. JavaScript基础:变量、数据类型、运算符、流程控制、函数、事件处理;4. DOM操作:获取和修改元素内容、属性、样式;5. 日期处理:JavaScript中Date对象的使用,日期格式化与计算;6. Web日历功能实现:- 基本布局与样式设计:月视图、周视图、日视图的布局与样式;- 日期显示:动态生成日期,处理月份、年份变化;- 事件添加与展示:为日期添加事件,事件展示在日历中;- 事件提醒功能:设置提醒时间,实现事件提醒功能;7. 项目实践:团队协作完成一个具有基本功能的Web日历项目。
JS制作简单的日历控件【JS Date对象练习实例】
JS制作简单的日历控件【JS Date对象练习实例】一直对JS 中的Date 对象不是很熟练,缺乏操作实践,端午节抽空复习了一下,做了一个简单的日期选择控件日历外观参考了淘宝旅行中的日期控件,控件只有基本功能,木有做节日显示,木有做IE6的SELECT遮挡控制,仅供练习:使用方法:只需传入日期INPUT元素的ID即可,isSelect选项为是否为SELECT下拉选择年月设置var myDate1 = new Calender({id:'j_Date1'});var myDate2 = new Calender({id:'j_Date2',isSelect:!0});演示如下:支持选择年月支持SELECT选择年月没空做教程啦,有兴趣的看源代码吧,详细源代码+注释如下:<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>日历组件示例</title><style>.calendar{font-family:Tahoma; background:#fff; float:left; border-style:solid; border-width:1px; border-color:#85BEE5 #3485C0 #3485C0 #85BEE5; position:relative; padding:10px; overflow:hidden;}.calendar dl,.calendar dd{margin:0; padding:0; width:183px; font-size:12px; line-height:22px;}.calendar dt.title-date{ display:block; border-bottom:1px solid #E4E4E4; font-weight:700; position:relative; margin-bottom:5px;}.calendar dt{ float:left; width:25px; margin-left:1px; text-align:center;}.calendar dt.title-date{ width:100%;}.calendar dd{clear: both;width: 183px;height: 139px;font-weight: 700;background:url(/cnblogs_com/NNUF/379856/o_bg.png) no-repeat; margin:0;}.prevyear,.nextyear, .prevmonth,.nextmonth{cursor:pointer;height:9px; background:url(/cnblogs_com/NNUF/379856/o_nextprv.png)no-repeat; overflow:hidden;position:absolute; top:8px; text-indent:-999px;}.prevyear{ left:4px; width:9px;}.prevmonth{ width:5px; background-position:-9px 0; left:20px;}.nextyear{ width:9px; background-position:-19px 0; right:5px;}.nextmonth{ width:5px; background-position:-14px 0; right:20px;}.calendar dd a{float: left;width: 25px;height: 22px; color:blue; overflow: hidden; text-decoration: none;margin: 1px 0 0 1px; text-align:center;}.calendar dd a.disabled{color:#999;}.calendar dd a.tody{ color:red; }.calendar dd a.on{background:blue; color:#fff;}.calendar dd a.live{cursor:pointer}.input{ border:1px solid #ccc; padding:4px; background:url(/cnblogs_com/NNUF/379856/o_nextprv.png)no-repeat right -18px;}</style></head><body><br/><br/><h3>支持选择年月 支持SELECT选择年月</h3><div><input type="text" id="j_Date1" class="input"> <input type="text" id="j_Date2" class="input"></div><br/><div></div><!--日历控件JS源码--><script>/*** @namespace _CalF* 日历控件所用便捷函数* */_CalF = {// 选择元素$:function(arg,context){var tagAll,n,eles=[],i,sub = arg.substring(1);context = context||document;if(typeof arg =='string'){switch(arg.charAt(0)){case '#':return document.getElementById(sub);break;case '.':if(context.getElementsByClassName) return context.getElementsByClassName(sub);tagAll = _CalF.$('*',context);n = tagAll.length;for(i = 0;i<n;i++){if(tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);}return eles;break;default:return context.getElementsByTagName(arg);break;}}},// 绑定事件bind:function(node,type,handler){node.addEventListener?node.addEventListener(type, handler, false):node.attachEvent('on'+ type, handler);},// 获取元素位置getPos:function (node) {var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,scrollt = document.documentElement.scrollTop || document.body.scrollTop;pos = node.getBoundingClientRect();return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx }},// 添加样式名addClass:function(c,node){node.className = node.className + ' ' + c;},// 移除样式名removeClass:function(c,node){var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)","g");node.className = node.className.replace(reg, '');},// 阻止冒泡stopPropagation:function(event){event = event || window.event;event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;}};/*** @name Calender* @constructor* @created by VVG* @/NNUF/* @mysheller@* */function Calender() {this.initialize.apply(this, arguments);}Calender.prototype = {constructor:Calender,// 模板数组_template :['<dl>','<dt class="title-date">','<span class="prevyear">prevyear</span><span class="prevmonth">prevmonth</span>','<span class="nextyear">nextyear</span><span class="nextmonth">nextmonth</span>','</dt>','<dt><strong>日</strong></dt>','<dt>一</dt>','<dt>二</dt>','<dt>三</dt>','<dt>四</dt>','<dt>五</dt>','<dt><strong>六</strong></dt>','<dd></dd>','</dl>'],// 初始化对象initialize :function (options) {this.id = options.id; // input的IDthis.input = _CalF.$('#'+ this.id); // 获取INPUT元素this.isSelect = options.isSelect; // 是否支持下拉SELECT选择年月,默认不显示this.inputEvent(); // input的事件绑定,获取焦点事件},// 创建日期最外层盒子,并设置盒子的绝对定位createContainer:function(){// 如果存在,则移除整个日期层Containervar odiv = _CalF.$('#'+ this.id + '-date');if(!!odiv) odiv.parentNode.removeChild(odiv);var container = this.container = document.createElement('div');container.id = this.id + '-date';container.style.position = "absolute";container.zIndex = 999;// 获取input表单位置inputPosvar input = _CalF.$('#' + this.id),inputPos = _CalF.getPos(input);//console.log(inputPos.top + ':' + inputPos.right + ' ' + inputPos.bottom + ' ' + inputPos.left);// 根据input的位置设置container高度container.style.left = inputPos.left + 'px';container.style.top = inputPos.bottom - 1 + 'px';// 设置日期层上的单击事件,仅供阻止冒泡,用途在日期层外单击关闭日期层_CalF.bind(container, 'click', _CalF.stopPropagation);document.body.appendChild(container);},// 渲染日期drawDate:function (odate) { // 参数odate 为日期对象格式var dateWarp, titleDate, dd, year, month, date, days, weekStart,i,l,ddHtml=[],textNode;var nowDate = new Date(),nowyear = nowDate.getFullYear(),nowmonth = nowDate.getMonth(),nowdate = nowDate.getDate();this.dateWarp = dateWarp = document.createElement('div');dateWarp.className = 'calendar';dateWarp.innerHTML = this._template.join('');this.year = year = odate.getFullYear();this.month = month = odate.getMonth()+1;this.date = date = odate.getDate();this.titleDate = titleDate = _CalF.$('.title-date', dateWarp)[0];// 是否显示SELECTif(this.isSelect){var selectHtmls =[];selectHtmls.push('<select>');for(i = 2020;i>1970;i--){if(i != this.year){selectHtmls.push('<option value ="'+ i +'">'+ i +'</option>');}else{selectHtmls.push('<option value ="'+ i +'" selected>'+ i +'</option>');}}selectHtmls.push('</select>');selectHtmls.push('年');selectHtmls.push('<select>');for(i = 1;i<13;i++){if(i != this.month){selectHtmls.push('<option value ="'+ i +'">'+ i +'</option>');}else{selectHtmls.push('<option value ="'+ i +'" selected>'+ i +'</option>');}}selectHtmls.push('</select>');selectHtmls.push('月');titleDate.innerHTML = selectHtmls.join('');// 绑定change事件this.selectChange();}else{textNode = document.createTextNode(year + '年' + month + '月');titleDate.appendChild(textNode);this.btnEvent();}// 获取模板中唯一的DD元素this.dd = dd = _CalF.$('dd',dateWarp)[0];// 获取本月天数days = new Date(year, month, 0).getDate();// 获取本月第一天是星期几weekStart = new Date(year, month-1,1).getDay();// 开头显示空白段for (i = 0; i < weekStart; i++) {ddHtml.push('<a> </a>');}// 循环显示日期for (i = 1; i <= days; i++) {if (year < nowyear) {ddHtml.push('<a class="live disabled">' + i + '</a>');} else if (year == nowyear) {if (month < nowmonth + 1) {ddHtml.push('<a class="live disabled">' + i + '</a>');} else if (month == nowmonth + 1) {if (i < nowdate) ddHtml.push('<a class="live disabled">' + i + '</a>');if (i == nowdate) ddHtml.push('<a class="live tody">' + i + '</a>');if (i > nowdate) ddHtml.push('<a class="live">' + i + '</a>');} else if (month > nowmonth + 1) {ddHtml.push('<a class="live">' + i + '</a>');}} else if (year > nowyear) {ddHtml.push('<a class="live">' + i + '</a>');}}dd.innerHTML = ddHtml.join('');// 如果存在,则先移除this.removeDate();// 添加this.container.appendChild(dateWarp);// A link事件绑定this.linkOn();// 区域外事件绑定this.outClick();},// SELECT CHANGE 事件selectChange:function(){var selects,yearSelect,monthSelect,that = this;selects = _CalF.$('select',this.titleDate);yearSelect = selects[0];monthSelect = selects[1];_CalF.bind(yearSelect, 'change',function(){var year = yearSelect.value;var month = monthSelect.value;that.drawDate(new Date(year, month-1, that.date));});_CalF.bind(monthSelect, 'change',function(){var year = yearSelect.value;var month = monthSelect.value;that.drawDate(new Date(year, month-1, that.date));})},// 移除日期DIV.calendarremoveDate:function(){var odiv = _CalF.$('.calendar',this.container)[0];if(!!odiv) this.container.removeChild(odiv);},// 上一月,下一月按钮事件btnEvent:function(){var prevyear = _CalF.$('.prevyear',this.dateWarp)[0],prevmonth = _CalF.$('.prevmonth',this.dateWarp)[0],nextyear = _CalF.$('.nextyear',this.dateWarp)[0],nextmonth = _CalF.$('.nextmonth',this.dateWarp)[0],that = this;prevyear.onclick = function(){var idate = new Date(that.year-1, that.month-1, that.date);that.drawDate(idate);};prevmonth.onclick = function(){var idate = new Date(that.year, that.month-2,that.date);that.drawDate(idate);};nextyear.onclick = function(){var idate = new Date(that.year + 1,that.month - 1, that.date);that.drawDate(idate);};nextmonth.onclick = function(){var idate = new Date(that.year , that.month, that.date);that.drawDate(idate);}},// A 的事件linkOn:function(){var links = _CalF.$('.live',this.dd),i,l=links.length,that=this;for(i = 0;i<l;i++){links[i].index = i;links[i].onmouseover = function(){_CalF.addClass("on",links[this.index]);};links[i].onmouseout = function(){_CalF.removeClass("on",links[this.index]);};links[i].onclick = function(){that.date = this.innerHTML;that.input.value = that.year + '-' + that.month + '-' + that.date;that.removeDate();}}},// 表单的事件inputEvent:function(){var that = this;_CalF.bind(this.input, 'focus',function(){that.createContainer();that.drawDate(new Date());});_CalF.bind(this.input, 'click',_CalF.stopPropagation);},// 鼠标在对象区域外点击,移除日期层outClick:function(){var that = this;_CalF.bind(document, 'click',function(){that.removeDate();})}};var myDate1 = new Calender({id:'j_Date1'});var myDate2 = new Calender({id:'j_Date2',isSelect:!0});</script></body></html>。
科技小制作 手工 简单三年级日厉卡
科技小制作手工简单三年级日历卡介绍在这个数字时代,手工制作仍然是培养孩子创造力和动手能力的重要方式之一。
本文将教您如何制作一个简单的三年级日历卡,让孩子们在手工制作中体验到科技的魅力。
材料准备为了制作这个简单的三年级日历卡,您需要准备以下材料:•彩纸•尺子•铅笔•剪刀•胶棒•彩色笔或钢笔•背景画笔制作步骤第一步:准备日历卡的背景首先,我们将制作日历卡的背景。
拿出一张彩纸作为背景,用彩色笔或钢笔为它涂上您喜欢的颜色。
这将成为我们日历卡的底色。
第二步:制作月份标签接下来,我们需要制作月份标签。
使用不同颜色的彩纸,切割出12个小矩形,每个矩形的宽度大约为3cm,高度大约为1cm。
使用彩色笔或钢笔,将每个矩形上写上一个月份的名称。
确保字体清晰易读。
第三步:制作日期卡片现在,我们将制作用于标记日期的小卡片。
使用尺子在彩纸上划定1.5cm x1.5cm的正方形,然后剪下这些小卡片。
您可以根据需要制作至少31张小卡片。
第四步:装配日历卡接下来,我们需要将月份标签和日期卡片装配到日历卡上。
首先,用胶棒将12个月份标签依次固定在背景纸上,每个标签之间保持适当间距。
然后,将日期卡片粘贴在各个月份的下方。
确保每个月份都有足够的日期卡片。
第五步:装饰卡片最后,我们可以为日历卡添加一些装饰。
使用胶棒将一些小花朵、星星或其他小装饰物粘贴在背景纸的四周。
这会给卡片带来更多的色彩和趣味。
结语通过制作这个简单的三年级日历卡,孩子们可以在手工制作中体验到科技的魅力。
他们可以通过自己动手制作日历卡,学习时间的概念,并在使用中提醒自己每天的重要事件。
这项手工制作活动不仅培养了孩子们的创造力和动手能力,还提升了他们的时间管理能力。
希望您和孩子们一起享受这个有趣的制作过程!。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
【网页特效-时间特效】一个使你自己可以动手创建的日历本,可是很有.txt -你脚踏俩只船,你划得真漂亮。
- 每个说不想恋爱的人心里都装着一个不可能的人。
我心疼每一个不快乐却依然在笑的孩子。
(有没有那么一个人,看透我在隐身,知道我在等人。
<SCRIPT LANGUAGE="JavaScript"><!--function displayCalendar(init) {var i;var now = new Date();var nowYear = now.getYear() - 95;var nowMonth = now.getMonth();var nowDay = now.getDate();// on open of documentif (init==1) {document.calControl.month.selectedIndex = nowMonth;document.calControl.year.selectedIndex = nowYear;}var month=document.calControl.month.selectedIndexvar year=document.calControl.year.selectedIndex+1995var days=getDaysInMonth(month+1,year);var firstOfMonth = new Date (year, month, 1);var startingPos=firstOfMonth.getDay()+7;days+=startingPos;// label days of weeki=0;document.calButtons.elements[i++].value = " S ";document.calButtons.elements[i++].value = " M ";document.calButtons.elements[i++].value = " T ";document.calButtons.elements[i++].value = " W ";document.calButtons.elements[i++].value = " T ";document.calButtons.elements[i++].value = " F ";document.calButtons.elements[i++].value = " S ";// blank out non date buttonsfor (i=7; i<startingPos; i++)document.calButtons.elements[i].value = " ";for (i=startingPos; i<days; i++)document.calButtons.elements[i].value = i-startingPos+1;// show focus on today if the calendar is the proper month and yearif (month==nowMonth && year==nowYear+1995)document.calButtons.elements[nowDay+startingPos-1].focus();// blank out rest of non date buttonsfor (i=days; i<49; i++)document.calButtons.elements[i].value = " ";}function leapYear (Year) {if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0))return (1);elsereturn (0);}function getDaysInMonth(month,year) {var days;if (month==1 || month==3 || month==5 || month==7 || month==8 ||month==10 || month==12) days=31;else if (month==4 || month==6 || month==9 || month==11) days=30;else if (month==2) {if (leapYear (year)==1) days=29;else days=28;}return (days);}// --></SCRIPT><FORM NAME="calControl">month <SELECT NAME="month"><OPTION>Jan <OPTION>Feb <OPTION>Mar <OPTION>Apr <OPTION>May <OPTION>Jun <OPTION>Jul <OPTION>Aug <OPTION>Sep <OPTION>Oct <OPTION>Nov <OPTION>Dec </SELECT>year <SELECT NAME="year"><OPTION>1995 <OPTION>1996 <OPTION>1997 <OPTION>1998 <OPTION>1999 <OPTION>2000 </SELECT><INPUT TYPE="button" NAME="button1" VALUE="Create"onClick="displayCalendar(0)"></FORM><FORM NAME="calButtons"><INPUT TYPE="button" NAME="but0" value=" "><INPUT TYPE="button" NAME="but1" value=" "><INPUT TYPE="button" NAME="but2" value=" "><INPUT TYPE="button" NAME="but3" value=" "><INPUT TYPE="button" NAME="but4" value=" "><INPUT TYPE="button" NAME="but5" value=" "><INPUTTYPE="button" NAME="but6" value=" "></CENTER><CENTER><INPUT TYPE="button" NAME="but7" value=" "><INPUT TYPE="button" NAME="but8" value=" "><INPUT TYPE="button" NAME="but9" value=" "><INPUT TYPE="button" NAME="but10" value=" "><INPUT TYPE="button" NAME="but11" value=" "><INPUT TYPE="button" NAME="but12" value=" "><INPUT TYPE="button" NAME="but13" value=" "></CENTER><CENTER><INPUT TYPE="button" NAME="but14" value=" "><INPUT TYPE="button" NAME="but15" value=" "><INPUT TYPE="button" NAME="but16" value=" "><INPUT TYPE="button" NAME="but17" value=" "><INPUT TYPE="button" NAME="but18" value=" "><INPUT TYPE="button" NAME="but19" value=" "><INPUT TYPE="button" NAME="but20" value=" "></CENTER><CENTER><INPUT TYPE="button" NAME="but21" value=" "><INPUT TYPE="button" NAME="but22" value=" "><INPUT TYPE="button" NAME="but23" value=" "><INPUT TYPE="button" NAME="but24" value=" "><INPUT TYPE="button" NAME="but25" value=" "><INPUT TYPE="button" NAME="but26" value=" "><INPUT TYPE="button" NAME="but27" value=" "></CENTER><CENTER><INPUT TYPE="button" NAME="but28" value=" "><INPUT TYPE="button" NAME="but29" value=" "><INPUT TYPE="button" NAME="but30" value=" "><INPUT TYPE="button" NAME="but31" value=" "><INPUT TYPE="button" NAME="but32" value=" "><INPUT TYPE="button" NAME="but33" value=" "><INPUT TYPE="button" NAME="but34" value=" "></CENTER><CENTER><INPUT TYPE="button" NAME="but35" value=" "><INPUT TYPE="button" NAME="but36" value=" "><INPUT TYPE="button" NAME="but37" value=" "><INPUT TYPE="button" NAME="but38" value=" "><INPUT TYPE="button" NAME="but39" value=" "><INPUT TYPE="button" NAME="but40" value=" "><INPUT TYPE="button" NAME="but41" value=" "></CENTER><CENTER><INPUT TYPE="button" NAME="but42" value=" "><INPUT TYPE="button" NAME="but43" value=" "><INPUT TYPE="button" NAME="but44" value=" "><INPUT TYPE="button" NAME="but45" value=" "><INPUT TYPE="button" NAME="but46" value=" "><INPUT TYPE="button" NAME="but47" value=" "><INPUT TYPE="button" NAME="but48" value=" "></CENTER><CENTER></FORM>QQ291911320。