教您学会这招JavaScript网页的日历能拖动厉害吧

群发软件 · 发表于 2017-6-7 23:44:32


	本帖最后由群发软件于 2017-6-7 23:45 编辑本文实例为大家分享了网页版日历代码，供大家参考，具体内容如下效果图： 201638161916594.jpg (26.98 KB, 下载次数: 760785) 2017-6-7 23:44 上传实现代码： <html> <head> <link rel="stylesheet" type="text/css" href="Skin.css"> <style> <!-- table{ text-align: center } --> </style> </head> <body> <div align="center"> <script language="javascript"> var my = new Date(); function showc() { var k=1; var j=1; var today; var tomonth; var theday=1;//日期 var max; var temp; var tempday;//这个月第一天的星期 document.write ("<b>" + my.getFullYear() + "-" + (my.getMonth()+1) + "</b>"); document.write ("<table border='1' width='273' height='158'>"); document.write ("<tr>"); document.write ("<td height='23' width='39'><font color='red'>Sun</font></td>"); document.write ("<td height='23' width='39'>Mon</td>"); document.write ("<td height='23' width='39'>Tue</td>"); document.write ("<td height='23' width='39'>Wed</td>"); document.write ("<td height='23' width='39'>Thu</td>"); document.write ("<td height='23' width='39'>Fri</td>"); document.write ("<td height='23' width='39'>Sat</td>"); document.write ("</tr>"); temp=my.getDate(); my.setDate(1); //document.write (my.getDate()); tempday=my.getDay();//返回第一天是星期几 my.setDate(temp); today=my.getDay();//返回现在星期几 switch ((my.getMonth()+1)) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: max=31; break; case 4: case 6: case 9: case 11: max=30; break; default: max=29;//这里没有考虑闰月！！ //document.write (max); } for(k=0;k<6;k++) { document.write ("<tr>"); for(j=0;j<=6;j++) { document.write ("<td height='23' width='39'>"); if(j>=(tempday)) { tempday=0;//设置为最小，相当于取消判断条件 if(theday<=max) { document.write ("<a title=" + my.getFullYear() + "-" + (my.getMonth()+1) + "-" +theday + " target='_blank' href=detail.asp?date=" + theday + ">"); if(theday==my.getDate()) document.write ("<font color='green'>[" + theday + "]</font></a>"); else if(j==0) document.write ("<font color='red'>" + theday + "</font></a>"); else document.write (theday + "</a>"); theday++; } } document.write ("</td>"); } document.write ("</tr>"); } document.write ("</table>"); } showc(); </script> </div> <body></html> 以上就是本文的全部内容，希望大家可以轻松实现网页版日历。使用本文提供的JavaScript脚本，配合Dreamweaver的层和行为的运用，可以在页面中显示可拖动的精美月历。　　具体制作步骤如下：　　1、启动Dreamweaver MX，新建一个HTML文档，切换到代码视图，编写JavaScript脚本。　　(1)在HTML文档的<head>...</head>插入下面的JavaScript脚本：　　(2)在HTML文档正文<body>...</body>中插入JavaScript脚本，并给<body>标记添加一些属性：　　2、切换到设计视图，在页面中插入一层，并把代表HTML文档正文中的JavaScript脚本图标(如果该图标没有显示，请选择View>Visual Aids>Invisible Elements菜单命令)拖入层中，如下图所示。 13038821148663.jpg (15.44 KB, 下载次数: 121660) 2017-6-7 23:44 上传　　3、选择页面中的层，然后在Behaviors(行为)面板(如果没有打开，选择Window>Behaviors)中单击"+"按钮，从弹出的菜单上选择Drag Layer(拖动层)命令。 13038821144920.jpg (5.45 KB, 下载次数: 101614) 2017-6-7 23:44 上传　　4、在弹出的Drag Layer对话框中采用默认选项，单击OK按钮。此时，Behaviors面板添加了onClick(单击)事件和Drag Layer动作。 13038821235441.jpg (3.61 KB, 下载次数: 566196) 2017-6-7 23:44 上传　　5、保存文件，在浏览器中浏览，用鼠标按住月历即可在页面中自由拖动。　　怎么样，蛮酷吧？首先当然要看的是效果，先看一张素颜： 649725-20161017222818310-1208629545.jpg (4.96 KB, 下载次数: 26091) 2017-6-7 23:45 上传然后在调用过程中指定若干参数，可以定义出比较漂亮的日历，这里仅仅是演示，上一张红绿配的丑照： 649725-20161017223026795-1669107244.jpg (5.42 KB, 下载次数: 647872) 2017-6-7 23:45 上传在区域宽度小于200px的时候，会提示无法正常显示日历： 649725-20161017223122732-2046747829.jpg (3.01 KB, 下载次数: 754365) 2017-6-7 23:45 上传接下来看下这款控件的用法。

zdxhz · 发表于 2017-6-9 16:01:59


	的资料，谢谢店主

znl001 · 发表于 2017-6-13 06:19:26


	谢谢设计师谢业务员小刘！

tian001 · 发表于 2017-6-20 12:56:07


	，服务很好，功能也是按要求做的。主要是服务，还有教程，客服都是分工的挺好的。推荐！！

iiiiik · 发表于 2017-6-25 19:47:50


	及时做出评价,系统默认好评!

万能群发 · 发表于 2017-7-2 07:32:10


	业，必须要好评啊，下次还会来的，么么哒！！！！！

huanyili998 · 发表于 2017-7-2 20:08:53


	高大上，速度也很给力，非常不错

a5206662 · 发表于 2017-7-4 16:41:41


	这家店服务一流，技术专业。不论是售前、技术，都十分耐心。网站已建设成我想象中的样子，特别感谢小笨蛋与三号笨蛋，一级棒！

linshihu · 发表于 2017-7-6 07:07:12


	很复杂很耐心祝生意好

		自动登录	找回密码
密码			立即注册

[『JavaScript图文教程』] 教您学会这招JavaScript网页的日历能拖动厉害吧

相关帖子