选择时间（时分）_选择时分-CSDN博客

本文链接：https://blog.csdn.net/qq_30960005/article/details/119331224
选择时间
在这里插入图片描述
<!--
 * @Author: Gavin itxuelei@gmail.com
 * @Date: 2021-08-02 09:23:46
 * @LastEditors: Gavin itxuelei@gmail.com
 * @LastEditTime: 2021-08-02 18:15:40
 * @Description:选择时间
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* //这里是日期控件的css样式  date.css */
    * {
      margin: 0;
      padding: 0;
    }

    #time {
      height: 200px;
      display: flex;
      border: 1px solid #eaeaea;
      box-shadow: 0px 1px 4px #abc;
    }

    #time ul {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow-y: scroll;
      -ms-overflow-style: none;
      overflow: -moz-scrollbars-none;
      scrollbar-width: none;
    }

    #time ul::-webkit-scrollbar {
      width: 0 !important
    }

    #time ul p {
      width: 60px;
      text-align: center;
      border-bottom: 1px solid #eaeaea;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }

    #time ul:nth-child(1) {
      border-right: 1px solid #eaeaea;
    }

    #time ul p:hover {
      cursor: pointer;
      background: rgb(149, 193, 236);
    }

    #time ul .active {
      background: rgb(88, 122, 156) !important;
      color: #ffffff;
    }

    #timeDel {
      width: 20px;
      height: 20px;
    }
  </style>
</head>

<body>
  <input type="time">
  <input type="time">
  <input type="text" id="jj" value="12:24" readonly="readonly" onclick="showTime(event, this);">
  <input type="text" value="14:00" readonly="readonly" onclick="showTime(event, this);">
  <input type="text" value="16:00" readonly="readonly" onclick="showTime(event, this);">
</body>
<script>
  //这里是date.js
  var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;
  var controlid = null;
  var hh = null;
  var mm = null;
  function $$$$(objID) {
    return document.getElementById(objID);
  }
  function _cancelBubble(event) {
    e = event ? event : window.event;
    if (ie) {
      e.cancelBubble = true;
    } else {
      e.stopPropagation();
    }
  }
  //
  function loadcalendar() {
    var h = ``, m = ``
    for (var i = 0; i < 60; i++) {
      var t = i < 10 ? '0' + i : i
      if (i < 24) {
        h += `<p οnclick="refreshcalendar(${t},'h')">${t}</p>`
      }
      m += `<p οnclick="refreshcalendar(${t},'m')">${t}</p>`
    }
    var s = `
      <div id="time" style="display:flex; position:absolute; z-index:9;overflow:hidden;">
        <ul id="h">
          ${h}
        </ul>
        <ul id="m">
          ${m}
        </ul>
      </div>
      <img  id="timeDel" style="display:none;position:absolute;color:red;z-index:10" src="https://img-blog.csdnimg.cn/2022010700303260585.png" />
    `
    var nElement = document.createElement("div");
    nElement.innerHTML = s;
    document.getElementsByTagName("body")[0].appendChild(nElement);
    document.onclick = function (event) {
      $$$$('time').style.display = 'none';
    }
    $$$$('time').onclick = function (event) {
      _cancelBubble(event);
    }
  }
  function getposition(obj) {
    var r = new Array();
    r['x'] = obj.offsetLeft;
    r['y'] = obj.offsetTop;
    while (obj = obj.offsetParent) {
      r['x'] += obj.offsetLeft;
      r['y'] += obj.offsetTop;
    }
    return r;
  }
  function showTime(event, controlid1, addtime1, startdate1, enddate1) {
    // console.log(event, controlid1, addtime1, startdate1, enddate1)
    controlid = controlid1;
    addtime = addtime1;
    var p = getposition(controlid);
    console.log(event, 'pppppp')
    $$$$('time').style.display = 'flex';
    $$$$('time').style.left = p['x'] + 'px';
    $$$$('time').style.top = (p['y'] + 21) + 'px';
    // $$$$('timeDel').style.left = (p['x']+event.target.offsetWidth-20) + 'px';
    // $$$$('timeDel').style.top = (p['y']) + 'px';
    _cancelBubble(event);
    console.log(event.target.value)
    var h = event.target.value.split(':')[0]
    var m = event.target.value.split(':')[1]
    settime(Number(h), 'h')
    settime(Number(m), 'm')
  }
  function refreshcalendar(num, type) {
    // console.log(num,type)
    var ul = document.querySelectorAll('#' + type + ' p')
    // console.log(ul)
    for (var obj of ul) {
      obj.classList.remove("active");
    }
    ul[num].classList.add('active');
    // $$$$('time').style.display = 'none';
    var setT = document.querySelectorAll('#time p.active')
    console.log(setT[0].innerHTML, setT[1].innerHTML, 'setT')
    controlid.value = `${setT[0].innerHTML}:${setT[1].innerHTML}`;
    // alert(controlid.value);
    // change(controlid.value);
  }
  function settime(num, type) {
    console.log(num, type)
    var ul = document.querySelectorAll('#' + type + ' p')
    // console.log(ul)
    for (var obj of ul) {
      obj.classList.remove("active");
    }
    ul[num].classList.add('active');
    var sTop = document.getElementById(type)
    sTop.scrollTop = 33 * num
  }
  loadcalendar()
</script>

</html>