信息发布软件,b2b软件,广告发布软件

标题: 教您学会这招JavaScript网页的日历能拖动厉害吧 [打印本页]
作者: 群发软件    时间: 2017-6-7 23:44
标题: 教您学会这招JavaScript网页的日历能拖动厉害吧
本帖最后由 群发软件 于 2017-6-7 23:45 编辑

本文实例为大家分享了网页版日历代码，供大家参考，具体内容如下
效果图：
教您学会这招JavaScript网页的日历能拖动厉害吧 b2b软件
实现代码：
<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菜单命令)拖入层中，如下图所示。


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


　　3、选择页面中的层，然后在Behaviors(行为)面板(如果没有打开，选择Window>Behaviors)中单击"+"按钮，从弹出的菜单上选择Drag Layer(拖动层)命令。

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


　　4、在弹出的Drag Layer对话框中采用默认选项，单击OK按钮。此时，Behaviors面板添加了onClick(单击)事件和Drag Layer动作。


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


　　5、保存文件，在浏览器中浏览，用鼠标按住月历即可在页面中自由拖动。


　　怎么样，蛮酷吧？

首先当然要看的是效果，先看一张素颜：
教您学会这招JavaScript网页的日历能拖动厉害吧 b2b软件
然后在调用过程中指定若干参数，可以定义出比较漂亮的日历，这里仅仅是演示，上一张红绿配的丑照：
教您学会这招JavaScript网页的日历能拖动厉害吧 b2b软件
在区域宽度小于200px的时候，会提示无法正常显示日历：
教您学会这招JavaScript网页的日历能拖动厉害吧 b2b软件
接下来看下这款控件的用法。
作者: zdxhz    时间: 2017-6-9 16:01
的资料，谢谢店主
作者: znl001    时间: 2017-6-13 06:19
谢谢设计师谢业务员小刘！
作者: tian001    时间: 2017-6-20 12:56
，服务很好，功能也是按要求做的。主要是服务，还有教程，客服都是分工的挺好的。推荐！！
作者: iiiiik    时间: 2017-6-25 19:47
及时做出评价,系统默认好评!
作者: 万能群发    时间: 2017-7-2 07:32
业，必须要好评啊，下次还会来的，么么哒！！！！！
作者: huanyili998    时间: 2017-7-2 20:08
高大上，速度也很给力，非常不错
作者: a5206662    时间: 2017-7-4 16:41
这家店服务一流，技术专业。不论是售前、技术，都十分耐心。网站已建设成我想象中的样子，特别感谢小笨蛋与三号笨蛋，一级棒！
作者: linshihu    时间: 2017-7-6 07:07
很复杂很耐心祝生意好



欢迎光临 信息发布软件,b2b软件,广告发布软件 (http://postbbs.com/) Powered by Discuz! X3.2