<html>
<head>
<meta charset=UTF-8>
<title>Nothing</title>
<style type="text/css">
div.outer {
margin: auto;
width: 30%;
}
input[type=text].txt {
border: 5px solid blue;
font-weight: bolder;
}
.line {
display: inline;
}
.time {
font: 20px Consolas, 微软雅黑;
color: red;
}
div.x {
font: 20px Consolas, 微软雅黑;
}
div.x {
font: 20px Consolas, 微软雅黑;
cursor: pointer;
}
div.x:hover {
color: cyan;
}
div.high {
margin: -34px 0px 0px 275px;
}
div.low {
margin: -5px 0px 0px 275px;
}
</style>
<script type="text/javascript">
onload = function ()
{
var txt = document.querySelector (".txt");
var high = document.querySelector (".high");
var low = document.querySelector (".low");
var funny = function (isHigh)
{
if (txt.value === "")
{
txt.value = "09:00";
}
else
{
var hour = parseFloat (txt.value.split (":")[0]);
if (isHigh)
{
hour++;
hour = hour > 23 ? 0 : hour;
}
else
{
hour--;
hour = hour < 0 ? 23 : hour;
}
hour = /^\d$/.test (hour) ? "0" + hour : hour;
txt.value = hour + ":00";
}
};
high.onclick = function ()
{
funny (1);
};
low.onclick = function ()
{
funny ();
};
}
document.onselectstart = function ()
{
return false;
};
</script>
</head>
<body>
<div class="outer">
<div class="line time">送货时间：</div>
<div class="line wrap">
<input class="txt" type="text" readonly="readonly" />
<div class="x high">+</div>
<div class="x low">-</div>
</div>
</div>
</body>
</html>
温馨提示：答案为网友推荐，仅供参考