利用Facade设计模式创建JS日历

关于Facade设计模块

设计模式是一个有趣的概念。一般来说,设计模式代表了一种编程语言做好接受的东西(通常是有效的方法)。我已经对模型视图的控制器设计模式写,因为它涉及到整合新闻供稿。设计模式是与语言无关。你可能使用了一些设计模式之前,甚至没有实现它!

Facade是一个术语,它指的是一种人为的或欺骗性的前端公众面对面的方式来隐藏吸引力的基本结构和运作。例如,建筑师可以添加一个大理石墙面的砖大楼外面的街道面临的一面。同样,从外观设计模式是一个概念,即在开发人员创建一个包装,一个公众形象,围绕一个复杂的对象。该包装公开有关的基本方法和对象属性,但往往隐藏了其余大部分。外观模式往往使基础对象更易于使用,或给一个通用对象为特定目的的公众形象。

这正是日历项目一样。要建立日历,你将使用Facade设计模式,创造一个围绕包装内置的JavaScript Date对象。请注意,在这个项目的包装实际上不隐藏任何的日期对象的功能。

制作开始:

1、在程序放置目录里建一个images文件夹(用于存放不同月份所显示的图片)

2、在程序放置目录里建一个calendar.css文件,内容如下:

以下为引用的内容:


以下为引用的内容:

.month, .nav{
 background-color: navy;
 color: white;
 font: 10pt sans-serif;
}
.nav{
 cursor: pointer;
 cursor: hand;
}
.dayHeader{
 color: black;
 font: 10pt sans-serif;
 border-bottom: 1px black solid;
 font-weight: bold;
}
.empty{
 background-color: white;
 border-bottom: 1px black solid;
}
.days{
 color: black;
 background-color: rgb(235,235,235);;
 font: 10pt sans-serif;
 border-bottom: 1px black solid;
 border-left: 1px black solid;
 border-right: 1px black solid;
 cursor: pointer;
 cursor: hand;
}
.date{
 color: maroon;
 font: 10pt sans-serif;
 font-weight: bold;
 border-bottom: 1px black solid;
 border-left: 1px black solid;
 border-right: 1px black solid;
 cursor: pointer;
 cursor: hand;
}

3、在程序放置目录里建一个calendar.js文件,内容如下:


以下为引用的内容:

/*
 脚本创建:齐并科技
 源码出处:www.qbkj.net
*/
//Constructor
function calendar(id,d,p){
 this.id = id;
 this.dateObject = d;
 this.pix = p;
 this.write = writeCalendar;
 this.length = getLength;
 this.month = d.getMonth();
 this.date = d.getDate();
 this.day = d.getDay();
 this.year = d.getFullYear();
 this.getFormattedDate = getFormattedDate;
 //get the first day of the month's day
 d.setDate(1);
 this.firstDay = d.getDay();
 //then reset the date object to the correct date
 d.setDate(this.date);
}

var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

function getFormattedDate(){
 return days[this.day] + ', ' + months[this.month] + ' ' + this.date + ', ' + this.year;
 //return this.month + '/' + this.date + '/' + this.year;
}

function writeCalendar(){
 var calString = '<div id="calContainer">';
 //write month and year at top of table
 calString += '<table id="cal' + this.id + '" cellspacing="0" width="200" style="border:1px black solid;">';
 //write the image ?comment out to hide images
 calString += '<tr><th colspan="7"><img src="' + this.pix[this.month].src + '"/></th></tr>';
 //write the month
 calString += '<tr><th colspan="7" class="month">' + months[this.month] + ', ' + this.year + '</th></tr>';
 //write a row containing days of the week
 calString += '<tr>';
 
 for(i=0;i<days.length;i++){
  calString += '<th class="dayHeader">' + days[i].substring(0,3) + '</th>';
 }
 
 //write the body of the calendar
 calString += '<tr>';
 //create 6 rows so that the calendar doesn't resize
 for(j=0;j<42;j++){
  var displayNum = (j-this.firstDay+1);
  if(j<this.firstDay){
   //write the leading empty cells
   calString += '<td class="empty">&nbsp;</td>';
  }else if(displayNum==this.date){
   calString += '<td id="' + this.id +'selected" class="date" onClick="javascript:changeDate(this,'' + this.id + '')">' + displayNum + '</td>';
  }else if(displayNum > this.length()){
   //Empty cells at bottom of calendar
   calString += '<td>&nbsp;</td>';
  }else{
   //the rest of the numbered cells
   calString += '<td id="" class="days" onClick="javascript:changeDate(this,'' + this.id + '')">' + displayNum + '</td>';
  }
  if(j%7==6){
   calString += '</tr><tr>';
  }
 }
 //close the last number row
 calString += '</tr>';
 //write the nav row
 calString += '<tr>';
 calString += '<td class="nav" style="text-decoration:underline;" onClick="changeMonth(-12,'' + this.id + '')">&lt;</td>';
 calString += '<td class="nav" onClick="changeMonth(-1,'' + this.id + '')">&lt;</td>';
 calString += '<td class="month" colspan="3">&nbsp;</td>';
 calString += '<td class="nav" onClick="changeMonth(1,'' + this.id + '')">&gt;</td>';
 calString += '<td class="nav" style="text-decoration:underline;text-align:right;" onClick="changeMonth(12,'' + this.id + '')">&gt;</td>';
 calString += '</tr>';
 
 calString += '</table>';
 calString += '</div>';
 return calString;
}

function getLength(){
 //thirty days has September...
 switch(this.month){
  case 1:
   if((this.dateObject.getFullYear()%4==0&&this.dateObject.getFullYear()%100!=0)||this.dateObject.getFullYear()%400==0)
    return 29; //leap year
   else
    return 28;
  case 3:
   return 30;
  case 5:
   return 30;
  case 8:
   return 30;
  case 10:
   return 30
  default:
   return 31;
 }
}
function changeDate(td,cal){
 //Some JavaScript trickery
 //Change the cal argument to the existing calendar object
 //This is why the first argument in the constructor must match the variable name
 //The cal reference also allows for multiple calendars on a page
 cal = eval(cal);
 document.getElementById(cal.id + "selected").className = "days";
 document.getElementById(cal.id + "selected").id = "";
 td.className = "date";
 td.id = cal.id + "selected";
 //set the calendar object to the new date
 cal.dateObject.setDate(td.firstChild.nodeValue);
 cal = new calendar(cal.id,cal.dateObject,cal.pix);
 //here is where you could react to a date change - I'll just display the formatted date
 alert(cal.getFormattedDate());
}

function changeMonth(mo,cal){
 //more trickery!
 cal = eval(cal);
 //The Date object is smart enough to know that it should roll over in December
 //when going forward and in January when going back
 cal.dateObject.setMonth(cal.dateObject.getMonth() + mo);
 cal = new calendar(cal.id,cal.dateObject,cal.pix);
 cal.formattedDate = cal.getFormattedDate();
 document.getElementById('calContainer').innerHTML = cal.write();
 
}

时间: 2024-08-04 08:10:35

利用Facade设计模式创建JS日历的相关文章

js对象的创建 js对象和java对象的不同

面向对象分为   基于原型的面向对象和基于模板的面向对象. JavaScript:面向对象,基于事件的网页脚本语言. Java:基于模板的面向对象. class A {    private String name;    public void fun()    {    } } A a = new A(); a.fun();      js:基于原型的面向对象. function fun() {    var user = new Object();    user.id = 1;    u

可选择小时和分钟的js日历控件

js|控件|日历 需要找一个 可选择小时和分钟的js日历控件,google了一通没有,最后在一个姐姐的blog上面找到了个修改自梅花雨控件的半成品,错误不少,改了半天终于能用了,放上来希望对大家的工作有帮助.   <script language="javascript">...  /**//**//**//** *使用方法: * (1)只选择日期   <input type="text" name="date"   readO

黑色风格的JS日历代码,左右箭头翻页年、月

  黑色风格的JS日历代码,通过左右箭头可翻页至某年.某月,从外观上来说与灰色的背景搭配得完美,国外网站搞的,界面语言是英文的,如果您打算用可以自己修改为中文哦,别告诉我你连12月和7个星期的英语单词也不会哦! 示例: <title>经典的JS日历</title> <STYLE> body { background-color:#202020;} td { font-family:Tahoma;font-size:11px;} .calendarTable { back

利用css对shiny页面优化及利用htmlwidgets包创建HTML控件

内容来源:2017年5月20日,乐逗游戏高级数据分析师在"第十届中国R会议软件工具专场"进行<HTTPS最佳安全实践>演讲分享.IT大咖说作为独家视频合作方,经主办方和讲者审阅授权发布. 阅读字数: 753 用时: 3分钟 摘要 本演讲将介绍如何利用CSS对shiny页面进行个性化设计及在网页中嵌入视频:并通过一个详细案例介绍了利用htmlwidgets包开发HTML控件,基于D3.JS库创建简单的交互桑基图,包括控件创建.函数修改.数据调用及与shiny结合的演示. 嘉宾

如何利用asp.net输出js

利用asp.net输出js我们大多数都会直接使用Respone.Write()然后根js格式的代码,再在页面调用时我们直接这样是完全可以实现的,下面我来给大家介绍另一种方法 我是我最初的想法以下是代码片段: Respone.Write("hello word!"); 但是,当你查看客户端源码时,你会发现,输出的内容呈现在源码的最前端,显然它破坏了HTML的格式,在某些情况下这是会影响到页面布局等效果的.正确的输出方式应该是: this.ClientScript.RegisterStar

统计及利用查询结果创建新表

一.在SELECT语句中,可以使用集合函数.行集合函数.GROUP BY子句和COMPUTE子句对查询结果进行统计.GROUP BY子句可与行集合函数或集合函数一起使用,而COMPUTE子句只能与行集合函数一起使用. 在SELECT语句中,也可以单纯使用集合函数进行统计,这时它将所有符合条件的数据统计放到一起,形成一行统计数据,这种统计方法叫做标量统计. 例:统计"business"类图书的平均价格 SELECT 'average price'=AVG(price) FROM titl

Windows XP利用TC快速创建文件列表

TC(Total Commander)是很多朋友都非常喜欢的一款超强资源管理工具,其实我们还可以利用TC快速创建文件列表并进行管理.例如,笔者希望获取"C:\Windows\SYSTEM32"文件夹下的所有可执行文件名,可以按照如下步骤进行: 第1步:设置显示类型 首先,请在主界面中打开C:\Windows\SYSTEM32文件夹,由于我们的目的是希望获取所有可执行文件名,因此需要在"显示→文件显示"菜单中选中"仅执行文件",这样将只列出EXE.

Oracle dataGuard专题:利用冷备创建standby

dataGuard是oracle提供的一种数据库级别的HA方案,最主要功能是冗灾.数据保护.故障恢复等.当然根据配置的不同,DATA GUARD还可以具备以下特点:高可用.性能提升.数据保护以及故障恢复等. DATA GUARD可以分为物理STANDBY和逻辑STANDBY两种.二者的最大差别在于,物理STANDBY应用的是主库的归档日志,而逻辑STANDBY应用的是主库的归档日志中提取的SQL语句.由于二者这一点的区别,决定了物理STANDBY无论从逻辑结构和物理结构都是和主库保持一致,而逻辑

精确到分钟的js日历控件,日期选择器代码

  精确到分钟的js日历控件,日期选择器代码,我们知道一般的日历控件是可以选择日期的,但是您有没有见过可以精确到选择分钟的?除了选择年.月.日外,还可以选择时间,够精确吧,希望大家喜欢哦.JS日历插件,这是比较常用的网页特效哦. 示例: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>精确到分钟的js日历控件</T