怎样用html代码实现如下图的效果，或者用div+css+js怎么实现，跪求完整代码，越详细越好
4个回答
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
</head>
<body>
<table >
<tr>
<td>开始时间</td>
<td>
<div style="float:left; border-style: inset; width:120px">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15%" rowspan="2"><input id="hoInput" value="08" size="2" maxlength="2" style="border-width:0px; font-size: 16px" readonly="true" onFocus="focusInput(this);"></td>
<td width="5%" rowspan="2">:</td>
<td width="15%" rowspan="2"> <input id="miInput" onFocus="focusInput(this);" value="00" size="2" maxlength="2" style="border-width:0px;font-size: 16px " readonly="true" ></td>
<td width="5%" rowspan="2">:</td>
<td width="15%" rowspan="2"><input id="secInput" onFocus="focusInput(this);" value="00" size="2" maxlength="2" style="border-width:0px;font-size: 16px " readonly="true"></input></td>
<td width="15%" height="5"><input type="button" value="▲" style="height:auto; width:auto;font-size: 10px " onClick="add();"> </input></td>
</tr>
<tr>
<td width="15%" height="5"><input type="button" value="▼" style="height:auto; width:auto ;font-size: 10px" onClick="reduce();"> </input></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
function $(objId)
{
return document.getElementById(objId);
}
var curInput;
var hourMax=23;
var hourMin=00;
function focusInput(obj)
{
curInput=obj.id;
}
function add()
{
var curObj=$(curInput);
var curVal=$(curInput).value*1+1;
if (curInput=="hoInput" && curVal>23)
{
return;
}
if (curInput!="hoInput" && curVal>59)
{
return;
}
if((curVal+"").length==1)
{
curVal="0"+curVal;
}
curObj.value=curVal;
}
function reduce()
{
var curObj=$(curInput);
var curVal=$(curInput).value*1-1;
if (curVal<0)
{
return;
}
if((curVal+"").length==1)
{
curVal="0"+curVal;
}
curObj.value=curVal;
}
</script>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
</head>
<body>
<table >
<tr>
<td>开始时间</td>
<td>
<div style="float:left; border-style: inset; width:120px">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15%" rowspan="2"><input id="hoInput" value="08" size="2" maxlength="2" style="border-width:0px; font-size: 16px" readonly="true" onFocus="focusInput(this);"></td>
<td width="5%" rowspan="2">:</td>
<td width="15%" rowspan="2"> <input id="miInput" onFocus="focusInput(this);" value="00" size="2" maxlength="2" style="border-width:0px;font-size: 16px " readonly="true" ></td>
<td width="5%" rowspan="2">:</td>
<td width="15%" rowspan="2"><input id="secInput" onFocus="focusInput(this);" value="00" size="2" maxlength="2" style="border-width:0px;font-size: 16px " readonly="true"></input></td>
<td width="15%" height="5"><input type="button" value="▲" style="height:auto; width:auto;font-size: 10px " onClick="add();"> </input></td>
</tr>
<tr>
<td width="15%" height="5"><input type="button" value="▼" style="height:auto; width:auto ;font-size: 10px" onClick="reduce();"> </input></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
function $(objId)
{
return document.getElementById(objId);
}
var curInput;
var hourMax=23;
var hourMin=00;
function focusInput(obj)
{
curInput=obj.id;
}
function add()
{
var curObj=$(curInput);
var curVal=$(curInput).value*1+1;
if (curInput=="hoInput" && curVal>23)
{
return;
}
if (curInput!="hoInput" && curVal>59)
{
return;
}
if((curVal+"").length==1)
{
curVal="0"+curVal;
}
curObj.value=curVal;
}
function reduce()
{
var curObj=$(curInput);
var curVal=$(curInput).value*1-1;
if (curVal<0)
{
return;
}
if((curVal+"").length==1)
{
curVal="0"+curVal;
}
curObj.value=curVal;
}
</script>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
更多追问追答
追问
鼠标点到小时上，然后按上下按钮就增加小时，点到分上，就增加分。。怎么实现啊，是不是难度有点大啊？有没有代码啊，解决后分可以多给的
追答
比较麻烦的，这个要获取文本框的焦点位置 ，这个想法还没做过..网上搜了下没搜到相关的js方法
建议先换种法方式吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在哪截的图?用谷歌浏览器右键 审查元素,看看他们代码怎么写的,直接复制粘贴过来就行啊,
追问
在本地上传的图片。。。那怎么办？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
追问
有没有代码实现啊？。。可以追加分数的
追答
给你的网页上有详细代码的，点view source，可以查看代码
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
