如何用javascript在动态创建的li to输入框中保存时间值

Question

如何用javascript在动态创建的li到输入框中保存时间值我有一个简单的计时器，可以启动、停止、暂停、捕捉时间快照并重置时间快照。时间快照生成并显示在li内的网页中。这一切都很好。我正在努力点击显示的时间快照，并将值放在输入框中，这样我以后就可以将选定的值保存到数据库中。这是我用来将点击的li项目放入输入框的脚本

var items = document.querySelectorAll("#list li");
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
document.getElementById("inptSnap").value = this.innerHTML;
};
}

这是html

<div class="container">
<!--               Different App            -->
<div class="timeDisplay">00:00:00</div>
<button id="begin">Start</button>
<button id="hold">Pause</button>
<button id="end">Stop</button>
<button id="timeSnap">Time Snap</button>
<button id="resetSnap">Reset Time Snap</button>
<ul id="list" class="laps"></ul>
<div>
<input type="text" id="inptSnap" />
</div>
</div>

这是一个完整的定时器脚本，在点击时尝试选择值

var begin = document.getElementById("begin");
begin.addEventListener("click", start);
var end = document.getElementById("end");
end.addEventListener("click", stop);
var hold = document.getElementById("hold");
hold.addEventListener("click", pause);
var timeSnap = document.getElementById("timeSnap");
timeSnap.addEventListener("click", snap);
var timeSnap = document.getElementById("timeSnap");
timeSnap.addEventListener("click", pause);
var resetSnap = document.getElementById("resetSnap");
resetSnap.addEventListener("click", resetSnaps);
var ms = 0,
s = 0,
m = 0;
var timeCounter;
var displayEl = document.querySelector(".timeDisplay");
var lapsContainer = document.querySelector(".laps");
function start() {
if (!timeCounter) {
timeCounter = setInterval(run, 10);
}
}
function run() {
displayEl.textContent = displayTimeCount();
ms++;
if (ms == 100) {
ms = 0;
s++;
}
if (s == 60) {
s = 0;
m++;
}
}
function stop() {
stopTimer();
ms = 0;
s = 0;
m = 0;
displayEl.textContent = displayTimeCount();
}
function stopTimer() {
clearInterval(timeCounter);
timeCounter = false;
}
function pause() {
stopTimer();
}
function displayTimeCount() {
return (
(m < 10 ? "0" + m : m) +
":" +
(s < 10 ? "0" + s : s) +
":" +
(ms < 10 ? "0" + ms : ms)
);
}
function snap() {
if (timeCounter) {
var li = document.createElement("li");
li.innerText = displayTimeCount();
lapsContainer.appendChild(li);
}
}
function resetSnaps() {
lapsContainer.innerHTML = "";
}
// Script to put lap into input box
var items = document.querySelectorAll("#list li");
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
document.getElementById("inptSnap").value = this.innerHTML;
};
}

这是CodePen链接

我将非常感谢任何建议和建议，谢谢

Answer 1

你可以做这样的事情。。。

附言：我认为你的按钮的人体工程学有待审查，我做了一种修改。

const
btStartPause = document.querySelector('#container button:nth-of-type(1)')
, btStopClear  = document.querySelector('#container button:nth-of-type(2)')
, btSnap       = document.querySelector('#container button:nth-of-type(3)')
, snapList     = document.querySelector('ol')
, inptSnap     = document.querySelector('input#inptSnap')
, chrono = ((dZTime='#container time') =>
{
const
displZone  = document.querySelector(dZTime)
, chronoZero = '00:00:00.000'
, one_Sec    = 1000
//, one_Min    = one_Sec * 60
//, one_Hrs    = one_Min * 60
, n_Dgts     = (n,t) => `${t}`.padStart(n,'0')
;
let startTime   = null
, timeElapsed = 0
, pausedTime  = 0
, reqRef      = null
, reqPause    = false
, stoped      = false
;
displZone.textContent = chronoZero
function reqLoop(timeStamp)  // timeStamp is float
{
startTime ??= timeStamp  // Logical nullish assignment (??=)
if (stoped)
{
cancelAnimationFrame(reqRef)
return
}
if (reqPause) 
{ 
pausedTime = (timeStamp - startTime) - timeElapsed;
}
else
{
timeElapsed = ((timeStamp - startTime) - pausedTime) | 0 // get integer part of float
let
Tms = timeElapsed % one_Sec
, tim = (timeElapsed - Tms) / one_Sec
, T_s = tim % 60
, T_m = 0
, T_h = 0
;
tim = (tim - T_s) / 60 
T_m = tim % 60
T_h = (tim - T_m) / 60 
displZone.textContent = `${n_Dgts(2,T_h)}:${n_Dgts(2,T_m)}:${n_Dgts(2,T_s)}.${n_Dgts(3,Tms)}`
}
requestAnimationFrame( reqLoop )
}
const jso =
{ dispSz:      chronoZero.length
, getVal: ()=> displZone.textContent 
, start()      { reqRef   = requestAnimationFrame(reqLoop) }
, pause(OnOff) { reqPause = OnOff }
, stop()       { stoped   = true  }
, RaZ()
{
startTime   = null
timeElapsed = 0
pausedTime  = 0
reqRef      = null
reqPause    = false
stoped      = false
displZone.textContent = chronoZero
}
}
Object.freeze(jso)
return jso
})()
;
btStartPause.onclick =_=>
{
if (btStartPause.classList.toggle('pause') )
{
btStopClear.disabled = false 
if ( btStartPause.dataset.lib !== 'continue' )
{
btStartPause.dataset.lib = 'continue'
chrono.start()
}
else
chrono.pause(false)
}
else
{
btStopClear.disabled = true 
btStopClear.classList.remove('clear') 
chrono.pause(true)
}
}
btStopClear.onclick =_=>
{
if (btStopClear.classList.toggle('clear') )
{
btStartPause.disabled    = true
btStartPause.dataset.lib = 'start'
btStartPause.classList.remove('pause')
chrono.stop()   
}
else
{
btStartPause.disabled = false
btStopClear .disabled = true 
chrono.RaZ()
}
}
btSnap.onclick =_=>
{ 
snapList
.appendChild( document.createElement('li'))
.innerHTML = chrono.getVal() 
+ '<span title="delete"> &#10006; </span>'
+ '<span title="copy"> &#x2398 </span>'
}
snapList.onclick =({target}) =>
{
if (!target.matches('li > span'))
{
inptSnap.value = target.closest('li').textContent.substring(0, chrono.dispSz)
inptSnap.focus()
return
} 
if (target.matches('span[title=delete]'))
{
target.closest('li').remove()
}
if (target.matches('span[title=copy]'))
{
let origin = target.closest('li')
copySomething ( origin.textContent.substring(0, chrono.dispSz), origin )
}
}
async function copySomething(toCopy, el ) 
{
try
{
await navigator.clipboard.writeText(toCopy);
el.classList.add('copyOK')
setTimeout(() => { el.classList.remove('copyOK')}, 1200);
}
catch (err) 
{
el.classList.add('copyBad')
setTimeout(() => { el.classList.remove('copyBad')}, 1200);
console.error('Failed to copy :/', err);
}
}

body {
font-family : Arial, Helvetica, sans-serif;
font-size   : 16px;
}
time {
display        : block;
font-size      : 1.4rem;
margin         : .6rem 1rem;
letter-spacing : .2rem;
}
ol {
list-style : none;
font-size  : 1.6rem;
padding    : 0;
margin     : 1.5rem;
width      : 15rem;
list-style-type: decimal;
}
li {
border    : 1px solid lightblue;
padding   : .3rem .6rem;
position  : relative;
cursor    : pointer;
}
li::marker {
font-size : .9rem;
color     : darkslategray;
}
li span {
float     : right;
margin    : 0 0 0 .3em;
font-size : 1.2rem;
color     : darkslategray;
}
li span[title=delete]:hover {
color     : crimson;
}
li span[title=copy]:hover {
background : white;
color      : darkblue;
}
#container button {
min-width      : 4.4rem;
text-transform : capitalize;
}
#container button:before {
content : attr(data-lib)
}
#container button.pause:before {
content : 'pause'
}
#container button.clear:before {
content : 'clear'
}
li:hover {
background : lightblue;
}
li.copyOK::after,
li.copyBad::after {
position   : absolute;
display    : block;
font-size  : .8rem;
top        : 1.2rem;
left       : 11rem;
padding    : .1rem .2rem;
}
li.copyOK::after {
content    : 'copied';
background : lightgreen;
}
li.copyBad::after {
left       : 1rem;
content    : 'Failed to copy :/';
background : lightcoral;
}

<input type="text" id="inptSnap" >
<hr>
<div id="container">
<time datetime="00:00:00.000">00:00:00.000</time>
<button data-lib="start"><!-- start / continue / pause --></button>
<button data-lib="stop" disabled><!-- stop / clear --></button>
<button>snap</button>
</div>
<ol></ol>

获取信息：用javascript将浮点转换为int的最快方法是什么？

Answer 2

所以我知道你需要一个位置值之类的东西。

var begin = document.getElementById("begin");
begin.addEventListener("click", start);
var end = document.getElementById("end");
end.addEventListener("click", stop);
var hold = document.getElementById("hold");
hold.addEventListener("click", pause);
var timeSnap = document.getElementById("timeSnap");
timeSnap.addEventListener("click", snap);
var timeSnap = document.getElementById("timeSnap");
timeSnap.addEventListener("click", pause);
var resetSnap = document.getElementById("resetSnap");
resetSnap.addEventListener("click", resetSnaps);
var ms = 0,
s = 0,
m = 0;
var timeCounter;
var displayEl = document.querySelector(".timeDisplay");
var lapsContainer = document.querySelector(".laps");
function start() {
if (!timeCounter) {
timeCounter = setInterval(run, 10);
}
}
function run() {
displayEl.textContent = displayTimeCount();
ms++;
if (ms == 100) {
ms = 0;
s++;
}
if (s == 60) {
s = 0;
m++;
}
}
function stop() {
stopTimer();
ms = 0;
s = 0;
m = 0;
displayEl.textContent = displayTimeCount();
}
function stopTimer() {
clearInterval(timeCounter);
timeCounter = false;
}
function pause() {
stopTimer();
}
function displayTimeCount() {
return (
(m < 10 ? "0" + m : m) +
":" +
(s < 10 ? "0" + s : s) +
":" +
(ms < 10 ? "0" + ms : ms)
);
}
function snap() {
if (timeCounter) {
var input = document.createElement("input");
input.value = displayTimeCount();
lapsContainer.appendChild(input);
}
}
function resetSnaps() {
lapsContainer.innerHTML = "";
}
// Script to put lap into input box
var items = document.querySelectorAll("#list li");
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
document.getElementById("inptSnap").value = this.innerHTML;
};
}

.timeDisplay {
font-size: 32px;
}
ul li {
list-style: none;
font-size: 32px;
}
.container {
width: 400px;
margin: auto;
}

<div class="container">
<!--               Different App            -->
<div class="timeDisplay">00:00:00</div>
<button id="begin">Start</button>
<button id="hold">Pause</button>
<button id="end">Stop</button>
<button id="timeSnap">Time Snap</button>
<button id="resetSnap">Reset Time Snap</button>
<ul id="list" class="laps">

</ul>
<div>
<input type="text" id="inptSnap" />
</div>
</div>