线路日历报价js代码-日期时间-点滴吧

www.diandiba.com

记录点点滴滴，尽在点滴吧

文章

您现在的位置：首页 > 日期时间 > 特效详情

线路日历报价js代码

更新时间：2015/1/5 23:21:38 下载：3397次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>线路日历报价js代码</title>
</head>
<body>
<script type="text/javascript">
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

var Extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}

.Calendar {
	font-family:Verdana;
	font-size:14px;
	text-align:center;
	width:950px;
	line-height:50px;
}
.Calendar a{
	color:#1e5494;
}

.Calendar table thead{color:#FFFFFF;}

.Calendar table td {
	font-size: 14px;
	padding:1px;
}
#idCalendarPre{
	cursor:pointer;
	float:left;
	padding-right:5px;
}
#idCalendarNext{
	cursor:pointer;
	float:right;
	padding-right:5px;
}
#idCalendar td:hover{background-color:#D3EDFC;}
#idCalendar td.onToday {
	font-weight:bold;
	color:#C60;
}
#idCalendar td.onSelect {
	font-weight:bold;
}
</style>
<div class="Calendar">
<div style="border-top:1px solid #DDDDDD;border-left:1px solid #DDDDDD;border-right:1px solid #DDDDDD;">
  <div id="idCalendarPre">&nbsp;&lt;&lt;上一月</div>
  <div id="idCalendarNext">下一月&gt;&gt;&nbsp;</div>
  <strong><span id="idCalendarYear"></span>年 <span id="idCalendarMonth"></span>月</strong>
</div>
  <table border="1" cellspacing="0" bordercolor="#DDDDDD" style="border-collapse:collapse;">
    <thead>
      <tr>
        <td width="135" bgcolor="#2F96CF">日</td>
        <td width="135" bgcolor="#2F96CF">一</td>
        <td width="135" bgcolor="#2F96CF">二</td>
        <td width="135" bgcolor="#2F96CF">三</td>
        <td width="135" bgcolor="#2F96CF">四</td>
        <td width="135" bgcolor="#2F96CF">五</td>
        <td width="135" bgcolor="#2F96CF">六</td>
      </tr>
    </thead>
    <tbody id="idCalendar">
    </tbody>
  </table>
</div>
<div style="display:none;">
<input id="idCalendarPreYear" type="button" value="上一年" />
<input id="idCalendarNow" type="button" value="当前月" />
<input id="idCalendarNextYear" type="button" value="下一年" />
</div>
<script language="JavaScript">
var cale = new Calendar("idCalendar", {
	onFinish: function(){
		$("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month;
		var flag = ['2013-4-10','2013-4-15','2013-4-20','2013-5-20'];
		var flagprice = ['500','600','700','700'];
		for(var i = 0, len = flag.length; i < len; i++){
			var markDate = flag[i].split('-');
			var markPrice = flagprice[i]

if(this.Year == markDate[0] && this.Month == markDate[1]){
				this.Days[markDate[2]].innerHTML ="<span style='line-height:25px;'>" + markDate[2] + "<br /><span style='color:#FF8500;'>"+markPrice+"元</span></span>";			
			}

}
	}
});

$("idCalendarPre").onclick = function(){ cale.PreMonth(); }
$("idCalendarNext").onclick = function(){ cale.NextMonth(); }

$("idCalendarPreYear").onclick = function(){ cale.PreYear(); }
$("idCalendarNextYear").onclick = function(){ cale.NextYear(); }

$("idCalendarNow").onclick = function(){ cale.NowMonth(); }

</script>
</body>
</html>

预览效果复制代码保存代码提示：可以先修改部分代码后再运行

上一个素材：精确到秒的javascript倒计时代码 下一个素材：js显示日期年月日及星期