用于输入时间的Javascript代码[重复]
Posted
技术标签:
【中文标题】用于输入时间的Javascript代码[重复]【英文标题】：Javascript code for inputing a time [duplicate] 【发布时间】：2016-12-04 11:24:40 【问题描述】：我结合了Carlos 给出的javascript 示例，它的目的是类似于jstimepicker。我需要它只是 jstimepicker 不做的几分钟和几秒钟。在空白 php 页面中的代码适用于一个文本框，但不适用于第二个框。什么不工作？
因此，使按钮类型特别按钮确实修复了提交，但仍然无法正常工作，因为即使使用固定代码，它似乎也不想要第二个输入。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="test.php" method="post">
<div class="dropdown" style="float:left;">
<label>Start Time</label>
<input class="btn btn-default dropdown-toggle" type="text" data-toggle="dropdown" id="screen">
<span class="caret"></span>
<ul class="dropdown-menu">
<li>
<div id="keypad">
<?php $end=59; //min $rows=ceil($end/6); $x=0; $start=0; ?>
<table>
<h6>minutes</h6>
<button type="button">:</button>
<?php while($x<=$rows) echo "<tr>"; for ($y=0 ; $y < 6; $y++, $start++) if ($start <=$ end) echo "<td width=\"30px\ ">"; echo "<button id=\"number\ " type=\"button\ " style=\"width:30px; \ ">"; echo $start; echo "</button>"; echo "</td>"; echo
"</tr>"; $x++; ?>
</table>
</div>
</li>
</ul>
</div>
<!-- second dropdown menu: -->
<div class="dropdown" style="float:left;">
<label>End time</label>
<input class="btn btn-default dropdown-toggle" type="text" data-toggle="dropdown" id="screen_end">
<span class="caret"></span>
<ul class="dropdown-menu">
<li>
<div id="keypad2">
<?php $end=59; //seconds $rows=ceil($end/6); $x=0; $start=0; ?>
<table>
<h6>minutes / seconds</h6>
<button>:</button>
<?php while($x<=$rows) echo "<tr>"; for ($y=0 ; $y < 6; $y++, $start++) if ($start <=$ end) echo "<td width=\"30px\ ">"; echo "<button id=\"number\ " type=\"button\ " style=\"width:30px; \ ">"; echo $start; echo "</button>"; echo "</td>"; echo
"</tr>"; $x++; ?>
</table>
</div>
</li>
</ul>
</div>
<input type="submit">
</form>
<script type='text/javascript'>
//<![CDATA[
window.onload = function()
var screen = document.getElementById('screen'),
keypad = document.getElementById('keypad'),
buttons = keypad.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++)
buttons[i].onclick = function()
screen.value = screen.value + this.innerHTML;
return false;
;
;
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
window.onload = function()
var screen_end = document.getElementById('screen_end'),
keypad2 = document.getElementById('keypad2'),
buttons = keypad.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++)
buttons[i].onclick = function()
screen_end.value = screen_end.value + this.innerHTML;
return false;
;
;
//]]>
</script>
</div>
</body>
</html>
【问题讨论】：
我猜问题出在页面底部的 javascript 上，我使用了两个，每个文本输入框一个。我真的不明白这是否正确。 【参考方案1】：这里的代码有几个问题：
不重要的：
-
由于您的
DOCTYPE 表示HTML5，因此您的<script> 元素上不需要type='text/javascript' 属性。
此外，您不需要 //<![CDATA[ 生产。
整个页面的 ID 必须是唯一的。考虑将 for 循环的索引添加到 id。
这些并不是造成问题的原因，而是很好的做法。
重要的东西：
-
导致您出现问题的原因是您的第二个
<script> 覆盖了您为 window.onload 定义的函数
相反，将这两者结合在一个函数中。
window.onload = function ()
var screen = document.getElementById('screen'),
keypad = document.getElementById('keypad'),
buttons = keypad.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++)
buttons[i].onclick = function()
screen.value = screen.value + this.innerHTML;
return false;
;
var screen_end = document.getElementById('screen_end'),
keypad2 = document.getElementById('keypad2'),
buttons2 = keypad2.getElementsByTagName('button');
for (var j = 0; j < buttons2.length; j++)
buttons2[j].onclick = function()
screen_end.value = screen_end.value + this.innerHTML;
return false;
;
;
但是请注意，在您的第二个window.onload 中，您已经声明了keypad2，但是当您获得buttons 时，您在keypad 下寻找按钮而不是keypad2。我在上面进行了更改，并为第二个 buttons 集合定义了一个新变量。
【讨论】：
谢谢，window.onload 是我不理解这个过程的地方，我知道应该如何处理。再次感谢您的回答。【参考方案2】：
所有按钮的 ID 相同，尝试为每个按钮设置不同的 ID 或使用类。
【讨论】：
以上是关于用于输入时间的Javascript代码[重复]的主要内容，如果未能解决你的问题，请参考以下文章
Javascript getElementById() 适用于文本框，但不适用于单选按钮或下拉选择器 [重复]