✍ 📁 🙈 🙉 🙊

input range

input range option label
input range拖動實時觸發事件

<pre>

<<c>datalist id="tickmarks">
    <<c>option value="0" > 0  <<c>/option>
    <<c>option value="20"> 20 <<c>/option>
    <<c>option value="40"> 40 <<c>/option>
    <<c>option value="60"> 60 <<c>/option>
    <<c>option value="80"> 80 <<c>/option>
    <<c>option value="100">100<<c>/option>
  <<c>/datalist>

<<c>input type="range"  step="10" list="tickmarks" 
       oninput="volumeBox.innerHTML=this.value">
<<c>span id="volumeBox" >50<<c>/span>

<<c>style>
   input { width:400px }
<<c>style>
</pre>

<pre>
<<c>datalist id="tickmarks">
    <<c>option value="0" > 0  <<c>/option>
    <<c>option value="20"> 20 <<c>/option>
    <<c>option value="40"> 40 <<c>/option>
    <<c>option value="60"> 60 <<c>/option>
    <<c>option value="80"> 80 <<c>/option>
    <<c>option value="100">100<<c>/option>
  </datalist>
<<c>input type="range"  step="10" list="tickmarks" 
       oninput="volumeBox.innerHTML=this.value">
<<c>span id="volumeBox" >50<<c>/span>

<<c>style>
input[type=range]{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 30px;  height: 300px; }
<<c>/style>

</pre>

input  {cursor:pointer;}
pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
b{font-size:30px;color:blue;} 
r{font-size:20px;color:red;} 
</style

<div id="co">
<style>
#range { width:200px;border: 1px solid black; 
         transform-origin: 100px 100px;
         -webkit-transform: rotate(-90deg);
         -ms-transform: rotate(-90deg);
         transform: rotate(-90deg); }

#range input { width:99%;margin: -15px 0 0 0;height:55px;}

#volumeBox { width:410px;font-size: 15px;
             margin: -25px 0 0  200px;
             transform-origin: -210px -165px;
             transform: rotate(90deg);    position: absolute; }

#tickmarks { width:103%;margin: 0 0 0 0;display: flex;}

#tickmarks option{width:410px;font-size: 15px;
                  transform-origin: 10px 10px;
                  transform: rotate(90deg); }
</style>

<input type="range"  step="10" list="tickmarks" oninput="showVal(this.value)">
<span id="volumeBox" >50</span>
</div>
  
<script>
function showVal(newVal){
  document.getElementById("volumeBox").innerHTML=newVal;
}
</script>

</div>

<!DOCTYPE html>
<style>
#range { width:400px;border: 1px solid black;}

#range input {width:99%;-webkit-appearance: none;  
              background: rgba(0%,0%,0%,0);
              margin: 0 0 0 0;display: flex;height:20px;}

#tickmarks{ width:103%;margin: 0 0 0 0;display: flex;}

#tickmarks option{width:410px;font-size: 15px;}

input[type=range]:focus { outline: none;}
/* --------------- Google Chrome ------------------ */
#range input::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  background: #fff;
  border: 1px solid #39404D; }

#range input::-webkit-slider-thumb {
border: 3px solid black;
border-radius:50px 50px 0px 0px;
background-color: coral;
height:25px;
width: 20px;
cursor: pointer; 
-webkit-appearance: none;margin: -15px 0 0 0;}
/* --------------- Firefox ------------------ */
#range input::-moz-range-track {
  width: 100%;
  height: 3px;
  background: #fff;
  border: 1px solid #39404D
}
#range input::-moz-range-thumb {
border: 3px solid black;
border-radius:50px 50px 0px 0px;
background-color: coral;
height:25px;
width: 10px;
cursor: pointer; 
-moz-appearance: none;}
/* --------------- Microsoft Edge ------------------ */
input[type=range]::-ms-track {
   width: 100%;
   height: 3px;
   background: #fff;
   border: 1px solid #39404D;}
#range input::-ms-thumb {
    border: 1px solid black;
    border-radius:50px 50px 0px 0px;
    background-color: coral;
    height:20px;
    width: 15px;
    cursor: pointer; margin: 1px 0 0 0;
    -webkit-appearance: none;}
#range input::-ms-fill-lower {
  background: #fff;height:2px;
  border: 1px solid #39404D;
  border-radius: 2px;
}
#range input::-ms-fill-upper {
  background: #fff;height:2px;
  border: 1px solid #39404D;
  border-radius: 2px;
}
</style>

<div id="range">
   <datalist id="tickmarks">
    <option value="0" >0</option>
    <option value="10"></option>
    <option value="20">20</option>
    <option value="30"></option>
    <option value="40">40</option>
    <option value="50"></option>
    <option value="60">60</option>
    <option value="70"></option>
    <option value="80">80</option>
    <option value="90"></option>
    <option value="100">100</option>
  </datalist>
<input type="range"  step="10" list="tickmarks" oninput="showVal(this.value)">
<span id="volumeBox" >50</span>
<div>
  
<script>
function showVal(newVal){
  document.getElementById("volumeBox").innerHTML=newVal;
}
</script>

<!DOCTYPE html>
<style>
#range { width:400px;border: 1px solid black;}

#range input {width:99%;-webkit-appearance: none;  
              background: rgba(0%,0%,0%,0);
              margin: 0 0 0 0;display: flex;height:20px;}

#tickmarks{ width:103%;margin: 0 0 0 0;display: flex;}

#tickmarks option{width:410px;font-size: 15px;}

#range input:focus { outline: none;}
/* --------------- Google Chrome ------------------ */
#range input::-webkit-slider-runnable-track {
  width: 100%  ;  height: 3px;
  background: #fff;
  border: 1px solid #39404D;
}
#range input::-webkit-slider-thumb {
      width: 0  ;  height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 30px solid #232323;
      cursor: pointer; 
      -webkit-appearance: none; margin: -15px 0 0 0;}
/* --------------- Firefox ------------------ */
#range input::-moz-range-track {
width: 0  ;  height: 0;
}
#range input::-moz-range-thumb {
width: 0  ;  height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid #232323;
cursor: pointer; 
-webkit-appearance: none  ; margin: -15px 0 0 0;}
/* --------------- Microsoft Edge ------------------ */
#range::-ms-track {
   width: 100%  ;  height: 3px;
   background: #fff  ;  border: 1px solid #39404D;}

#range input::-ms-thumb {
width: 0  ;  height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid #232323;
cursor: pointer;

-webkit-appearance: none; margin: 7px 0 0 0;}
#range input::-ms-fill-lower {
  background: #fff;height:2px;
  border: 1px solid #39404D;
  border-radius: 2px;
}
#range input::-ms-fill-upper {
  background: #fff;height:2px;
  border: 1px solid #39404D;
  border-radius: 2px;
}
</style>

Edit

#html input range option label #html input range拖動實時觸發事件

script setInterval

setInterval() / clearInterval()
method calls a function at specified intervals
方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

<<c>script>
var txt="" , ii=0;
if(Stop){ clearInterval(myInterval) }
var Stop = setInterval(TX, 1000);

function TX() {
ii++ ;  
txt += " [RUN " + ii +"] " ;
demo.innerHTML = txt ;   
  if(ii > 19){ clearInterval(Stop) ;
               demo.innerHTML += " clearInterval(Stop)";}
}            
<<c>/script>
result :</pre>
<span id="demo"></span>

function TX() {
ii++ ;  
txt += " [RUN " + ii +"] " ;
demo.innerHTML = txt ;   
  if(ii > 19){ clearInterval(Stop) ;
               demo.innerHTML += " clearInterval(Stop)";}
}            
</script>

Edit

#html #網頁格式 #script #style #div #script 延遲執行 setInterval(), #script 延遲執行 clearInterval(), #script setInterval() #script clearInterval(),

CSS position: fixed

position 屬性指定了元素的定位類型

<div id="MD">  
<div id="div1" >position<br>fixed <br>
                top:10px<br> left:10px</div> 
<div id="div2" >position<br>fixed <br>
                top:10px right:10px</div> 
<div id="div3" >position<br>fixed <br>
                bottom:10px<br> left:150px </div> 
<div id="div4" >position<br>fixed <br>
                bottom:10px<br> right:350px  </div>

<pre>
<<c>style> 
#div1 {position:fixed ;
       top:10px ; left:10px; }
#div2 {position:fixed;
       top:10px ; right:10px;   }
#div3 {position:fixed ;
       bottom:10px ; left:10px; }
#div4 {position:absolute ;
       bottom:10px ; right:10px; }
<<c>/style></pre>

</div>

#div1,#div2,#div3,#div4,#div5 { width:100px ; height:100px;
                                background: gray;
                                color:white } 
#div1 {position:fixed ;
       top:10px ; left:10px; }
#div2 {position:fixed;
       top:10px ; right:10px;   }
#div3 {position:fixed ;
       bottom:10px ; left:10px; }
#div4 {position:absolute ;
       bottom:10px ; right:10px; }
</style>

<style>

<!DOCTYPE html>
<html>
<head>
<style>
.outerDiv {float:left;
  position: relative;
  width: 300px ;
  height: 400px ;
  border: 3px solid #73AD21;
}

.innerDiv{
  position: absolute ;
  bottom: 10px;
  right:  10px;
  width:  100px;
  height: 100px;
  border: 3px solid #73AD21;
}
</style>

<div class="outerDiv">outerDiv 
   <div class="innerDiv">innerDiv</div>
</div>

<pre>
 <<c>div class="outerDiv">outerDiv 
    <<c>div class="innerDiv">
          innerDiv<<c>/div>
 <<c>/div>

<<c>style>
   .outerDiv { <r>position: relative;</r> }

.innerDiv {<r> position: absolute;
               bottom: 10px;
               right:  10px; </r>}
 <<c>/style>

</pre>

Edit

#html #網頁格式 #script #style #div #script 延遲執行 setTimeou #script setTimeou #script clearTimeout

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

input range

input range option label
input range拖動實時觸發事件

script setInterval

setInterval() / clearInterval()
method calls a function at specified intervals
方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

CSS position: fixed

position 屬性指定了元素的定位類型

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

input range

input range option labelinput range拖動實時觸發事件

script setInterval

setInterval() / clearInterval() method calls a function at specified intervals 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

CSS position: fixed

position 屬性指定了元素的定位類型

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

input range option label
input range拖動實時觸發事件

setInterval() / clearInterval()
method calls a function at specified intervals
方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。