<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>签到效果实现</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="sign.css"/>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript">
$(function(){
//ajax获取日历json数据
var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}]
calUtil.init(signList)
})
</script>
</head>
<body>
<div style="width:300pxheight:300px" id="calendar"></div>
</body>
<html><head><meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>日期选择 - BY ziyue</title>
<script language="JavaScript" type="text/JavaScript">
/*=======Calendar.js=======By Jiang Hongbin=======*/
var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月")
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)
var days = new Array("日","一", "二", "三", "四", "五", "六")
var today
document.writeln("<div id='Calendar' style='position:absolutez-index:1visibility: hiddenfilter:\"progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3)\"'></div>")
function getDays(month, year)
{
//下面的这段代码是判断当前是否是闰年的
if (1 == month)
return ((0 == year % 4) &&(0 != (year % 100))) || (0 == year % 400) ? 29 : 28
else
return daysInMonth[month]
}
function getToday()
{
//得到今天的年,月,日
this.now = new Date()
this.year = this.now.getFullYear()
this.month = this.now.getMonth()
this.day = this.now.getDate()
}
function getStringDay(str)
{
//得到输入框的年,月,日
var str=str.split("-")
this.now = new Date(parseFloat(str[0]),parseFloat(str[1])-1,parseFloat(str[2]))
this.year = this.now.getFullYear()
this.month = this.now.getMonth()
this.day = this.now.getDate()
}
function newCalendar() {
var parseYear = parseInt(document.all.Year.options[document.all.Year.selectedIndex].value)
var newCal = new Date(parseYear, document.all.Month.selectedIndex, 1)
var day = -1
var startDay = newCal.getDay()
var daily = 0
if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))
day = today.day
var tableCal = document.all.calendar
var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear())
for (var intWeek = 1intWeek <tableCal.rows.lengthintWeek++)
for (var intDay = 0intDay <tableCal.rows[intWeek].cells.lengthintDay++)
{
var cell = tableCal.rows[intWeek].cells[intDay]
if ((intDay == startDay) &&(0 == daily))
daily = 1
if(day==daily) //今天，调用今天的Class
{
cell.style.background='#6699CC'
cell.style.color='#FFFFFF'
//cell.style.fontWeight='bold'
}
else if(intDay==6) //周六
cell.style.color='green'
else if (intDay==0) //周日
cell.style.color='red'
if ((daily >0) &&(daily <= intDaysInMonth))
{
cell.innerText = daily
daily++
}
else
cell.innerText = ""
}
}
function GetDate(InputBox)
{
var sDate
//这段代码处理鼠标点击的情况
if (event.srcElement.tagName == "TD")
if (event.srcElement.innerText != "")
{
sDate = document.all.Year.value + "-" + document.all.Month.value + "-" + event.srcElement.innerText
eval("document.all."+InputBox).value=sDate
HiddenCalendar()
}
}
function HiddenCalendar()
{
//关闭选择窗口
document.all.Calendar.style.visibility='hidden'
}
function ShowCalendar(InputBox)
{
var x,y,intLoop,intWeeks,intDays
var DivContent
var year,month,day
//var o=document.getElementById(InputBox)
var o=InputBox
var oid=o.id
var thisyear//真正的今年年份
if(!oid)oid=o.name
thisyear=new getToday()
thisyear=thisyear.year
today = o.value
if(isDate(today))
today = new getStringDay(today)
else
today = new getToday()
//显示的位置
x=o.offsetLeft
y=o.offsetTop
while(o=o.offsetParent)
{
x+=o.offsetLeft
y+=o.offsetTop
}
document.all.Calendar.style.left=x+2
document.all.Calendar.style.top=y+20
document.all.Calendar.style.visibility="visible"
//下面开始输出日历表格(border-color:#9DBAF7)
DivContent="<table border='0' cellspacing='0' style='border:1px solid #0066FFbackground-color:#EDF2FC'>"
DivContent+="<tr>"
DivContent+="<td style='border-bottom:1px solid #0066FFbackground-color:#C7D8FA'>"
//年
DivContent+="<select name='Year' id='Year' onChange='newCalendar()' style='font-family:Verdanafont-size:12px'>"
for (intLoop = thisyear - 100intLoop <(thisyear + 2)intLoop++)
DivContent+="<option value= " + intLoop + " " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop + "</option>"
DivContent+="</select>"
//月
DivContent+="<select name='Month' id='Month' onChange='newCalendar()' style='font-family:Verdanafont-size:12px'>"
for (intLoop = 0intLoop <months.lengthintLoop++)
DivContent+="<option value= " + (intLoop + 1) + " " + (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop] + "</option>"
DivContent+="</select>"
DivContent+="</td>"
DivContent+="<td style='border-bottom:1px solid #0066FFbackground-color:#C7D8FAfont-weight:boldfont-family:Wingdings 2,Wingdings,Webdingsfont-size:16pxpadding-top:2pxcolor:#4477FFcursor:hand' align='center' title='关闭' onClick='javascript:HiddenCalendar()'>S</td>"
DivContent+="</tr>"
DivContent+="<tr><td align='center' colspan='2'>"
DivContent+="<table id='calendar' border='0' width='100%'>"
//星期
DivContent+="<tr>"
for (intLoop = 0intLoop <days.lengthintLoop++)
DivContent+="<td align='center' style='font-size:12px'>" + days[intLoop] + "</td>"
DivContent+="</tr>"
//天
for (intWeeks = 0intWeeks <6intWeeks++)
{
DivContent+="<tr>"
for (intDays = 0intDays <days.lengthintDays++)
DivContent+="<td onClick='GetDate(\"" + oid + "\")' style='cursor:handborder-right:1px solid #BBBBBBborder-bottom:1px solid #BBBBBBcolor:#215DC6font-family:Verdanafont-size:12px' align='center'></td>"
DivContent+="</tr>"
}
DivContent+="</table></td></tr></table>"
document.all.Calendar.innerHTML=DivContent
newCalendar()
}
function isDate(dateStr)
{
var datePat = /^(\d{4})(\-)(\d{1,2})(\-)(\d{1,2})$/
var matchArray = dateStr.match(datePat)
if (matchArray == null) return false
var month = matchArray[3]
var day = matchArray[5]
var year = matchArray[1]
if (month <1 || month >12) return false
if (day <1 || day >31) return false
if ((month==4 || month==6 || month==9 || month==11) &&day==31) return false
if (month == 2)
{
var isleap = (year % 4 == 0 &&(year % 100 != 0 || year % 400 == 0))
if (day >29 || (day==29 &&!isleap)) return false
}
return true
}
</script>
<style type="text/css">
<!--
td,input {
font-family: Verdana, Arial, Helvetica, sans-serif
font-size: 12px
}
-->
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table width="500" border="0" align="center" cellspacing="1" bgcolor="#CCCCCC">
<tr bgcolor="#FFFFFF">
<td align="right">您的生日：</td>
<td><input name="birthday" type="text" id="birthday" title="点击选择" onClick="javascript:ShowCalendar(this)" size="20">
<input type="button" name="Submit" value="选 择" onClick="javascript:ShowCalendar(form1.birthday)"></td>
<td>BLOG:<a href="http://web-v.com/">http://web-v.com/</a></td>
</tr>
</table>
</form>
</body>
</html>
获取id ${user.id}
获取name ${user.name}
获取company ${user.company}
JS中直接从java后台获得对象的值（数组的值）
这里举得例子是：JS直接从后台Contorller中（SpringMVC中的model中）获得数值的值
Contorller 此处将 talentIntegralRecordsDay talentIntegralRecordsIntegral 两个数组用JSON.toJSONString()封装。
@SuppressWarnings("deprecation")
@RequestMapping("/integralParadise") public ModelAndView Welcome(HttpServletRequest request){
Users user = userService.currentUser(request)
user.getTalentUser().getIntegral()
System.out.println(user.getTime().getDate())
TalentIntegralRecord[] signInTalentIntegralRecords= wechatIntegralService.getUserSignInTalentIntegralRecords(user.getId()) int size = signInTalentIntegralRecords.length int[] talentIntegralRecordsDay = new int[size]
Long[] talentIntegralRecordsIntegral = new Long[size] for(int i=0i<signInTalentIntegralRecords.lengthi++){
talentIntegralRecordsDay[i]=signInTalentIntegralRecords[i].getOperatorTime().getDate()
talentIntegralRecordsIntegral[i]=signInTalentIntegralRecords[i].getIntegral()
}
Map<String,Object>map = new HashMap<String,Object>()
map.put("talentIntegralRecordsDay", JSON.toJSONString(talentIntegralRecordsDay))
map.put("talentIntegralRecordsIntegral", JSON.toJSONString(talentIntegralRecordsIntegral)) return new ModelAndView("wechat/integralParadise/rili",map)
}
前台JSP 因为用到两个数组数据的JS代码为页面引用的JS代码所以要在页面中先声明获得后台两个数组（这段JS代码应在引用的JS文件前面）
<script type="text/javascript">
$(document).ready(function(){
window.talentIntegralRecordsDay = ${talentIntegralRecordsDay}
window.talentIntegralRecordsIntegral = ${talentIntegralRecordsIntegral}
})</script>
引用的JS文件 开始就获得了两个数组的值
$(function() { var signFun = function() {
var dateArray = window.talentIntegralRecordsDay// 假设已经签到的
var talentIntegralRecordsIntegral = window.talentIntegralRecordsIntegral var $dateBox = $("#js-qiandao-list"),
$currentDate = $(".current-date"),
$qiandaoBnt = $("#js-just-qiandao"),
_html = '',
_handle = true,
myDate = new Date()
$currentDate.text(myDate.getFullYear() + '年' + parseInt(myDate.getMonth() + 1) + '月' + myDate.getDate() + '日') var monthFirst = new Date(myDate.getFullYear(), parseInt(myDate.getMonth()), 1).getDay() var d = new Date(myDate.getFullYear(), parseInt(myDate.getMonth() + 1), 0) var totalDay = d.getDate()//获取当前月的天数
for (var i = 0i <42i++) {
_html += ' <li><div class="qiandao-icon"></div></li>'
}
$dateBox.html(_html) //生成日历网格
var $dateLi = $dateBox.find("li") for (var i = 0i <totalDayi++) {
$dateLi.eq(i + monthFirst).addClass("date" + parseInt(i + 1)) for (var j = 0j <dateArray.lengthj++) { if (i == dateArray[j]) {
$dateLi.eq(i).addClass("qiandao") var integral if(talentIntegralRecordsIntegral[j]==0){
integral="大转盘"
}else{
integral="+"+talentIntegralRecordsIntegral[j]
}
$dateLi.eq(i).find("div").text(integral)
}
}
} //生成当月的日历且含已签到
$(".date" + myDate.getDate()).addClass('able-qiandao')
$dateBox.on("click", "li", function() { if ($(this).hasClass('able-qiandao') &&_handle) {
$(this).addClass('qiandao')
qiandaoFun()
}
