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> <style> .container { cursor: pointer; font-size: 22px; } </style> <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> <style> input {cursor:pointer;} pre{position:fixed ; top:10px ; left:100px;} 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>

00

<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> <style> .container { cursor: pointer; font-size: 22px; } </style> <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> <style> input {cursor:pointer;} pre{position:fixed ; top:10px ; left:100px;} 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>

00

You select <span id="dp">?</span> <br> <label class="container"> <input type="radio" name="S1" value="1" >1</label> <label class="container"> <input type="radio" name="S1" value="2">2</label> <label class="container"> <input type="radio" name="S1" value="3">3</label> <label class="container"> <input type="radio" name="S1" value="4">4</label> <script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { //true false round.checked=false;return round.addEventListener("click", function() { if(round.value== dp.innerHTML){ round.checked=false ; dp.innerHTML = "?";return } dp.innerHTML = round.value ; }) }) </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> <style> .container { cursor: pointer; font-size: 22px; padding-left: 20px; } </style> <style> 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>

00

You select <span id="dp1"> 1 </span> <span id="dp2"> 2 </span> <span id="dp3"> 3 </span> <span id="dp4"> 4 </span> <br> <label class="container"> <input type="radio" value="1" >1</label> <label class="container"> <input type="radio" value="2">2</label> <label class="container"> <input type="radio" value="3">3</label> <label class="container"> <input type="radio" value="4">4</label> <script> dp1.style.opacity=0.3; dp2.style.opacity=0.3; dp3.style.opacity=0.3; dp4.style.opacity=0.3; dp1.style.textDecoration = "line-through"; dp2.style.textDecoration = "line-through"; dp3.style.textDecoration = "line-through"; dp4.style.textDecoration = "line-through"; 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"; } }) }) </script> <pre> <<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> <style> 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>

00

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> <style> .container { cursor: pointer; font-size: 22px; } </style> <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> <style> input {cursor:pointer;} pre{position:fixed ; top:10px ; left:100px;} 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

00

<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> <style> .container { cursor: pointer; padding-left: 30px; font-size: 22px; } </style> <pre> <<c>label class="container"> <<c>input type="checkbox" checked="checked">One<<c>/label> <<c>label class="container"> <<c>input type="checkbox" >Two<<c>/label> <<c>label class="container"> <<c>input type="checkbox" >Three<<c>/label> <<c>label class="container"> <<c>input type="checkbox" >Four<<c>/label> <<c>style> .container { cursor: pointer; padding-left: 30px; font-size: 22px; } <<c>/style> </pre> <style> 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

00

<style> input[type="checkbox"]:checked ~ span{ color: red;} label {cursor:pointer;padding-left: 20px;font-size: 22px;} </style> <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> <style> 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

00

<style> .container { display: block; /* 垂直 */ position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; } .container input { position: absolute; opacity: 0; cursor: pointer; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .container:hover input ~ .checkmark { background-color: #ccc;} .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>

00

<style> .container { position: relative; /* 橫向 */ margin-right: 30px; /* 橫向 */ padding-left: 35px; /* 選擇框 字距 */ cursor: pointer; /* 滑鼠游標手型 */ font-size: 22px; } /* 字 大小 */ .container input { position: absolute; /* 隱藏原有選擇框 */ opacity: 0; cursor: pointer; } .checkmark { position: absolute; /* 自加選擇框 */ top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .container:hover input ~ .checkmark{background-color: #ccc;} /*滑鼠改色*/ .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>

00

Edit

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

input range

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

<datalist id="tickmarks"> <option value="0" >0</option> <option value="20">20</option> <option value="40">40</option> <option value="60">60</option> <option value="80">80</option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="volumeBox.innerHTML=this.value"> <span id="volumeBox" >50</span> <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> <style> input { width:400px } <style> <style> 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

00

<datalist id="tickmarks"> <option value="0" > 0 </option> <option value="20"> 20 </option> <option value="40"> 40 </option> <option value="60"> 60 </option> <option value="80"> 80 </option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="volumeBox.innerHTML=this.value"> <span id="volumeBox" >50</span> <style> input[type=range]{ writing-mode: bt-lr; /* IE */ -webkit-appearance: slider-vertical; /* WebKit */ width: 30px; height: 300px; } </style> <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> <style> pre{position:fixed ; top:10px ; left:150px;} 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

00

<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> <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> </div>

00

<!DOCTYPE html> <style> #range { width:400px;border: 1px solid black;} #range input { width:99%;margin: 0 0 0 0;height:20px;} #tickmarks{ width:103%;margin: 0 0 0 0;display: flex;} #tickmarks option{width:410px;font-size: 15px;} </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>

00

<!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>

00

<!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> <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>

00

Edit

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

script setInterval

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

<pre> <b>setInterval()</b> setInterval() method calls a function at specified intervals (in milliseconds). 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。 setInterval(function, milliseconds, param1, param2, ...) setInterval(function, 毫秒, 參數1, 參數2, ...) <b>clearInterval(myInterval)</b> clearInterval() to stop the time 停止時間 Example: var myInterval=setInterval(........) clearInterval(myInterval) </pre> <style> 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>

00

<pre><<c>p id="demo"><<c>/p> <<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> <script> var txt="" , ii=0; var Stop = setInterval(TX, 1000); function TX() { ii++ ; txt += " [RUN " + ii +"] " ; demo.innerHTML = txt ; if(ii > 19){ clearInterval(Stop) ; demo.innerHTML += " clearInterval(Stop)";} } </script> <style> 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>

00

<pre> <<c>p id="demo"><<c>/p> <<c>script> if(myInterval){ clearInterval(myInterval) } var myInterval = setInterval(myTimer, 1000); function myTimer() { const date = new Date(); demo.innerHTML = date.toLocaleTimeString(); } <<c>/script> result : <span id="demo"></span></pre> <script> if(myInterval){ clearInterval(myInterval) } var myInterval = setInterval(myTimer, 1000); function myTimer() { const date = new Date(); demo.innerHTML = date.toLocaleTimeString(); } </script> <style> 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>

00

Edit

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

CSS position: fixed

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

<pre> <pre> <b>position</b> 改變物件的位置 sets how an element is positioned in a document position: static | relative | fixed | absolute | sticky static:靜態定位 relative:相對定位 fixed:固定定位 absolute:絕對定位 sticky:黏貼定位 </pre> <style> 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>

00

<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> <style> #MD{ width:100%;height:99%; display:flex ; justify-content:center; align-items: center;} #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> 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>

00

<!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> <style> 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> </pre>

00

<!DOCTYPE html> <html> <head> <style> .outerDiv {float:left; position: relative; width: 300px ; height: 400px ; border: 3px solid #73AD21; } .innerDiv{ position: sticky; 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: sticky;</r> } <<c>/style> <style> 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> </pre>

00

Edit

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