работа type="time" и вывод установленного времени в консоль

itsterit · June 12, 2021

Здравствуйте, как там ваше ничего?)) А я вот пришел со своими тараканами в виде:

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ESP Web Server</title>

    <style type="text/css">
        body,
        html {
            margin: 0;
            overflow-x: hidden;
        }

        p {
            font-size: 1.9rem;
        }

        div {
            position: relative;
        }

        svg {
            width: 24px;
            top: 12px;
            position: absolute;
        }

        .container {
            padding: 0;
            overflow: hidden;
            min-height: 100vh;
            background: linear-gradient(to top, #29D2CA, #009DFE);
        }

        .ground {
            position: absolute;
            width: 80%;
            height: 80%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #0a0e31;
            border: 1px solid #a700ff;
            border-radius: 10px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15);
        }

        /*—--buttons_p——*/
        .buttons_previous {
            position: absolute;
            left: 0;
            bottom: 50%;
            transform: translate(0, 50%);
        }

        .buttons_previous>div {
            height: 50px;
            width: 24px;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .buttons_previous>div:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        /*—--buttons_n——*/
        .buttons_next {
            position: absolute;
            right: 0;
            bottom: 50%;
            transform: translate(0, 50%);

        }

        .buttons_next>div {
            height: 50px;
            width: 24px;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .buttons_next>div:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        /*—--button——*/
        .button_previous {
            padding-left: 10px;
        }

        .button_next {
            padding-right: 10px;
        }

        #slides {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
            list-style-type: none;
        }

        .slide {
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 1;
            font-size: 40px;
            /*    padding: 40px;*/
            color: #fff;
            background-size: cover;
            /* для анимации
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
*/

        }

        .showing {
            opacity: 1;
            z-index: 2;
        }

        .blocktext {
            font-size: 1.9rem;
            text-align: center;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="ground">
            <ul id="slides">
                <li class="slide showing">
                    <h1 class="blocktext">
                        current settings
                    </h1>
                    <p class="slider_position"></p>
                </li>
                <li class="slide">
                    <h2 class="blocktext">
                        first lesson
                    </h2>

                    <div class="blocktext">
                        <p><span id="textSliderValue"></span></p>
                        <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="000" max="2359"
                                value="%SLIDERVALUE%" step="1" class="slider"></p>

                                <label for="startTime">Start time: </label>
                                <input type="time" id="startTime" ">

                                <p>
                                    Value of the <code>time</code> input: <code>
                                            "<span id="value">n/a</span>"</code>.
                                  </p>

                    </div>
                </li>
                <li class="slide">
                    <p class="blocktext">
                        Temp(C): <span id="adc_val">0</span><br><br>
                    </p>
                </li>
                <li class="slide">
                    <P class="blocktext">
                        slide4
                    </P>
                </li>
                <li class="slide">
                    <P class="blocktext">
                        slide5
                    </P>
                </li>
                <li class="slide">
                    <P class="blocktext">
                        slide6
                    </P>
                </li>
                <li class="slide">
                    <P class="blocktext">
                        slide7
                    </P>
                </li>
                <li class="slide">
                    <P class="blocktext">
                        slide8
                    </P>
                </li>
                <li class="slide">
                    <P class="blocktext">
                        slide9
                    </P>
                </li>
            </ul>
        </div>


        <div class="buttons_previous">

            <div id="previous" class="button_previous">
                <svg xmlns='http://www.w3.org/2000/svg' fill='#a700ff' viewBox='0 0 8 8'>
                    <path d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z' />
                </svg>
            </div>

        </div>

        <div class="buttons_next">
            <div id="next" class="button_next">
                <svg xmlns='http://www.w3.org/2000/svg' fill='#a700ff' viewBox='0 0 8 8'>
                    <path d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z' />
                </svg>
            </div>
        </div>

    </div>

    <!-- ОБНОВЛЕНИЕ sliderValue -->
    <script>
        setInterval(function () {
            setsliderValue();
        }, 1);
        function setsliderValue() {
            var sliderValue = document.getElementById("pwmSlider").value;
            document.getElementById("textSliderValue").innerHTML = sliderValue;
        }
    </script>

    <!-- ОТПРАВКА sliderValue -->
    <script>
        function updateSliderPWM(element) {
            var sliderValue = document.getElementById("pwmSlider").value;
            document.getElementById("textSliderValue").innerHTML = sliderValue;
            console.log(sliderValue % 100);
            input.min = sliderValu;
            /*
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/slider?value=" + sliderValue, true);
            xhr.send();
            */
        }
    </script>

<!-- *************************************************************************************** -->

<!-- ОБНОВЛЕНИЕ sliderValue2 -->
<script>
var startTime = document.getElementById("startTime");
var valueSpan = document.getElementById("value");
var timeControl = document.querySelector('input[type="time"]');
timeControl.value = '08:30';



startTime.addEventListener("input", function() {
  valueSpan.innerText = startTime.value;
  console.log(hour);
}, false);


</script>

<!-- *************************************************************************************** -->

    <!-- ЗАПРОС С СЕРВЕРА -->
    <!--script>
        setInterval(function () {
            getData();
        }, 2000);
        function getData() {
            var xhr = new XMLHttpRequest();
            xhr.onload = function () {
                if (xhr.status === 200) {
                    document.getElementById("adc_val").innerHTML =
                        xhr.response;
                }
            }
            console.log();
            /*            xhr.onreadystatechange = function () {
                            if (this.readyState == 4 && this.status == 200) {
                                document.getElementById("adc_val").innerHTML =
                                    this.responseText;
                            }
                        };*/
            xhr.open("GET", "adcread", true);
            xhr.send();
        }
    </script-->

<!-- *************************************************************************************** -->

    <!-- ПРОСМОТР СЛАЙДОВ -->
    <script>
        var slides = document.querySelectorAll('#slides .slide');
        var currentSlide = 0;
        var slideInterval = setInterval;
        function nextSlide() {
            goToSlide(currentSlide + 1);
        }
        function previousSlide() {
            goToSlide(currentSlide - 1);
        }
        function goToSlide(n) {
            slides[currentSlide].className = 'slide';
            currentSlide = (n + slides.length) % slides.length;
            slides[currentSlide].className = 'slide showing';
        }
        var next = document.getElementById('next');
        var previous = document.getElementById('previous');
        next.onclick = function () {
            nextSlide();
        };
        previous.onclick = function () {
            previousSlide();
        };
    </script>
</body>

</html>

суть проблемы заключается в том что я хочу вытащить отдельно часы и минуты из:

<input type="time" id="startTime" ">

но это мне сделать не удается(

ЗЫ. сайт отправится не на сервер, а на микроконтроллер есп8266.

Igor Schnaider · June 12, 2021

Как вариант:

const [, h, m] = startTime.value.match(/(\d+):(\d+)/);

Sign In

работа type="time" и вывод установленного времени в консоль

Question

itsterit

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Igor Schnaider

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information