itsterit
-
Posts
4 -
Joined
-
Last visited
itsterit's Achievements
Explorer (1/14)
0
Reputation
-
работа type="time" и вывод установленного времени в консоль
itsterit posted a question in HTML Coding
Здравствуйте, как там ваше ничего?)) А я вот пришел со своими тараканами в виде: <!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. -
спасибо разобрался. скажите ,пожалуйста, как в данном (уже рабочем) коде избавиться от вывода кликов <p> </p> если просто его оттуда "вырезать", то код просто отказывается работать
-
Я извиняюсь, но это ничего не говорит мне🙈. Т.е есть код, и он каким то магическим образом отправляет на сервер значение слайдера, которое я отслеживаю с сервера. Вот, возможно ли этим же методом отправить ,скажем, иное число при нажатии на кнопку? А грузить сервер ещё чем то лишним, в роли которого выступает esp8266, не очень хочется. спасибо😍
-
itsterit changed their profile photo
-
Здравствуйте товарищи, приношу извинения за некомпетентность в познании HTML, но надо же с чего-то начинать) значит, не мог бы кто переделать код таким образом, чтобы при нажатии на кнопку отправлялся на сервер, скажем, файл-некая цифра, ТЕМ ЖЕ ОБРАЗОМ КАК И ПРИ РАБОТЕ СО СЛАЙДЕРОМ. т.е нажимаем на кнопку и на сервер происходит отправка методом GET. <!DOCTYPE HTML><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ESP Web Server</title> <style> .light { text-shadow: #ffffff 0 0 10px; /* Свечение голубого цвета */ color: #ffffff ; } a{ margin-left: 100px; margin-right: 100px; width: 100px; height: 100px; border-radius: 5px; background: #ffffff; } html {font-family: Arial; display: inline-block; text-align: center;} h2 {font-size: 2.3rem;} p {font-size: 1.9rem;} body { max-width: 400px; margin:0px auto; padding-bottom: 25px; width: 100%; /* Ширина таблицы в процентах */ background: linear-gradient(-45deg, #ff4500, #4200ff) fixed; color: #ffffff; font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 10px; background: #FFD65C; outline: none; -webkit-transition: .2s; transition: opacity .2s;border-radius: 10px; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #ff4500; cursor: pointer;border-radius: 35px; } .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; border-radius: 35px; background: #7600ff; width: 20px; height: 20px; } </style> </head> <body> <h2 class="light">ESP Web Server</h2> <p><span id="textSliderValue">%SLIDERVALUE%</span></p> <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="1023" value="%SLIDERVALUE%" step="1" class="slider"></p> <a id="switch" href="#">clic</a> <script> function updateSliderPWM(element) { var sliderValue = document.getElementById("pwmSlider").value; document.getElementById("textSliderValue").innerHTML = sliderValue; console.log(sliderValue); var xhr = new XMLHttpRequest(); xhr.open("GET", "/slider?value="+sliderValue, true); xhr.send(); } </script> <script> //дожидаемся полной загрузки страницы window.onload = function () { //получаем идентификатор элемента var a = document.getElementById('switch'); //вешаем на него событие a.onclick = function() { //производим какие-то действия if (this.innerHTML=='On') this.innerHTML = 'Off'; else this.innerHTML = 'On'; xhr.open("GET", 78, true); xhr.send(); //предотвращаем переход по ссылке href return false; } } </script> </body> </html зы. Я делать это уже просто устал. зы2. мне этот код нужен, дабы сервер из ESPшки принял GET и выполнил условие(выключил светодиод).