Java 扩展从html更改为jsp后日历不工作
html和我在javascript中很少有代码显示时间选择（就像日历）。它在html中工作得很完美，但我需要它在jsp中。我不擅长javascript，所以请告诉我如何使它在jsp中也能完美工作 这是密码Java 扩展从html更改为jsp后日历不工作,java,javascript,html,jsp,calendar,Java,Javascript,Html,Jsp,Calendar,html和我在javascript中很少有代码显示时间选择（就像日历）。它在html中工作得很完美，但我需要它在jsp中。我不擅长javascript，所以请告诉我如何使它在jsp中也能完美工作 这是密码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Tr
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<STYLE>
input {
font-size:11px;
}
</STYLE>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script language="javaScript" type="text/javascript" src="calendar.js"></script>
<link href="calendar.css" rel="stylesheet" type="text/css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<style type="text/css">
html, body, div, h1, h2, h3, h4, h5, h6, p, img, dl,
dt, dd, ol, ul, li, table, tr, td, form, object, embed,
article, aside, command, details, fieldset,
figcaption, figure, footer, group, header, hgroup, legend
{
margin: 0;
padding: 0;
border: 0;
}
html {
font: 82.5% verdana, helvetica, sans-serif;
background: #fff;
color: #333;
line-height: 1;
direction: ltr;
}
html, body {
position: absolute;
height: 100%;
min-width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.signin-header
{
padding: 10px 12px 5px;
background:#00AAFF;
border: 1px solid #e5e5e5;
width: 362px;
float: right;
}
.signin-box
{
padding: 20px 25px 15px;
background:#DEDEDE;
border: 1px solid #e5e5e5;
width: 335px;
float: right;
}
.button {
min-width: 46px;
text-align: center;
color: #444;
font-size: 11px;
font-weight: bold;
height: 27px;
padding: 0 8px;
line-height: 27px;
border-radius: 2px;
transition: all 0.218s;
border: 1px solid #dcdcdc;
background-color: #f5f5f5;
cursor: default;
}
*+html .button {
min-width: 70px;
}
button.button,
input[type=submit].button {
height: f1f1f1px;
line-height: 29px;
vertical-align: bottom;
margin: 0;
}
.button:hover {
border: 1px solid #c6c6c6;
color: #333;
text-decoration: none;
transition: all 0.0s;
background-color: #f8f8f8;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.button:active {
background-color: #f6f6f6;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.button:visited {
color: #666;
}
.button-submit {
border: 1px solid #3079ed;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
}
.button-submit:hover {
border: 1px solid #2f5bb7;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
}
button-submit:active {
background-color: #357ae8;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.footer-bar {
position: absolute;
bottom: 0;
height: 35px;
width: 100%;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
.footer {
padding-top: 9px;
font-size: .85em;
white-space: nowrap;
line-height: 0;
}
.footer ul {
color: #999;
float: left;
max-width: 80%;
}
.footer ul li {
display: inline;
padding: 0 1.5em 0 0;
}
.footer a {
color: #333;
}
.footer .lang-chooser-wrap {
float: right;
max-width: 20%;
}
.footer .lang-chooser-wrap img {
vertical-align: middle;
}
.footer .attribution {
float: right;
}
.footer .attribution span {
vertical-align: text-top;
}
.content {
padding: 0 44px;
}
.table{
padding: 0 55px
}
</style>
<script type="text/javascript">
function ccheck()
{
FirstName=document.f1.FirstName.value;
LastName=document.f1.LastName.value;
DOB=document.f1.DOB.value;
Email=document.f1.Email.value;
Phone=document.f1.Phone.value;
RegistrationNo=document.f1.RegistrationNo.value;
City=document.f1.City.value;
State=document.f1.State.value;
Country=document.f1.Country.value;
if(City=="" || City==null)
{
alert("Plz. Enter Your City");
document.f1.City.focus();
return false;
}
if(State=="" || State==null)
{
alert("Plz. Enter Your State");
document.f1.State.focus();
return false;
}
if(Country=="" || Country==null)
{
alert("Plz. Enter Your Country");
document.f1.Country.focus();
return false;
}
if(DOB=="" || DOB==null)
{
alert("Plz. Enter Your Date of Birth");
document.f1.DOB.focus();
return false;
}
if(Email=="" || Email==null )
{
alert("Plz. Enter Your Email");
document.f1.Email.focus();
return false;
}
if(Phone=="" || Phone==null)
{
alert("Plz. Enter Your Phone");
document.f1.Phone.focus();
return false;
}
if(RegistrationNo=="" || RegistrationNo==null)
{
alert("Plz. Enter Your Registration No");
document.f1.RegistrationNo.focus();
return false;
}
if(FirstName=="" || FirstName==null)
{
alert("Plz. Enter Your First Name");
document.f1.FirstName.focus();
return false;
}
if(LastName=="" || LastName==null)
{
alert("Plz. Enter Last Name");
document.f1.LastName.focus();
return false;
}
return true;
}
</script>
<title>My Appointments</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
var imagePath='timePickerImages/';
var ie=document.all;
var dom=document.getElementById;
var ns4=document.layers;
var bShow=false;
var textCtl;
function setTimePicker(t) {
textCtl.value=t;
closeTimePicker();
}
function refreshTimePicker(mode) {
if (mode==0)
{
suffix="am";
}
else
{
suffix="pm";
}
sHTML = "<table><tr><td><table cellpadding=3 cellspacing=0 bgcolor='#f0f0f0'>";
for (i=0;i<=11;i++) {
sHTML+="<tr align=right style='font-family:verdana;font-size:9px;color:#000000;'>";
if (i==0) {
hr = 12;
}
else {
hr=i;
}
for (j=0;j<4;j++) {
sHTML+="<td width=57 style='cursor:hand' onmouseover='this.style.backgroundColor=\"#66CCFF\"' onmouseout='this.style.backgroundColor=\"\"' onclick='setTimePicker(\""+ hr + ":" + padZero(j*15) + " " + suffix + "\")'><a style='text-decoration:none;color:#000000' href='javascript:setTimePicker(\""+ hr + ":" + padZero(j*15) + " " + suffix + "\")'>" + hr + ":"+padZero(j*15) + "<font color=\"#808080\">" + suffix + "</font></a></td>";
}
sHTML+="</tr>";
}
sHTML += "</table></td></tr></table>";
document.getElementById("timePickerContent").innerHTML = sHTML;
}
if (dom){
document.write ("<div id='timepicker' style='z-index:+999;position:absolute;visibility:hidden;'><table style='border-width:3px;border-style:solid;border-color:#0033AA' bgcolor='#ffffff' cellpadding=0><tr bgcolor='#0033AA'><td><table cellpadding=0 cellspacing=0 width='100%' background='" + imagePath + "titleback.gif'><tr valign=bottom height=21><td style='font-family:verdana;font-size:11px;color:#ffffff;padding:3px' valign=center><B> Select a Time </B></td><td><img id='iconAM' src='" + imagePath + "am1.gif' onclick='document.getElementById(\"iconAM\").src=\"" + imagePath + "am1.gif\";document.getElementById(\"iconPM\").src=\"" + imagePath + "pm2.gif\";refreshTimePicker(0)' style='cursor:hand'></td><td><img id='iconPM' src='" + imagePath + "pm2.gif' onclick='document.getElementById(\"iconAM\").src=\"" + imagePath + "am2.gif\";document.getElementById(\"iconPM\").src=\"" + imagePath + "pm1.gif\";refreshTimePicker(1)' style='cursor:hand'></td><td align=right valign=center> <img onclick='closeTimePicker()' src='" + imagePath + "close.gif' STYLE='cursor:hand'> </td></tr></table></td></tr><tr><td colspan=2><span id='timePickerContent'></span></td></tr></table></div>");
refreshTimePicker(0);
}
var crossobj=(dom)?document.getElementById("timepicker").style : ie? document.all.timepicker : document.timepicker;
var currentCtl
function selectTime(ctl,ctl2) {
var leftpos=0
var toppos=0
textCtl=ctl2;
currentCtl = ctl
currentCtl.src=imagePath + "timepicker2.gif";
aTag = ctl
do {
aTag = aTag.offsetParent;
leftpos += aTag.offsetLeft;
toppos += aTag.offsetTop;
} while(aTag.tagName!="BODY");
crossobj.left = ctl.offsetLeft + leftpos
crossobj.top = ctl.offsetTop + toppos + ctl.offsetHeight + 2
crossobj.visibility=(dom||ie)? "visible" : "show"
hideElement( 'SELECT', document.getElementById("calendar") );
hideElement( 'APPLET', document.getElementById("calendar") );
bShow = true;
}
// hides <select> and <applet> objects (for IE only)
function hideElement( elmID, overDiv ){
if( ie ){
for( i = 0; i < document.all.tags( elmID ).length; i++ ){
obj = document.all.tags( elmID )[i];
if( !obj || !obj.offsetParent ){
continue;
}
// Find the element's offsetTop and offsetLeft relative to the BODY tag.
objLeft = obj.offsetLeft;
objTop = obj.offsetTop;
objParent = obj.offsetParent;
while( objParent.tagName.toUpperCase() != "BODY" )
{
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
objHeight = obj.offsetHeight;
objWidth = obj.offsetWidth;
if(( overDiv.offsetLeft + overDiv.offsetWidth ) <= objLeft );
else if(( overDiv.offsetTop + overDiv.offsetHeight ) <= objTop );
else if( overDiv.offsetTop >= ( objTop + objHeight + obj.height ));
else if( overDiv.offsetLeft >= ( objLeft + objWidth ));
else
{
obj.style.visibility = "hidden";
}
}
}
}
//unhides <select> and <applet> objects (for IE only)
function showElement( elmID ){
if( ie ){
for( i = 0; i < document.all.tags( elmID ).length; i++ ){
obj = document.all.tags( elmID )[i];
if( !obj || !obj.offsetParent ){
continue;
}
obj.style.visibility = "";
}
}
}
function closeTimePicker() {
crossobj.visibility="hidden"
showElement( 'SELECT' );
showElement( 'APPLET' );
currentCtl.src=imagePath + "timepicker.gif"
}
document.onkeypress = function hideTimePicker1 () {
if (event.keyCode==27){
if (!bShow){
closeTimePicker();
}
}
}
function isDigit(c) {
return ((c=='0')||(c=='1')||(c=='2')||(c=='3')||(c=='4')||(c=='5')||(c=='6')||(c=='7')||(c=='8')||(c=='9'))
}
function isNumeric(n) {
num = parseInt(n,10);
return !isNaN(num);
}
function padZero(n) {
v="";
if (n<10){
return ('0'+n);
}
else
{
return n;
}
}
function validateDatePicker(ctl) {
t=ctl.value.toLowerCase();
t=t.replace(" ","");
t=t.replace(".",":");
t=t.replace("-","");
if ((isNumeric(t))&&(t.length==4))
{
t=t.charAt(0)+t.charAt(1)+":"+t.charAt(2)+t.charAt(3);
}
var t=new String(t);
tl=t.length;
if (tl==1 ) {
if (isDigit(t)) {
ctl.value=t+":00 am";
}
else {
return false;
}
}
else if (tl==2) {
if (isNumeric(t)) {
if (parseInt(t,10)<13){
if (t.charAt(1)!=":") {
ctl.value= t + ':00 am';
}
else {
ctl.value= t + '00 am';
}
}
else if (parseInt(t,10)==24) {
ctl.value= "0:00 am";
}
else if (parseInt(t,10)<24) {
if (t.charAt(1)!=":") {
ctl.value= (t-12) + ':00 pm';
}
else {
ctl.value= (t-12) + '00 pm';
}
}
else if (parseInt(t,10)<=60) {
ctl.value= '0:'+padZero(t)+' am';
}
else {
ctl.value= '1:'+padZero(t%60)+' am';
}
}
else
{
if ((t.charAt(0)==":")&&(isDigit(t.charAt(1)))) {
ctl.value = "0:" + padZero(parseInt(t.charAt(1),10)) + " am";
}
else {
return false;
}
}
}
else if (tl>=3) {
var arr = t.split(":");
if (t.indexOf(":") > 0)
{
hr=parseInt(arr[0],10);
mn=parseInt(arr[1],10);
if (t.indexOf("pm")>0) {
mode="pm";
}
else {
mode="am";
}
if (isNaN(hr)) {
hr=0;
} else {
if (hr>24) {
return false;
}
else if (hr==24) {
mode="am";
hr=0;
}
else if (hr>12) {
mode="pm";
hr-=12;
}
}
if (isNaN(mn)) {
mn=0;
}
else {
if (mn>60) {
mn=mn%60;
hr+=1;
}
}
} else {
hr=parseInt(arr[0],10);
if (isNaN(hr)) {
hr=0;
} else {
if (hr>24) {
return false;
}
else if (hr==24) {
mode="am";
hr=0;
}
else if (hr>12) {
mode="pm";
hr-=12;
}
}
mn = 0;
}
if (hr==24) {
hr=0;
mode="am";
}
ctl.value=hr+":"+padZero(mn)+" "+mode;
}
}
</SCRIPT>
<body onload="document.f1.uid.focus()" style="background-image:url('medical.jpg');background-position: center ">
<form id="f1" name="f1" action="registerServlet" method="post" onsubmit="return ccheck()" >
<img src="header.png"><br><br><br><br><br>
<table >
<tr>
<td>
<table class="table">
<tr>
<td>
</td>
<td>image</td>
<td>
<table class="table" >
<tr>
<td>
<div class="content">
<div class="signin-header">
<h3>My Appointments</h3>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="content">
<div align="center" class="signin-box">
<table class="table">
<tr>
<td><b>Patient</b></td>
<td><select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select></td>
</tr>
<tr>
<td><b>DOB</b></td>
<td><input type="text" name="DOB"><a href="#" onClick="setYears(1947, 2013);
showCalender(this, 'DOB');">
<img src="calender.png"></a></td>
</tr>
<tr>
<td><b>Start TIme</b></td>
<td><input id='timepicker1' name="StartTime" type='text' value='12:00 pm' size=8 maxlength=8 ONBLUR="validateDatePicker(this)"><IMG SRC="calender.png" ALT=" Time!" ONCLICK="selectTime(this,timepicker1)" STYLE="cursor:hand"></td></td>
</tr>
<tr >
<td><b>End Time</b></td>
<td><input id='timepicker1' type='text' name="EndTime" value='12:00 pm' size=8 maxlength=8 ONBLUR="validateDatePicker(this)"><IMG SRC="calender.png" ALT=" Time!" ONCLICK="selectTime(this,timepicker1)" STYLE="cursor:hand"></td>
</tr>
<tr >
<td><b>Description</b></td>
<td><input name="Description" type="text" /></td>
</tr>
<tr >
<td><input type="submit"
class="button button-submit" value="Submit" /></td>
<td><input type="reset" class="button button-submit"
value="Reset" /></td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="footer-bar">
<img src="./header.png" align="left" >
</div>
</form>
<table id="calenderTable">
<tbody id="calenderTableHead">
<tr>
<td colspan="4" align="center">
<select onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value,
this.selectedIndex, false));" id="selectMonth">
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
</td>
<td colspan="2" align="center">
<select onChange="showCalenderBody(createCalender(this.value,
document.getElementById('selectMonth').selectedIndex, false));" id="selectYear">
</select>
</td>
<td align="center">
<a href="#" onClick="closeCalender();"><font color="#003333" size="+1">X</font></a>
</td>
</tr>
</tbody>
<tbody id="calenderTableDays">
<tr style="">
<td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td>
</tr>
</tbody>
<tbody id="calender"></tbody>
</table>
<!-- End Calender Script -->
</body>
</html>
输入{
字体大小：11px；
}
$（函数（）{
$（“#日期选择器”）.datepicker（）；
});
html、正文、div、h1、h2、h3、h4、h5、h6、p、img、dl、，
dt、dd、ol、ul、li、表格、tr、td、表格、对象、嵌入、，
文章、旁白、命令、细节、字段集、，
figcaption、图、页脚、组、页眉、组、图例
{
保证金：0；
填充：0；
边界：0；
}
html{
字体：82.5%verdana，helvetica，无衬线；
背景：#fff；
颜色：#333；
线高：1；
方向：ltr；
}
html，正文{
位置：绝对位置；
身高：100%；
最小宽度：100%；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}
.签名标题
{
填充：10px 12px 5px；
背景：#00AAFF；
边框：1px实心#e5；
宽度：362px；
浮动：对；
}
.签名箱
{
填充：20px 25px 15px；
背景：#DEDEDE；
边框：1px实心#e5；
宽度：335px；
浮动：对；
}
.按钮{
最小宽度：46px；
文本对齐：居中；
颜色：#444；
字体大小：11px；
字体大小：粗体；
高度：27px；
填充：0 8px；
线高：27px；
边界半径：2px；
过渡：均为0.218s；
边框：1px实心#DCDC；
背景色：#F5；
游标：默认值；
}
*+按钮{
最小宽度：70px；
}
按钮，按钮，
输入[type=submit]。按钮{
高度：f1px；
线高：29px；
垂直对齐：底部对齐；
保证金：0；
}
.按钮：悬停{
边框：1px实心#C6；
颜色：#333；
文字装饰：无；
转换：所有0.0；
背景色：#F8；
盒影：0 1px 1px rgba（0,0,0,0.1）；
}
.按钮：激活{
背景色：#f6f6f6；
盒影：插入0 1px2pRGBA（0,0,0,0.1）；
}
.按钮：已访问{
颜色：#666；
}
.按钮提交{
边框：1px实心#3079ed；
颜色：#fff；
文本阴影：0 1px rgba（0,0,0,0.1）；
背景色：#4d90fe；
}
.按钮提交：悬停{
边框：1px实心#2f5bb7；
颜色：#fff；
文本阴影：0 1px rgba（0,0,0,0.3）；
背景色：357ae8；
}
按钮提交：活动{
背景色：357ae8；
盒影：插入0 1px2pRGBA（0,0,0,0.3）；
}
.页脚栏{
位置：绝对位置；
底部：0；
高度：35px；
宽度：100%；
边框顶部：1px实心#ebebeb；
溢出：隐藏；
}
.页脚{
填充顶部：9px；
字体大小：.85em；
空白：nowrap；
线高：0；
}
.页脚ul{
颜色：#999；
浮动：左；
最大宽度：80%；
}
李国宝先生{
显示：内联；
填充：0 1.5em 0 0；
}
.页脚a{
颜色：#333；
}
.footer.lang选择器换行符{
浮动：对；
最大宽度：20%；
}
.footer.lang选择器包装img{
垂直对齐：中间对齐；
}
.页脚.归属{
浮动：对；
}
.footer.attribute span{
垂直对齐：文本顶部；
}
.内容{
填充：0 44px；
}
.桌子{
填充：0 55px
}
函数ccheck（）
{
FirstName=document.f1.FirstName.value；
LastName=document.f1.LastName.value；
DOB=document.f1.DOB.value；
Email=document.f1.Email.value；
Phone=document.f1.Phone.value；
注册号=document.f1.RegistrationNo.value；
城市=document.f1.City.value；
状态=document.f1.State.value；
国家=document.f1.Country.value；
如果（城市==“”| |城市==空）
{
警报（“请进入您的城市”）；
document.f1.City.focus（）；
返回false；
}
if（State==“”| | State==null）
{
警报（“请输入您的状态”）；
document.f1.State.focus（）；
返回false；
}
如果（国家=“”| |国家==空）
{
警报（“请输入您的国家”）；
document.f1.Country.focus（）；
返回false；
}
if（DOB==“”| | DOB==null）
{
提醒（“请输入您的出生日期”）；
document.f1.DOB.focus（）；
返回false；
}
如果（电子邮件==“”| |电子邮件==空）
{
提醒（“请输入您的电子邮件”）；
document.f1.Email.focus（）；
返回false；
}
如果（电话==“”| |电话==空）
{
警报（“请输入您的手机”）；
document.f1.Phone.focus（）；
返回false；
}
if（RegistrationNo==“”| | RegistrationNo==null）
{
警报（“请输入您的注册号”）；
document.f1.RegistrationNo.focus（）；
返回false；
}
if（FirstName==“”| | FirstName==null）
{
警报（“请输入您的名字”）；
document.f1.FirstName.focus（）；
返回false；
}
如果（LastName==“”| | LastName==null）
{
警报（“请输入姓氏”）；
document.f1.LastName.focus（）；
返回false；
}
返回true；
}
我的约会
var imagePath='timePickerImages/'；
var ie=document.all；
var dom=document.getElementById；
var ns4=document.layers；
var bShow=假；
var-textCtl；
函数设置时间选择器（t）{
textCtl.value=t；
closeTimePicker（）；
}
函数刷新时间选择器（模式）{
如果（模式==0）
{
后缀=“am”；
}
其他的
{
后缀=“pm”；
}
sHTML=“”；
对于（i=0；i
它在JSP中的工作方式完全相同，没有区别。有三个字段，一个用于日历，两个用于时间。开始时间和结束时间。你检查了时间吗？首先，你应该做功课，学习一些HTML、CSS和JavaScript的基础知识。代码中有几十个错误。例如：-重复id“timepicker1”-泄漏变量后缀、sHTML、crossobj、obj等（您应在每个函数的开头使用“var”声明局部变量）-“ONCLICK”应为小写-脚本可以在head或body标记中，但不能在外部…如果您修复了这些“formal”错误，问题可能会消失。如果没有，你将有一个坚实的基础来解决它。好的，我发布了一些清理过的代码-请将其放置到你的JSP中，并尝试计时选择器是否工作。如果没有，请查看浏览器的javascript控制台中是否存在javascript错误（使用Firefox或Chrome）。请告诉我我应该用你的代码替换哪个部分它在你的JSP中工作吗？我的代码不是你的代码的精确子集，所以你应该像我一样清理你的代码