✍ 📁 🙈 🙉 🙊

2024年3月20日星期三

CSS word-wrap

<h3>CSS overflow 控制捲軸</h3>

<pre>
捲軸控制在網頁設計上算是滿常碰到的問題，尤其當 div 排版法漸成為主流時， 
善用 ccs overflow 就能有效的的掌握各種捲軸效果。

overflow:       控制當內容超過顯示區域時捲軸的顯示，
overflow-x:     x捲軸的顯示。
overflow-y:     y捲軸的顯示。

捲軸顯示有四種狀態 ﹕
visible(預設):內容完全顯示不嵌入顯示區域。
auto:內容嵌入顯示區域，並視情況顯示水平與垂直捲軸。
scroll:內容嵌入顯示區域，水平捲軸會出現但視情況顯示可捲動或不可捲動。
hidden:內容嵌入顯示區域，捲軸不會出現。</pre>

<table border="1" style="width:100%">
<tbody><tr><td style="width:50%">
<div id="overflow" >
<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-IpFKbErhPeVG1R6S23rHkucs4A5KK_oq_uAcCSAT0_LF-o1r-HcfCOU7uqruFbQ5VsnnIXshygbOJCu1vDcptJIc8vVUtxacrb6hIThyphenhypheng5pdUo6cluBfAcZmsL7iIrmjSxv89KtB2aFH/s300/inCollage_20191124_173415963_mh1574588854008.jpg"  />
</div>
</td><td>
<div id="DDf">
<select onchange="Change(this.value)">
   <option value="visible" >overflow:visible</option>
   <option value="hidden"  >overflow:hidden</option>
   <option value="auto" >overflow:auto </option>
   <option value="scroll" >overflow:scroll</option>
   <option value="overflow-x:hidden" >overflow-x:hidden</option>
   <option value="overflow-y:hidden" >overflow-y:hidden</option>
</select>

<pre>
<<c>style>
#outerDiv{ overflow :<span id="span1">visible</span>
           overflowx:<span id="span2">visible</span>  
           overflowy:<span id="span3">visible</span> }

<<c>/style>
</pre>
</div>
</td></tr></tbody></table>

if(x == "overflow-y:hidden"){ overflow.style.overflow='scroll' ;
                              overflow.style.overflowY='hidden' ; }

span1.innerHTML = overflow.style.overflow;
span2.innerHTML = overflow.style.overflowX;
span3.innerHTML = overflow.style.overflowY;

}

</script>

#overflow{ height:200px;width:200px;
           padding:5px;
           border: 3px solid black;
           overflow:visible }

//#DDf{position: fixed;
//top:10px ; left:350px}

input  {cursor:pointer;}

pre { font-size: 18px ;
      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+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

<h3>CSS 文字換行技巧<br>word-break、word-wrap</h3>

<br><br>
<label class="container">
  <input type="radio" name="S1" checked onchange="change(1)">
          word-break: normal</label>
<br>
<label class="container">
  <input type="radio" name="S1" onchange="change(2)" >
          word-break: break-all</label>
<br>

<label class="container">
  <input type="radio" name="S1" onchange="change(3)" >
          word-break: keep-all</label>
<br>
<label class="container">
  <input type="radio" name="S1" onchange="change(4)" >
          word-wrap: normal</label>
<br> 
<label class="container">
  <input type="radio" name="S1" onchange="change(5)" >
          word-wrap: break-word</label>

<div id="DPP" class="narrow">
<br>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" 
<br><br>
123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
<br><br>
𝓐𝓑𝓒𝓓𝓔𝓕𝓖𝓗𝓘𝓙𝓚𝓛𝓜𝓝𝓞𝓟𝓠𝓡𝓢𝓣𝓤𝓥𝓦𝓧𝓨𝓩𝓪𝓫𝓬𝓭𝓮𝓯𝓰𝓱𝓲𝓳𝓴𝓵𝓶𝓷𝓸𝓹𝓺𝓻𝓼𝓽𝓾𝓿𝔀𝔁𝔂𝔃</div>

if(x==1){ DPP.className="A1" }
if(x==2){ DPP.className="A2" }
if(x==3){ DPP.className="A3" }
if(x==4){ DPP.className="A4" }
if(x==5){ DPP.className="A5" }

}

</script>

.container{font-size: 20px;}

#DPP {
  padding: 10px;
  border: 1px solid;
  width: 400px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px; }

.A1{word-break: normal;}

.A2{word-break: break-all;}

.A3{word-break: keep-all;}

.A4{word-wrap: normal;}

.A5{word-wrap: break-word;}

</style>

Edit

#word-break #word-wrap #word-break: normal #word-break: break-all #word-break: keep-all #word-wrap: normal #word-wrap: break-word #CSS 文字換行技巧 #CSS overflow #CSS 控制捲軸 #CSS overflow #CSS overflow-x #CSS overflow-y #CSS overflow :visible

2024年3月2日星期六

JSON format

<pre>
以 JavaScript 物件表示一筆資料
        var obj = [ {"AA":"11", "BB":"22", "CCC":"33" },
                    {"BB":"1", "CC":"2" }];</pre>
<table border="1"width="100%" >
<tr><td>
1</td><td>
var obj </td><td>得出二個物件 <c id="D1"></c> 
</td></tr><tr><td>
2</td><td>
JSON.stringify(obj)</td><td> 得出字串化 
   <c id="D2"></c>
</td></tr><tr><td>

3</td><td>
obj.length </td><td>得出長度 <c id="D3"></c>
</td></tr><tr><td>

4</td><td>
Object.keys(obj).length </td><td>得出長度 <c id="D4"></c>
</td></tr><tr><td>

5</td><td> 
Object.keys(obj[0]).length </td><td>得出長度 <c id="D5"></c>
</td></tr><tr><td>

6</td><td> 
Object.keys(obj[1]).length </td><td>得出長度 <c id="D6"></c>
</td></tr><tr><td>

7</td><td> 
JSON.stringify(obj[0]) </td><td>得出 <c id="D7"></c>
</td></tr><tr><td>

8</td><td> 
JSON.stringify(obj[1]) </td><td>得出 <c id="D8"></c>
</td></tr><tr><td>

9</td><td> 
obj[0].AA </td><td>得出 <c id="D9"></c>
</td></tr><tr><td>

10</td><td>
obj[0].BB </td><td>得出 <c id="D10"></c>
</td></tr><tr><td>

11</td><td>
obj[1].BB </td><td>得出 <c id="D11"></c>

</td></tr></table>

D1.innerHTML= obj ;
D2.innerHTML= JSON.stringify(obj) ;
D3.innerHTML= obj.length ;
D4.innerHTML= Object.keys(obj).length ; 
D5.innerHTML= Object.keys(obj[0]).length ;
D6.innerHTML= Object.keys(obj[1]).length ;
D7.innerHTML= JSON.stringify(obj[0]) ;  
D8.innerHTML= JSON.stringify(obj[1]) ;  
D9.innerHTML= obj[0].AA ;  
D10.innerHTML= obj[0].BB ;  
D11.innerHTML= obj[1].BB ;

</script>

Edit

2023年4月6日星期四

HTML Table

<table>標簽定義 HTML 表格。

<bb><<c>table rules=" rows/cols/all/none" ></bb><br><br>

<table rules="rows" style="width:95%" >
<caption><<c>table rules="rows" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</td><td>

<table rules="cols" style="width:95%" >
<caption><<c>table rules="cols" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</td></tr><tr><td>

<table rules="all" style="width:95%" >
<caption><<c>table rules="all" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</td><td>

<table rules="none" style="width:95%" >
<caption><<c>table rules="none" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</rd></tr></tbody></table>

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+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

Edit

#html #網頁格式 #script #style #html table #table caption #table th #table tr #table td #標簽定義 HTML 表格 #table border #table colspan #table rowspan #table rules

2023年4月2日星期日

input text

HTML input text 文字輸入欄位用來讓網友輸入文字

<pre><bb>input type="text"</bb>

<<c>input type="text" size="20" value="123456" />
<input type="text" size="20" value="123456" />
<hr>
<<c>input type="text" size="20" value="123456" <r>onclick="this.select()"</r> />
<input type="text" size="20" value="123456" onclick="this.select()"   />
<hr>
<<c>input type="text" size="20" value="123456" <r>onchange="this.select()"</r><b> onclick="this.select()"</b>  />
<input type="text" size="20" value="123456" onchange="this.select()" onclick="this.select()"  />
<hr>
<<c>input type="text" size="20" value="123456" <r>maxlength="10"</r>/>
<input type="text" size="20" value="123456" maxlength="10"/>
<hr>
<<c>input type="text" size="20" value="123456" <r>readonly</r> />
<input type="text" size="20" value="123456" readonly />
<hr>
<<c>input type="text"  size="20"  value="123456" <r>disabled</r> />
<input type="text"  size="20"  value="123456" disabled />
<hr>
<<c>input type="text" value="123" <r>onchange="alert(this.value)"</r> />
<input type="text" value="123" onchange="alert(this.value)" />
</pre>

<pre><bb>input  </bb>

<<c>input <r>type="password"</r> size="20" value="123456"  />
<input type="password" size="20" value="123456"  /> 
<hr>
<<c>input <r>type="number"</r> size="20"  value="123456"  />
<input type="number" size="20"  value="123456"  />
<hr>
<<c>input type="password" size="20" value="123456" <r>onmouseover="this.select()"</r> <b>onmouseout="this.blur();"</b> />
<input type="password" size="20" value="123456" onmouseover="this.select()"   onmouseout="this.blur();" />
<hr>
<<c>input type="date">
<input type="date">
<hr>
<<C>input type="month" >
<input type="month" >
<hr>
<<c>input type="datetime-local">
<input type="datetime-local">
<hr>
<<c>input type="time" >
<input type="time" >
<hr>
<<c>input type="color" >
<input type="color" >
</pre>

Edit

#html #網頁格式 #script #style #div #html input #html input text

2023年4月1日星期六

input radio

input radio/Checkboxes 選擇框

<label class="container">
  <input type="radio" name="S1" checked >One</label><br>
<label class="container">
  <input type="radio" name="S1">Two</label><br>
<label class="container">
  <input type="radio" name="S1">Three</label><br>
<label class="container">
  <input type="radio" name="S1">Four</label><br>

<pre>
<<c>label class="container">
  <<c>input type="radio" <r>name="S1"</r> checked>One<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio" <r>name="S1"</r> >Two<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio" <r>name="S1"</r> >Three<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio" <r>name="S1"</r> >Four<<c>/label><c><br>
<<c>style>
.container { cursor: pointer;           
             font-size: 22px; }     
<<c>/style></pre>

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>

<label class="container">
  <input type="radio" checked >One</label><br>
<label class="container">
  <input type="radio" >Two</label><br>
<label class="container">
  <input type="radio" >Three</label><br>
<label class="container">
  <input type="radio" >Four</label><br>

<pre>
<<c>label class="container">
  <<c>input type="radio" checked>One<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio" >Two<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio"  >Three<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio"  >Four<<c>/label><c><br>
<<c>style>
.container { cursor: pointer;           
             font-size: 22px; }     
<<c>/style></pre>

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>

You select <span id="dp">?</span>
<br>

}) })
</script>
<pre>

<<c>script>
var Tag= document.querySelectorAll("input") ;
Tag.forEach((round) => { 
    round.addEventListener("click", function() {
    if(round.value== dp.innerHTML){  
    round.checked=false ;
    dp.innerHTML = "?";return }
dp.innerHTML =  round.value ;

}) })
<</c>/script>

</pre>

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>

You select <span id="dp1"> 1 </span>
<span id="dp2"> 2 </span>
<span id="dp3"> 3 </span>
<span id="dp4"> 4 </span>
<br>

<<c>script>
var Tag= document.querySelectorAll("input") ;
Tag.forEach((round) => {
    round.addEventListener("click", function() { 
       var TT =document.getElementById("dp"+round.value) ;
       if(TT.style.opacity == 0.3){ TT.style.opacity=1; 
                     TT.style.textDecoration = "initial"; }
        else{ TT.style.opacity=0.3;
               round.checked=false ;
               TT.style.textDecoration = "line-through";   }
  }) })
<</c>/script>

</pre>

<style>

.container { cursor: pointer;           
             font-size: 22px;
             padding-left: 20px; } 
#dp1 ,#dp2 ,#dp3 ,#dp4 { padding-left: 20px;
                         text-decoration : LINE-THROUGH;
                         opacity:0.3}    
</style>

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>

input radio/Checkboxes 選擇框

Edit

#html #網頁格式 #script #style #div #html input radio #html 選擇框

input Checkboxes

input radio/Checkboxes 選擇框

<label class="container">
  <input type="checkbox" checked="checked">One</label><br>
<label class="container">
  <input type="checkbox">Two</label><br>
<label class="container">
  <input type="checkbox">Three</label><br>
<label class="container">
  <input type="checkbox">Four</label><br>

<pre><<c>label class="container">
  <<c>input type="checkbox" checked="checked">One<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="checkbox">Two<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="checkbox">Three<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="checkbox">Four<<c>/label><c><br>
<<c>style>
.container { cursor: pointer;           
             font-size: 22px; }     
<<c>/style></pre>

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

<label class="container" >
  <input type="checkbox" checked="checked">One</label>
<label class="container">
  <input type="checkbox" >Two</label> 
<label class="container">
  <input type="checkbox" >Three</label> 
<label class="container">
  <input type="checkbox" >Four</label>

<<c>style>
.container { cursor: pointer;           
             padding-left: 30px;
             font-size: 22px; }     
<<c>/style>

</pre>

<label>
  <input type="checkbox"  >
  <span>One</span></label>
<label>
  <input type="checkbox" >
  <span>Two</span></label>
<label>
  <input type="checkbox"  >
  <span>Three</span></label>
<label>
  <input type="checkbox"  >
  <span>Four</span></label>
<pre>
<<c>style>
input[type="checkbox"]:checked  ~ span{ color: red;}
label {cursor:pointer;padding-left: 20px;
       font-size: 22px;}
<<c>/style>

<<c>label>
  <<c>input type="checkbox"  >
  <<c>span>One<<c>/span><<c>/label>
<<c>label>
  <<c>input type="checkbox" >
  <<c>span>Two<<c>/span><<c>/label>
<<c>label>
  <<c>input type="checkbox"  >
  <<c>span>Three<<c>/span><<c>/label>
<<c>label>
  <<c>input type="checkbox"  >
  <<c>span>Four<<c>/span><<c>/label></pre>

.container input:checked ~ .checkmark { background-color: #2196F3;}

.checkmark:after { content: "";
                   position: absolute;
                   display: none; }

.container input:checked ~ .checkmark:after { display: block; }

.container .checkmark:after { left: 9px;
                              top: 5px;
                              width: 5px;
                              height: 10px;
                              border: solid white;
                              border-width: 0 3px 3px 0;
                              -webkit-transform: rotate(45deg);
                              -ms-transform: rotate(45deg);
                              transform: rotate(45deg);}
</style>

<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

.container input:checked ~ .checkmark{ background-color: #2196F3;}/*選擇後色*/

.checkmark:after { content: "";
                   position: absolute;
                   display: none; }

.container input:checked ~ .checkmark:after { display: block; }

Edit

#html #網頁格式 #script #style #div #html input Checkboxes #html 選擇框

2023年3月31日星期五

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

2023年3月26日星期日

script setTimeout

setTimeout() 指定延遲時間執行一段程式

function Fstop(){
fstart.disabled = false;
fReset.disabled = false;
clearTimeout(clearid);
}

function FReset(){
x = 0;
time.innerHTML = x; 
}

</script>

Edit

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

2023年3月25日星期六

script for while

JavaScript Loop For / while / do...while
迴圈語法。

Edit

#html #網頁格式 #script #style #div #script for #script while #script else #script Loop

訂閱：文章 (Atom)

2024年3月20日 星期三

2024年3月2日 星期六

2023年4月6日 星期四

<table>標簽定義 HTML 表格。

2023年4月2日 星期日

HTML input text 文字輸入欄位用來讓網友輸入文字

2023年4月1日 星期六

input radio/Checkboxes 選擇框

input radio/Checkboxes 選擇框

2023年3月31日 星期五

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

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

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

2023年3月26日 星期日

setTimeout() 指定延遲時間執行一段程式

2023年3月25日 星期六

JavaScript Loop For / while / do...while 迴圈語法。

2024年3月20日星期三

2024年3月2日星期六

2023年4月6日星期四

2023年4月2日星期日

2023年4月1日星期六

2023年3月31日星期五

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

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

2023年3月26日星期日

2023年3月25日星期六

JavaScript Loop For / while / do...while
迴圈語法。