tag:blogger.com,1999:blog-64239900838907537522024-03-28T19:30:27.011-07:00✍ 📁 🙈 🙉 🙊 HTMLCK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.comBlogger211125tag:blogger.com,1999:blog-6423990083890753752.post-12791647254747482202024-03-28T04:26:00.000-07:002024-03-28T05:50:40.105-07:00Google Apps Script 1
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="Google_Apps11">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<h3>get Google SpreadSheet content</h3>
<table border="1" style="width:100%">
<tbody><tr><td>
<div width="100%"><</c>script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><<c>/script>
<br><br>
var appUrl = "apps script appUrl " ;
<br>
<pre>
parameter = { }; //讀取資訊
$.get(appUrl, parameter, function(data) {.......})</pre>
<div id="DP1"></div>
<br><br>
<pre>
parameter={ dow:'Read' } //讀取所有內容
$.get(appUrl, parameter, function(data) {.......})</pre>
<div id="DP2"></div>
<br><br>
<pre>
parameter = {dow:'getRange',A1:2,A2:2,B1:1,B2:1 }; //讀取指定內容
$.get(appUrl, parameter, function(data) {.......})</pre>
<div id="DP3"></div><br>
</pre>
</div>
</td></tr></tbody><table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</div>
<script>
var txt="" ;
var appUrl = "https://script.google.com/macros/s/AKfycbwuIYubkpYnZSrOi-xWAQ03QXYskKHR5Cfod_4Ugedp013tWGqgaXIojfpUTYHV-Egl3w/exec" ;
function IT(){
parameter = { };
$.get(appUrl, parameter, function(data) {
txt = "data = " + JSON.stringify(data ) ;
DP1.innerHTML= txt; })
parameter = {dow:'getDataRange'};
$.get(appUrl, parameter, function(data) {
txt = "data = " + JSON.stringify(data ) ;
DP2.innerHTML= txt; })
parameter = {dow:'getRange',A1:2,A2:2,B1:1,B2:1};
$.get(appUrl, parameter, function(data) {
txt = "data = " + JSON.stringify(data ) ;
DP3.innerHTML= txt; })
}
IT();
</script>
<a href="https://docs.google.com/spreadsheets/d/1loDC9_v5gdeosEd01_S4x619gCmxZS6SF4uRQLo3rOg/edit#gid=0" target="_blank" title="HTML">HTML Google資料庫20240320</a>
<style>
#DP1 ,#DP2 ,#DP3 { margin-top:-13px ;color:red}
div{font-size: 18px ;}
pre{font-size: 18px ;}
R {color:red}
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('Google_Apps11','700');</script>
</div>
<!----------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------><!---------------------------------------------------------------------------------------->
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="Google_Apps22">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<h3>Modify Google SpreadSheet content</h3>
<div id="UPDOWN" style="display:none">
<marquee scrollamount="10" style="width:200px" ><b>
....upload....download.... </b></marquee>
</div>
<table border="1" style="width:100%;height:90%">
<tbody><tr><td height="150px">
<button onclick="clearALL()" >清空 Google 試算表 所有內容</button>
<pre>parameter = {dow:'clearALL'}
$.get(appUrl, parameter, function(data) {.....}) ;
</pre>
<tr><td height="150px">
<button onclick="setValuesALL()" >加入 Google 試算表 所有內容</button>
<pre>var DD=[[1,11,111],[2,22,222],[3,33,333],[4,44,444],[5,55,555]]
parameter = {dow:'setValuesALL' , Sdata:JSON.stringify(DD) };
$.get(appUrl, parameter, function(data) {.....}) ;
</pre>
</td></tr><td>
<div id="DP1"></div>
</td></tr></tbody><table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</div>
<script>
var txt="" ;
var appUrl = "https://script.google.com/macros/s/AKfycbwxHhP-RsOSG-PKkZRg4cIoyY9Z28imhc5BEpXPYvRwO-UhDdPMvwE3NhLL23GFfQ1_qA/exec" ;
function DP(){
DP1.innerHTML= UPDOWN.innerHTML;
parameter = {dow:'getDataRange'};
$.get(appUrl, parameter, function(data) {
txt = "parameter={ dow:'Read' } 讀取 Google 試算表 所有內容<br> " ;
txt+= JSON.stringify(data ) ;
txt+= "<br><br><table id='table1' >" ;
txt+= "<tbody>"
for(var rr=0 ;rr < data.length ;rr++){
txt+= "</tr><tr>" ;
for(var cc=0 ;cc< data[0].length ;cc++){
txt+= "<td>" + data[rr][cc] + "</td>" ;
}
}
txt+= "</td></tr></tbody><table>" ;
DP1.innerHTML= txt; })
}
DP();
function clearALL(){
DP1.innerHTML= UPDOWN.innerHTML;
parameter = {dow:'clearALL'};
$.get(appUrl, parameter, function(data) {DP(); }) ;
}
function setValuesALL(){
DP1.innerHTML= UPDOWN.innerHTML;
var DD=[[1,11,111],[2,22,222],[3,33,333],[4,44,444],[5,55,555]]
parameter = {dow:'setValuesALL' , Sdata:JSON.stringify(DD) };
$.get(appUrl, parameter, function(data) {DP(); }) ;
}
</script>
<style>
#table1 {border-style:solid;}
#table1 td {border: 1px solid brown;padding:0px 10px}
div, td ,button {font-size: 20px ;vertical-align:top}
R {color:red}
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('Google_Apps22','700');</script>
</div>
<!----------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------><!---------------------------------------------------------------------------------------->
<br><br>
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/1279164725474748220" target="_blank" title="HTML">Edit</a>
</div>CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-35791420130330207542024-03-26T02:42:00.000-07:002024-03-28T17:06:49.553-07:00CK General ledger
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="CK_General">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<h3>Modify Google SpreadSheet content</h3>
<div id="UPDOWN" style="display:none">
<marquee scrollamount="10" style="width:200px" ><b>
....upload....download.... </b></marquee>
</div>
<button onclick="Upload() ">upload renew</button>
<div id="DP1"></div>
<div id="DP2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</div>
<script>
var txt="" ;
var appUrl = "https://script.google.com/macros/s/AKfycbwxHhP-RsOSG-PKkZRg4cIoyY9Z28imhc5BEpXPYvRwO-UhDdPMvwE3NhLL23GFfQ1_qA/exec" ;
var Mdata=[] ;
function DP(){
DP1.innerHTML= UPDOWN.innerHTML;
parameter = {dow:'getDataRange'};
$.get(appUrl, parameter, function(data) {
Mdata = data;
txt = "" ;
txt+= "<br><br><table id='table1' >" ;
txt+= "<tbody>"
for(var rr=0 ;rr < Mdata.length ;rr++){
txt+= "</tr><tr>" ;
for(var cc=0 ;cc< Mdata[0].length ;cc++){
txt+= "<td><input type='text' class='INc' value='" ;
txt+= Mdata[rr][cc] + "' onchange='CH(" ;
txt+= rr + "," + cc + ", this.value " + ")' > </td>" ;
}
}
txt+= "</td></tr></tbody><table>" ;
DP1.innerHTML= txt ; DP2.innerHTML= JSON.stringify(data )})
}
DP();
function CH( rr , cc ,vv){
Mdata[rr][cc] = vv ;
DP2.innerHTML= JSON.stringify(Mdata ) ; }
function Upload(){ alert()
DP1.innerHTML= UPDOWN.innerHTML;
parameter = {dow:'clearALL'};
$.get(appUrl, parameter, function(data) { })
parameter = {dow:'setValuesALL' , Sdata:JSON.stringify(Mdata ) };
$.get(appUrl, parameter, function(data) {DP(); }) ;
}
</script>
<style>
#table1 {border-style:solid;width:100%}
#table1 td {border: 1px solid brown}
.INc {width:100%}
button {font-size: 16px}
div, td {font-size: 20px ;vertical-align:top}
R {color:red}
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('CK_General','700');</script>
</div>
<!----------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------><!---------------------------------------------------------------------------------------->
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="CK_GeneralAA">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<table>
<tr><td>one<td>two<td>three</td>
<tr><td>one<td>two<td>three</td>
<tr><td>one<td>two<td>three</td>
</table>
<script type="text/javascript">
function tableToArray(table) {
var result = []
var rows = table.rows;
var cells, t;
// Iterate over rows
for (var i=0, iLen=rows.length; i<iLen; i++) {
cells = rows[i].cells;
t = [];
// Iterate over cells
for (var j=0, jLen=cells.length; j<jLen; j++) {
t.push(cells[j].textContent);
}
result.push(t);
}
return result;
}
document.write(JSON.stringify(tableToArray(document.getElementsByTagName('table')[0])));
</script>
</body>
</html>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('CK_GeneralAA','700');</script>
</div>
<!----------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------><!---------------------------------------------------------------------------------------->
<br><br>
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/3579142013033020754" target="_blank" title="HTML">Edit</a>
</div>CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-29734763787008785552024-03-25T03:32:00.000-07:002024-03-25T22:14:16.563-07:00CKdata
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="aaaaa">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<div style="margin-top:-30px">
<select id="Sel" onchange="DP(this.selectedIndex+1)"></select>
<div id="DP"></div>
<input type="password" id="APww" value="1234" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
var x = 0;
var Mdata = {};
var appUrl = "https://script.google.com/macros/s/AKfycbxJXVIujJLTsAyxscPLLdvajV5bI5LtiXgG-uQ8GZw26HEx3RCw2tS87-JcQ_h0yesW/exec" ;
var TT = document.createElement("TEXTAREA");
TT.id= "TTid" ;
document.body.appendChild(TT);
function DataItems(){
parameter = {dow:'Read' };
$.get(appUrl, parameter, function(data) {
Mdata = data ;
var Sel_x = parseInt(data.資料筆數) ;
for(x=0 ;x < Sel_x ; x++){
var opt = document.createElement('option');
opt.value = "value 內容" ;
opt.text = data.content[x][0].substr(0, 10);
Sel.add(opt) ; }
Sel.selectedIndex = x-1;
DP(x) ;
})
}
DataItems() ;
function DP(x){ //alert(x)
var TTT = "" ;
var rn = Adecode(Mdata.content[x-1][1],APww.value)
$('#TTid').text(rn) ;}
function Aencode(str,key){
str=btoa(escape(str));
var l="";
for(var c=0;c<key.length;c++){
l+=key.charCodeAt(c).toString()}
var g=Math.floor(l.length/5);
var b=parseInt(l.charAt(g)+l.charAt(g*2)+l.charAt(g*3)+l.charAt(g*4)+l.charAt(g*5));
var a=Math.ceil(key.length/2);var h=Math.pow(2,31)-1;
var d=Math.round(Math.random()*1000000000)%100000000;
l+=d;
while(l.length>10){l=(parseInt(l.substring(0,10))+parseInt(l.substring(10,l.length))).toString()}l=(b*l+a)%h;
var e="";
var k="";
for(c=0;c<str.length;c++){
e=parseInt(str.charCodeAt(c)^Math.floor((l/h)*255));
if(e<16){k+="0"+e.toString(16)}
else{k+=e.toString(16)}
l=(b*l+a)%h}d=d.toString(16);
while(d.length<8){d="0"+d} ;
k+=d;
return k; }
function Adecode(encodeStr,key){
var l="";
for(var c=0;c<key.length;c++){l+=key.charCodeAt(c).toString() } ;
var g=Math.floor(l.length/5);
var b= parseInt(l.charAt(g)+l.charAt(g*2)+l.charAt(g*3)+l.charAt(g*4)+l.charAt(g*5));
var a=Math.round(key.length/2);
var h=Math.pow(2,31)-1;
var d=parseInt(encodeStr.substring(encodeStr.length-8,encodeStr.length),16);encodeStr=encodeStr.substring(0,encodeStr.length-8);
l+=d;
while(l.length>10){l=(parseInt(l.substring(0,10))+parseInt(l.substring(10,l.length))).toString()};
l=(b*l+a)%h;
var e="";
var k="";
for(c=0;c<encodeStr.length;c+=2){
e=parseInt(parseInt(encodeStr.substring(c,c+2),16)^Math.floor((l/h)*255)); k+=String.fromCharCode(e);l=(b*l+a)%h}
if(encodeURIComponent(k).charAt(0)=="%" ||
encodeURIComponent(k).charAt(1)=="%" ||
encodeURIComponent(k).charAt(2)=="%" )
{return "ck chan"}
return unescape(atob(k)) ;
}
</script>
<style>
#TTid {width: 100% ; height:70%}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('aaaaa','700');</script>
</div>
<!----------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------><!---------------------------------------------------------------------------------------->
<br><br>
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/2973476378700878555" target="_blank" title="HTML">Edit</a>
</div>CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-45033444132153610772024-03-22T06:56:00.000-07:002024-03-22T08:24:21.706-07:00CSS background<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="backgroundA">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<h3>CSS background 背景</h3>
<div style="margin-top:-30px">
<pre><code> background-image:url("https://xxx.jpg") 呈現一張圖片地址
background-size 圖片尺寸
background-position 圖片呈現位置
background-repeat 圖片重複的效果
background-color 背景顏色
</code></pre></div>
<div id="myDIV">
<table border="0" style="font-size : 25px;">
<tbody>
<tr><td rowspan="8" style="vertical-align:top" >div {
</td><td colspan="3">width: 100% ;
</td></tr><tr><td colspan="3">height: 100%;
</td></tr><tr><td colspan="3">background-image : url("https://xxx.jpg") ;
</td></tr><tr><td>background-size :</td><td id="Bgsize">
</td><td><select id="Swidth" onchange="myDIV.style.backgroundSize = this.value;DPcss();this.selectedIndex=0" >
<option value="" style="display:none;">background-size</OPTION>
<option value="contain">contain</OPTION>
<option value="cover">cover</OPTION>
<option value="auto">auto</OPTION>
<option value="100px 100px">100px 100px</OPTION>
<option value="200px 200px">200px 200px</OPTION>
<option value="200px">200px</OPTION>
<option value="100% 100%">100% 100%</OPTION>
<option value="80%">80%</OPTION>
<option value="500px">500px</OPTION>
</SELECT>
</td></tr><tr><td> background-position :</td><td id="Bgposition">
</td><td><select id="Swidth" onchange="myDIV.style.backgroundPosition= this.value;DPcss();this.selectedIndex=0" >
<option value="" style="display:none;">background-position</OPTION>
<option value="left top">left top</OPTION>
<option value="left center">left center</OPTION>
<option value="left bottom">left bottom</OPTION>
<option value="center top">center top</OPTION>
<option value="center center">center center</OPTION>
<option value="center bottom">center top</OPTION>
<option value="right top">right top</OPTION>
<option value="right center">right center</OPTION>
<option value="right bottom">right bottom</OPTION>
<option value="50% 50%">50% 50%</OPTION>
<option value="30% 70%">30% 70%</OPTION>
<option value="20px 200px">20px 200px</OPTION>
<option value="50px 300px">50px 300px</OPTION>
<option value="initial">initial</OPTION>
</SELECT>
</td></tr><tr><td> background-repeat :</td><td id="Bgrepeat">
</td><td><select id="Swidth" onchange="myDIV.style.backgroundRepeat= this.value;DPcss();this.selectedIndex=0" >
<option value="" style="display:none;">background-repeat</OPTION>
<option value="no-repeat">no-repeat</OPTION>
<option value="repeat">repeat</OPTION>
<option value="repeat-y">repeat-y</OPTION>
<option value="repeat-x">repeat-x</OPTION>
<option value="space">space</OPTION>
<option value="round">round</OPTION>
<option value="initial">initial</OPTION>
</SELECT>
</td></tr><tr><td> background-color :</td><td id="Bgcolor">
</td><td><select id="Swidth" onchange="myDIV.style.backgroundColor = this.value;DPcss();this.selectedIndex=0" >
<option value="" style="display:none;">background-color</OPTION>
<option value="red">red</OPTION>
<option value="pink">pink</OPTION>
<option value="gray">gray</OPTION>
<option value="gold">gold</OPTION>
</SELECT>
</td></tr></tbody></table>
</div>
<script>
elem = document.querySelector('#myDIV');
style = getComputedStyle(elem);
function DPcss() { //alert( );
Bgsize.innerHTML =style.backgroundSize + " ;" ;
Bgposition.innerHTML =style.backgroundPosition + " ;";
Bgrepeat.innerHTML =style.backgroundRepeat + " ;";
Bgcolor.innerHTML = style.backgroundColor + " ; }" ;
}
DPcss();
</script>
<style>
#myDIV { width: 100%; height: 500px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs6iTSCIg-47MFrCnQwLbFznoiHq42QLNjQxshByKNXjMpg6uLDENjRF4kbMcZlXLI4DA_bcJCYT5KAMwsu0N4Ck6S_qr1ThAkP43Oyl-F0YxVac19E7SN3NTyEtsunyuXzBeLpO30Wv0R/s1600/images.jpg"); /*背景圖案*/
background-size: 100px 100px; /*底圖就會依照區塊的大小,等比縮放到區塊中*/
background-position: center; /*置中*/
background-repeat: no-repeat; /*背景圖案不重複*/
background-color:gray; /*背景的顏色*/
font-size : 25px ;
color:black;
}
#myDIV select { background:rgba(0, 0, 0, 0) ;
color:white; width:200px;
font-size: 20px}
#myDIV option {background-color: rgb(204, 204, 204 , 3);color:black;}
#myDIV table {font-size: 20px ;}
pre { font-size: 18px; }
pre > code { white-space: pre;
margin-top: -25px;
display: block; }
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('backgroundA','700');</script>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="backgroundB">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<h3>CSS Background Patterns</h3>
<pre><code > CSS Background Patterns 簡易單色背景 CSS 語法產生器。
如果你的網站需求是需要一些單色的背景紋理圖案,來避免略顯單調的白色的話,
這個 CSS Background Pattern 網站所提供的服務就非常適合。你只需要決定前景、
背景色、透明度和紋理間的間隔,就可以即時預覽結果,並複製相關的 CSS 程式碼
到你的網站作使用。</code></pre>
<style>
pre { font-size: 18px; }
pre > code { white-space: pre;
margin-top: -25px;
display: block; }
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
.divDP {
width: 150px;
height: 150px;
float: left;
margin: 10px;
font-size:22px;
box-shadow: 0 1px 8px #666;
}
.pattern1 {
background-size: 50px 50px;
background-color: #0ae;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
.pattern2 {
background-size: 50px 50px;
background-color: #f90;
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
.pattern3 { background-size: 50px 50px;
background-color: #c16;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
.pattern4 {
background-size: 50px 50px;
background-color: #ac0;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
.pattern5 {
background-size: 50px 50px;
background-color: white;
background-image:
-webkit-linear-gradient(to top,transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-webkit-linear-gradient(to left, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image:
linear-gradient(to top,transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
linear-gradient(to left, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5))
}
.pattern6 {color:red;
background-color: #eee;
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
background-image:
-webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
-webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image:
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
}
.pattern7 {color:red;
background-color: #eee;
background-size: 60px 60px;
background-image:
-webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
-webkit-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image:
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
}
.pattern8 {
background-color: #fff;
background-size: 100% 1.2em;
background-image:
-webkit-linear-gradient(to right, transparent 21px, #abced4 21px, #abced4 23px, transparent 23px),
-webkit-linear-gradient(#eee .05em, transparent .05em);
background-image:
linear-gradient(to right, transparent 21px, #abced4 21px, #abced4 23px, transparent 23px),
linear-gradient(#eee .05em, transparent .05em);
}
.pattern9 {color:white;
background:
-webkit-radial-gradient(circle, white 10%, transparent 10%),
-webkit-radial-gradient(circle, white 10%, black 10%) 50px 50px;
background:
radial-gradient(circle, white 10%, transparent 10%),
radial-gradient(circle, white 10%, indigo 10%) 50px 50px;
background-size: 100px 100px;
}
.pattern10{
background:
-webkit-radial-gradient(circle at 0% 2%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px),
-webkit-radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
background:
radial-gradient(circle at 0% 2%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px),
radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
background-size: 20px 20px;
}
.pattern11 {
background-color: #88AA33;
background-image: -webkit-radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
background-image: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
background-position: 0 10px, 0 0%, 0 0;
background-size: 20px 20px;
}
.pattern12{
background-color: #330000;
background-image:
-webkit-radial-gradient(#890000 4%, #5B0000 9%, rgba(102, 0, 0, 0) 9%),
-webkit-radial-gradient(#890000 4%, #5B0000 8%, rgba(102, 0, 0, 0) 10%),
-webkit-radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)),
-webkit-radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)),
-webkit-radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%),
-webkit-radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%),
-webkit-radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)),
-webkit-radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)),
-webkit-linear-gradient(45deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%),
-webkit-linear-gradient(135deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%);
background-image:
radial-gradient(#890000 4%, #5B0000 9%, rgba(102, 0, 0, 0) 9%),
radial-gradient(#890000 4%, #5B0000 8%, rgba(102, 0, 0, 0) 10%),
radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)), radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)),
radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%),
radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%),
radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)),
radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)),
linear-gradient(45deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%),
linear-gradient(135deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%);
background-position: 0 0px, 50px 50px, 50px 0px, 0 50px, 50px 0px, 100px 50px, 0 0px, 50px 50px, 0 0px, 0 0;
background-size: 100px 100px;
}
.pattern13 {color:red;
background-color: white;
background-image:
-webkit-radial-gradient(gold 9px, transparent 10px),
-webkit-repeating-radial-gradient(gold 0px, gold 4px, transparent 5px, transparent 20px, gold 21px, gold 25px, transparent 26px, transparent 50px);
background-image:
radial-gradient(gold 9px, transparent 10px),
repeating-radial-gradient(gold 0px, gold 4px, transparent 5px, transparent 20px, gold 21px, gold 25px, transparent 26px, transparent 50px);
background-position: 0 0;
background-size: 30px 30px, 90px 90px;
}
.pattern14 {color:red;
background-color: lightgray;
background-image:
-webkit-radial-gradient(black 15%, transparent 16%),
-webkit-radial-gradient(black 15%, transparent 16%),
-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%),
-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
background-image:
radial-gradient(black 15%, transparent 16%),
radial-gradient(black 15%, transparent 16%),
radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%),
radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
background-position: 0 0px, 8px 8px, 0 1px, 8px 9px;
background-size: 16px 16px;
}
.pattern15 {
background-color: #BB0033;
background-image:
-webkit-radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%),
-webkit-radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%),
-webkit-radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%),
-webkit-radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%),
-webkit-radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%),
-webkit-radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%),
-webkit-radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%),
-webkit-radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%),
-webkit-radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%),
-webkit-radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%);
background-image:
radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%),
radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%),
radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%),
radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%),
radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%),
radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%),
radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%),
radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%),
radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%),
radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%);
background-position: 0 0%, 0 0%, 0 0%, 0 0%, 0 0%, 50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px;
background-size: 100px 100px;
}
.pattern16 {
background-color: lightgray;
background-image:
-webkit-repeating-linear-gradient(120deg, rgba(169,169,169,.4), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
-webkit-repeating-linear-gradient(60deg, rgba(169,169,169,.4), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
-webkit-linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
-webkit-linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-image:
repeating-linear-gradient(120deg, rgba(169,169,169,.8), rgba(169,169,169,.8) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(169,169,169,.8), rgba(169,169,169,.8) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
}
.pattern17 {
background-image:
-webkit-radial-gradient( circle at 100% 50% , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent),
-webkit-radial-gradient( circle at 0% 50% , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent);
background-image:
radial-gradient(circle at 100% 50%, transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent),
radial-gradient( circle at 0% 50%, transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent);
background-color: slategray;
background-size:75px 100px;
background-position: 0 0%, 0 -50px;
}
.pattern18{color:red;
background-color: rgb(0,255,255,0.2);
background-image:
-webkit-radial-gradient(circle at 50% 59%, white 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
-webkit-radial-gradient(circle at 50% 41%, black 3%, white 4%, white 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),
-webkit-radial-gradient(circle at 50% 59%, white 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
-webkit-radial-gradient(circle at 50% 41%, black 3%, white 4%, white 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),
-webkit-radial-gradient(circle at 100% 50%, white 16%, rgba(210, 202, 171, 0) 17%),
-webkit-radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%),
-webkit-radial-gradient(circle at 100% 50%, white 16%, rgba(210, 202, 171, 0) 17%),
-webkit-radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%);
background-image:
radial-gradient(circle at 50% 59%, white 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
radial-gradient(circle at 50% 41%, black 3%, white 4%, white 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),
radial-gradient(circle at 50% 59%, white 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
radial-gradient(circle at 50% 41%, black 3%, white 4%, white 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),
radial-gradient(circle at 100% 50%, white 16%, rgba(210, 202, 171, 0) 17%),
radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%),
radial-gradient(circle at 100% 50%, white 16%, rgba(210, 202, 171, 0) 17%),
radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%);
background-position: 50px 0px, 50px 0px, 0 50px, 0 50px, 0 0%, 0 0%, 50px 50px, 50px 50px;
background-size: 100px 100px;
}
.pattern19 {
background-color: #C8D3A7;
background-image:
-webkit-radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%),
-webkit-radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);
background-image:
radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%),
radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);
background-position: 0 0px, 20px 20px;
background-size: 40px 40px;
}
.pattern20 {
background-color: #DDEEFF;
background-image:
-webkit-radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%),
-webkit-radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%);
background-image:
radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%),
radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%);
background-position: 0 0px, 20px 20px;
background-size: 40px 40px;
}
.pattern21 {background-color: #f76;
background-image:
linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%),
linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%);
background-position:
0em 1em,
0em 1em,
1em 2em,
1em 2em,
2em 1em,
2em 1em,
3em 2em,
3em 2em,
0em 0em,
1em 1em;
background-size:
4em 2em,
4em 2em,
4em 2em,
4em 2em,
4em 2em,
4em 2em,
4em 2em,
4em 2em,
2em 2em,
2em 2em;
}
</style>
<div class="divDP pattern1">pattern 1</div>
<div class="divDP pattern2">pattern 2</div>
<div class="divDP pattern3">pattern 3</div>
<div class="divDP pattern4">pattern 4</div>
<div class="divDP pattern5">pattern 5</div>
<div class="divDP pattern6">pattern 6</div>
<div class="divDP pattern7">pattern 7</div>
<div class="divDP pattern8">pattern 8</div>
<div class="divDP pattern9">pattern 9</div>
<div class="divDP pattern10">pattern 10</div>
<div class="divDP pattern11">pattern 11</div>
<div class="divDP pattern12">pattern 12</div>
<div class="divDP pattern13">pattern 13</div>
<div class="divDP pattern14">pattern 14</div>
<div class="divDP pattern15">pattern 15</div>
<div class="divDP pattern16">pattern 16</div>
<div class="divDP pattern17">pattern 17</div>
<div class="divDP pattern18">pattern 18</div>
<div class="divDP pattern19">pattern 19</div>
<div class="divDP pattern20">pattern 20</div>
<div class="divDP pattern21">pattern 21</div>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('backgroundB','700');</script>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/4503344413215361077" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size:10px; opacity: 0.3; float:left;clear:left;">
<a href="https://html.ug5g.com/2024/03/css-background.html" target="_blank" title="HTML">#ccs</a>
<a href="https://html.ug5g.com/2024/03/css-background.html" target="_blank" title="HTML">#HTML</a>
<a href="https://html.ug5g.com/2024/03/css-background.html" target="_blank" title="HTML">#background-image:url</a>
<a href="https://html.ug5g.com/2024/03/css-background.html" target="_blank" title="HTML">#background-size</a>
<a href="https://html.ug5g.com/2024/03/css-background.html" target="_blank" title="HTML">#background-position</a>
<a href="https://html.ug5g.com/2024/03/css-background.html" target="_blank" title="HTML">#background-repeat</a>
<a href="https://html.ug5g.com/2024/03/css-background.html" target="_blank" title="HTML">#background-color</a>
<a href="https://html.ug5g.com/2024/03/css-background.html" target="_blank" title="HTML">#Background Patterns</a>
<a href="https://html.ug5g.com/2024/03/css-background.html" target="_blank" title="HTML">#ccs background</a>
</nobr> CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-85103122827159038282024-03-21T04:12:00.000-07:002024-03-21T19:59:06.481-07:00border-style<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="border_styleA">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<h3>CCS border 邊框</h3>
<pre>border-style 屬性指定邊框的樣式。</pre>
<table style="width:100%">
<tbody><tr>
<td style="border-style:solid">實線 border-style:solid
</td><td style="width:10%"></td>
<td style="border-style:dashed;">虛線 border-style:dashed
</tr><tr>
<td style="border-style:double;">雙線 border-style:double
</td><td></td>
<td style="border-style:dotted;">點線 border-style:dotted
</tr><tr>
<td style="border-style:groove;">凹線 border-style:groove
</td><td></td>
<td style="border-style:ridge;">凸線 border-style:ridge
</tr><tr>
<td style="border-style:inset;">嵌入線 border-style:inset
</td><td></td>
<td style="border-style:outset;">浮出線 border-style:outset
</tr><tr>
</tr></tdody></table>
<br><br>
<div style="border-width:9px; border-style:solid">
邊框寬度為 9px border-width:9px; border-style:solid
</div>
<br>
<div style="border-width:medium; border-style:dashed">
邊框寬度為中等 border-width:medium; border-style:dashed
</div>
<br>
<div style="border-color:#0000FF; border-style:solid">
藍色邊框 border-color:#0000FF; border-style:solid
</div>
<br>
<div style="border-color:red; border-style:dotted">
紅色邊框
border-color:red; border-style:dotted
</div>
<style>
td , div {border-width:5px 5px 5px 5px;
padding:5px 5px;
font-size: 20px; }
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
pre {font-size: 18px;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('border_styleA','700');</script>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="border_styleB">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<div id="ff">
<div style="border: 10px ridge orchid;border-radius:50% 50% 50% 50%;
text-align: center;">
<pre>border: 10px ridge pink
border-radius:50% 50% 50% 50%</pre>
</div>
<br>
<div style="border: 10px solid pink;border-radius:40px 40px 40px 40px;
text-align: center;">
<pre>border: 10px ridge pink
border-radius:40px 40px 40px 40px</pre>
</div>
<br>
<div style="border-left-style:solid; border-top-style:dashed;
border-right-style:dotted;border-bottom-style:double;">
<pre> 左邊框為實線 border-left-style:solid
上邊框為實線 border-top-style:dashed
下邊框為虛線 border-right-style:dotted
且顏色為綠色 border-bottom-style:double</pre>
</div></div>
<style>
#ff div{ width: 80%;
//height:80%;
margin: 0 auto;}
td , div {border-width:5px 5px 5px 5px;
padding:5px 5px;
font-size: 20px; }
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
pre {font-size: 18px;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('border_styleB','700');</script>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="border_styleC">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<div id="ff">
<table style="width:100%">
<tbody><tr>
<td>
<div style="border: 10px solid brown;
border-radius: 100px;
height: 100px; width: 100px;" >
<pre style="margin-left:-50px">border: 10px solid brown;
border-radius: 100px;
height: 100px ; width: 100px;</pre>
</div>
</td><td>
<div style="border: 10px solid gold;
border-radius: 150px;
width: 150px;height: 100px;" >
<pre style="margin-left:-50px">border: 10px solid gold;
border-radius: 150px;
height: 150px ; width: 100px</pre>
</div>
</tr><tr>
</td><td>
<div style="border: 10px solid bisque;
border-radius: 50px 0 0 50px;
width: 50px;height: 100px;" >
<pre style="margin-left:-100px">border: 10px solid bisque;
border-radius: 50px 0 0 50px;
width:50px ; height:100px;</pre>
</div>
</td><td>
<div style="border: 10px solid blueviolet;
border-radius: 0 50px 50px 0;
width: 50px;height: 100px;" >
<pre style="margin-left:-100px">border: 10px solid blueviolet;
border-radius: 0 50px 50px 0 ;
width: 50px;height: 100px;</pre>
</div>
</tr><tr>
</td><td>
<div style="border: 1px solid lawngreen;
border-radius: 50px 50px 0 0;
width: 100px;height: 50px;" >
<pre style="margin-left:-100px">border: 1px solid lawngreen;
border-radius: 50px 50px 0 0;
width:100px ; height:50px;</pre>
</div>
</td><td>
<div style="border: 2px solid orchid;
border-radius: 0 0 50px 50px;
width: 100px;height: 50px;" >
<pre style="margin-left:-100px">border: 2px solid orchid;
border-radius: 0 0 50px 50p ;
width: 100px;height: 50px;</pre>
</div>
</tr><tr>
</td><td>
<div style="border: 5px solid bisque;
border-radius: 50px 0 50px 0 ;
width: 100px;height: 50px;" >
<pre style="margin-left:-100px">border: 5px solid bisque;
border-radius: 50px 0 50px 0 ;
width:100px ; height:50px;</pre>
</div>
</td><td>
<div style="border: 3px solid salmon;
border-radius: 0 50px 0 50px;
width: 100px;height: 50px;" >
<pre style="margin-left:-100px">border: 3px solid salmon;
border-radius: 0 50px 0 50p ;
width: 100px;height: 50px;</pre>
</div>
</td></tr></tdody></table>
<style>
#ff div{ width: 80%;
//height:80%;
margin: 0 auto;}
td , div {border-width:5px 5px 5px 5px;
padding:15px 15px;
font-size: 20px; }
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
pre {font-size: 18px;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('border_styleC','700');</script>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="border_styleD">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<div id="ff">
<table style="width:100%">
<tbody><tr><td>
<TO><<c>img style="width:150px ; height:150px;<br>
border-radius: 150px; " src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg" /></TO>
</div>
</td><td>
<img style="width: 150px;height: 150px;border-radius: 150px;" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg" />
</td></tr><tr><td>
<TO><<c>img style="width: 150px ; height: 100px;<br>
border-radius: 150px; " src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg" /></TO>
</div>
</td><td>
<img style="width: 150px;height: 100px;border-radius: 150px;" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg" />
</td></tr><tr><td>
</tdody></table>
<style>
#ff div{ width: 80%;
//height:80%;
margin: 0 auto;}
td , div {border-width:5px 5px 5px 5px;
padding:15px 15px;
font-size: 20px; }
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
pre {font-size: 18px;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('border_styleD','700');</script>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/8510312282715903828" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size:10px; opacity: 0.3; float:left;clear:left;">
<a href="https://html.ug5g.com/2024/03/text-shadow.html" target="_blank" title="HTML">#ccs</a>
<a href="https://html.ug5g.com/2024/03/text-shadow.html" target="_blank" title="HTML">#HTML</a>
<a href="https://html.ug5g.com/2024/03/text-shadow.html" target="_blank" title="HTML">#text-shadow</a>
<a href="https://html.ug5g.com/2024/03/text-shadow.html" target="_blank" title="HTML">#文字陰影效果</a>
<a href="https://html.ug5g.com/2024/03/text-shadow.html" target="_blank" title="HTML">#CCS text-shadow</a>
<a href="https://html.ug5g.com/2024/03/text-shadow.html" target="_blank" title="HTML">#shadow effect</a>
</nobr> CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-26586683111635517962024-03-21T00:21:00.000-07:002024-03-21T03:18:26.625-07:00text-shadow<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="text_hadowA">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<h3>CCS text-shadow 文字陰影效果</h3>
<pre> 文字陰影 {text-shadow: 向右移動 向下移動 模糊度 陰影色 },
<span id="D1">陰影效果 </span >{ text-align: center;
font-weight : bold;
text-shadow:5px 5px 10px black ; }
<span id="D2">字型輪廓</span>{ color: white;
letter-spacing: 3px;
font-weight:bold ;
text-shadow: -2px 0 0 black,
0 2px 0 black,
2px 0 0 black,
0 -2px 0 black; }
<span id="D3">活動陰影</span>{ animation: mymove 5s infinite; }
@keyframes mymove{10% {text-shadow:10px 10px 20px gold;}
25% {text-shadow:0px 20px 20px red; }
35% {text-shadow:-10px 10px 20px gold; }
45% {text-shadow:-10px 10px 20px orangered; }
55% {text-shadow:-10px 1px 20px orange; }
65% {text-shadow:-10px -10px 20px tomato; }
75% {text-shadow:10px -10px 20px darkorange; }
85% {text-shadow:0px -10px 20px red; }
100% {text-shadow:10px 0px 20px deeppink; } } }
</pre>
<style>
#D1 { font-size: 30px ;
text-align: center;
font-weight : bold;
text-shadow:5px 5px 10px black ;}
#D2 { font-size: 30px ;
color: white;
letter-spacing: 3px;
font-weight:bold ;
text-shadow: -2px 0 0 black,
0 2px 0 black,
2px 0 0 black,
0 -2px 0 black;}
#D3 {font-size: 30px ;
animation: mymove 5s infinite; }
@keyframes mymove{10% {text-shadow:10px 10px 20px gold;}
25% {text-shadow:0px 20px 20px red; }
35% {text-shadow:-10px 10px 20px gold; }
45% {text-shadow:-10px 10px 20px orangered; }
55% {text-shadow:-10px 1px 20px orange; }
65% {text-shadow:-10px -10px 20px tomato; }
75% {text-shadow:10px -10px 20px darkorange; }
85% {text-shadow:0px -10px 20px red; }
100% {text-shadow:10px 0px 20px deeppink; } }
pre {font-size: 18px;}
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
<style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('text_hadowA','700');</script>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="text_hadowb">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<div id="div1">
<pre><span id="s0"> 陰影效果</span> { font-size: 30px ;
color:orange;
font-weight : bold;
text-shadow:5px 5px 5px navy; }
<span id="s1"> 加凸文字</span> { font-size: 25px;
font-weight : bold;
text-shadow: -2px -2px white, 1px 1px #333; }
<span id="s2"> 加凹文字</span> { font-size: 25px;
font-weight : bold;
text-shadow: 2px 2px white, -1px -1px #333; }
<span id="s3">立體文字</span> { font-size: 50px;
color:blue ;
font-weight:bold ;
text-align: center;
text-shadow:2px 2px 2px white,
3px 3px 3px white,
4px 4px 3px white,
5px 5px 3px white,
6px 6px 6px white,
8px 7px 3px black }
</pre>
</div>
<style>
#div1 { background: #CCC;
height:99%;
border-style:outset;}
#s0 { font-size: 30px ;
color:orange;
font-weight : bold;
text-shadow:5px 5px 5px navy;}
#s1 { font-size: 25px;
//text-align:center;
font-weight : bold;
text-shadow: -2px -2px white, 1px 1px #333;}
#s2 { font-size: 25px;
font-weight : bold;
text-shadow: 3px 3px white, -1px -1px #333}
#s3 { font-size: 50px;
color:blue ;
font-weight:bold ;
text-align: center;
text-shadow:2px 2px 2px white,
3px 3px 3px white,
4px 4px 3px white,
5px 5px 3px white,
6px 6px 6px white,
8px 7px 3px black}
pre {font-size: 18px;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('text_hadowb','700');</script>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/2658668311163551796" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size:10px; opacity: 0.3; float:left;clear:left;">
<a href="https://html.ug5g.com/2024/03/text-shadow.html" target="_blank" title="HTML">#ccs</a>
<a href="https://html.ug5g.com/2024/03/text-shadow.html" target="_blank" title="HTML">#HTML</a>
<a href="https://html.ug5g.com/2024/03/text-shadow.html" target="_blank" title="HTML">#text-shadow</a>
<a href="https://html.ug5g.com/2024/03/text-shadow.html" target="_blank" title="HTML">#文字陰影效果</a>
<a href="https://html.ug5g.com/2024/03/text-shadow.html" target="_blank" title="HTML">#CCS text-shadow</a>
<a href="https://html.ug5g.com/2024/03/text-shadow.html" target="_blank" title="HTML">#shadow effect</a>
</nobr> CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-48836638863158195652024-03-20T18:59:00.000-07:002024-03-20T23:36:03.603-07:00CSS padding<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="padding_A">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<h3>CSS padding 內距屬性與用法範例 留白</h3>
<pre>
CSS padding: 留白 邊框內的部分。一個盒子有四個邊,
所以我們可以對這四個邊的留白逐一設定。
CSS : padding: [上] [右] [下] [左] padding: [上下] [左右]
padding: [上] [左右] [下] padding: [四個邊同樣値]
CSS padding 的四個邊獨立寫法 : padding-top :與上個邊的距離
padding-right :與右方個邊距離
padding-bottom:與下方個邊距離
padding-left :與左個邊的距離
padding 可以的值有 auto、%、em、px、pt </pre>
<br>
padding :
<input type="number" id="In1" value="10" onchange="change()" min="0" max="50" />
<input type="number" id="In2" value="10" onchange="change()" min="0" max="50" />
<input type="number" id="In3" value="10" onchange="change()" min="0" max="50"/>
<input type="number" id="In4" value="10" onchange="change()" min="0" max="50"/>
<br><br>
<table id="DPP" >
<tbody><tr><td>
<div id="TT">padding</div>
</td></tr></tbody></table>
<script>
function change(){
//alert(In1)
if(In1.value<0){In1.value=0}
if(In2.value<0){In2.value=0}
if(In3.value<0){In3.value=0}
if(In4.value<0){In4.value=0}
var a= In1.value+"px "+In2.value+"px "+In3.value+"px "+In4.value+"px ";
TT.style.padding = a ;
}
</script>
<style>
input {width:80px}
#TT {padding:10 10 10 10;}
#DPP { border: 1px solid;}
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
pre { font-size: 18px; }
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('padding_A','700');</script>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="margin">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<h3>CSS margin 屬性用來定義一個區域 </h3>
<pre>
例如 DIV span img 等 的外邊界距離 ,
CSS : margin : [上] [右] [下] [左] margin : [上下] [左右]
margin : [上] [左右] [下] margin : [四個邊同樣値]
CSS margin 的四個邊獨立寫法 margin-top:與上方元素的距離
margin-right:與右方元素的距離
margin-bottom:與下方元素的距離
margin-left:與左方元素的距離 margin
可以的值有 auto、%、em、px、pt </pre>
<br>
margin :
<input type="number" id="In1" value="10" onchange="change()" />
<input type="number" id="In2" value="10" onchange="change()" />
<br>
<br>
<div id="DPP">
<div id="TT"><span id="sp">margin</span></div>
</div>
<script>
function change(){
var a= In1.value+"px "+In2.value+"px ";
TT.style.margin= a ;
//alert(TT.style.margin)
}
change();
</script>
<style>
input {width:80px}
#DPP { padding: 0px;
border: 1px solid;
width: 200px;
height:200px;
margin: 0 auto;
font-size: 20px;}
// line-height: 1.5;
//letter-spacing: 1px;
#TT { margin:10px 10px;}
#sp { border: 1px solid;}
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
pre { font-size: 18px; }
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('margin','700');</script>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/4883663886315819565" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size:10px; opacity: 0.3; float:left;clear:left;">
<a href="https://html.ug5g.com/2024/03/css-padding.html" target="_blank" title="HTML">#ccs</a>
<a href="https://html.ug5g.com/2024/03/css-padding.html" target="_blank" title="HTML">#CCS</a>
<a href="https://html.ug5g.com/2024/03/css-padding.html" target="_blank" title="HTML">#CCS padding</a>
<a href="https://html.ug5g.com/2024/03/css-padding.html" target="_blank" title="HTML">#CCS margin </a>
<a href="https://html.ug5g.com/2024/03/css-padding.html" target="_blank" title="HTML">#HTML padding</a>
<a href="https://html.ug5g.com/2024/03/css-padding.html" target="_blank" title="HTML">#HTML margin</a>
<a href="https://html.ug5g.com/2024/03/css-padding.html" target="_blank" title="HTML">#內距屬性</a>
<a href="https://html.ug5g.com/2024/03/css-padding.html" target="_blank" title="HTML">#外距屬性</a>
</nobr> CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-22242421172422377182024-03-20T06:31:00.000-07:002024-03-20T18:53:00.048-07:00CSS word-wrap<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="word-wrap-A">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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>
<script>
overflow.style.overflow = "visible" ;
function Change(x){
overflow.style.overflow = x;
if(x == "overflow-x:hidden"){ overflow.style.overflow='scroll' ;
overflow.style.overflowX='hidden' ; }
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>
<style>
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
#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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('word-wrap-A','700');</script>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="word-wrap-B">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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>
<br>
<br>
<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>
<script>
function change(x){
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>
<style>
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
.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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('word-wrap-B','700');</script>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/2224242117242237718" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size:10px; opacity: 0.3; float:left;clear:left;">
<a href="https://html.ug5g.com/2024/03/css-word-wrap.html" target="_blank" title="HTML">#word-break</a>
<a href="https://html.ug5g.com/2024/03/css-word-wrap.html" target="_blank" title="HTML">#word-wrap</a>
<a href="https://html.ug5g.com/2024/03/css-word-wrap.html" target="_blank" title="HTML">#word-break: normal</a>
<a href="https://html.ug5g.com/2024/03/css-word-wrap.html" target="_blank" title="HTML">#word-break: break-all</a>
<a href="https://html.ug5g.com/2024/03/css-word-wrap.html" target="_blank" title="HTML">#word-break: keep-all</a>
<a href="https://html.ug5g.com/2024/03/css-word-wrap.html" target="_blank" title="HTML">#word-wrap: normal</a>
<a href="https://html.ug5g.com/2024/03/css-word-wrap.html" target="_blank" title="HTML">#word-wrap: break-word</a>
<a href="https://html.ug5g.com/2024/03/css-word-wrap.html" target="_blank" title="HTML">#CSS 文字換行技巧</a>
<a href="https://html.ug5g.com/2024/03/css-word-wrap.html" target="_blank" title="HTML">#CSS overflow </a>
<a href="https://html.ug5g.com/2024/03/css-word-wrap.html" target="_blank" title="HTML">#CSS 控制捲軸</a>
<a href="https://html.ug5g.com/2024/03/css-word-wrap.html" target="_blank" title="HTML">#CSS overflow</a>
<a href="https://html.ug5g.com/2024/03/css-word-wrap.html" target="_blank" title="HTML">#CSS overflow-x</a>
<a href="https://html.ug5g.com/2024/03/css-word-wrap.html" target="_blank" title="HTML">#CSS overflow-y</a>
<a href="https://html.ug5g.com/2024/03/css-word-wrap.html" target="_blank" title="HTML">#CSS overflow :visible</a>
</nobr> CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-65794304695600921062024-03-19T18:56:00.000-07:002024-03-25T06:36:34.121-07:00google apps script A<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="w19920221142A">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<h3>Google Apps Script<br>
建立 Google Sheets 為網頁資料庫</h3>
<center>
<table ><tbody><tr>
<td class="T1" >HTML</td>
<td class="T2">⇦ data ⇨</td>
<td class="T3" >Google Apps Script</td>
<td class="T2" >⇦ data ⇨</td>
<td class="T1" >Google Sheets</td>
</tr></tbody></table>
</center>
<br><br>
<h3><img style="width:90%;" src="https://developers.google.com/apps-script/images/landing-page-hero.svg" /></h3>
<br><br>
☛ <a href="https://developers.google.com/apps-script" target="_blank" title="HTML">Google Apps Script 官網</a>
<br>
☛ <a href="https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet" target="_blank" title="HTML">使用 google Apps 腳本自動執行任務</a>
<br>
<pre>1) 在 google 試算表內,功能選項 -> 擴充功能 -> 進入 Apps Script。
2) 進入 Apps Script 開始編輯 Code.gs,裡頭預設有一個名為
myFunction,接著 myFunction 改為 function doGet(e){...}。
3) doGet 包含一個 e 的參數,用來接收 HTML 值 e.parameter 傳來給
Apps Script 給 Code.gs 的值所解析出來的值。
4) 完成程式後,右上有 [部署] -> 新增部署 -> 網頁應用程式 設定 。
5) 得出 https://script.google.com/.........ugJfQq3FxD2-ymA/dev
</pre>
<style>
.T1 {width:100px;border: 1px solid black;text-align: center;color : blue;
background:radial-gradient(circle at center,yellow,red);}
.T3 {width:150px;border: 1px solid black;text-align: center;color : blue;
background:radial-gradient(circle farthest-corner at left,yellow,red);background:radial-gradient(circle farthest-corner at left,yellow,red);}
.T2 {width:80px;text-align: center}
pre { font-size: 20px ;}
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('w19920221142A','1200');</script>
</div>
<!---------------------Apps Script 開始編輯 程式碼.gs-----------------------------------------------------------------><!---------------------------------------------------------------------------------------><!---------------------------------------------------------------------------------------><!--------------------------------------------------------------------------------------->
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="w19920221142AppsScript程式碼">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<h3>Google Apps Script<br>
我的示範 Apps Script</h3>
<div>
var SpreadSheet = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1TK0Il4T6OAH5xVZ9w6Pa2_KMVmlpva6pTDn0lhxV-ro/edit#gid=0');
var SheetName = SpreadSheet.getSheetByName('工作表1');
var obj = {} ;
var objA = { 檔案名稱: SpreadSheet.getName(),
工作表名: SheetName.getName(),
資料筆數: SheetName.getLastRow(),
資料項目: SheetName.getLastColumn(), } ;
function doGet(e) {
var parameter = e.parameter ;
// if( parameter.dow == "read"){Read() ;return ContentService.createTextOutput(JSON.stringify(objA)).setMimeType(ContentService.MimeType.JSON) }
if( parameter.dow == "addnew"){
SheetName.appendRow([" "]);
return ContentService.createTextOutput(parameter.dow ); }
if( parameter.dow == "Del"){
SheetName.deleteRow(parameter.idd);
return ContentService.createTextOutput(parameter.dow ); }
if( parameter.dow == "UA"){
SheetName.insertRows(parameter.idd);
return ContentService.createTextOutput(parameter.dow ); }
if( parameter.dow == "Dchange"){
var range=SheetName.getRange(parameter.idd,parameter.cow ) ;
range.setValue(parameter.newD);
return ContentService.createTextOutput(parameter.cow ); }
Read() ;
return ContentService.createTextOutput(JSON.stringify(objA)).
setMimeType(ContentService.MimeType.JSON) ;
}
function Read() { var data = SheetName.getDataRange().getValues();
obj.content = data;
Object.assign( objA,obj ,)
Logger.log(obj )
//return ContentService.createTextOutput(JSON.stringify(objA)).setMimeType(ContentService.MimeType.JSON)
}
</textarea>
<div class="DP">00</div></div>
<script>WWFT('w19920221142AppsScript程式碼','1200');</script>
</div>
<!---------------------HTML------------------------------------------------------------------><!---------------------------------------------------------------------------------------><!---------------------------------------------------------------------------------------><!--------------------------------------------------------------------------------------->
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="w19920221142HTML">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<div class="DDiv">
html 程式訪問 google Apps Script 值 data 傳回 google 工作表1 內容。
<br />var <R>appUrl</R> = "我的 google Apps Script 應用程式的網址",
<ol>
<li> <</span>div id="DP"><</span>/div>
<br>
<br>
<li> <</span>script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><li><</>/script>
<br>
<br>
<li> <</span>script>
<li> var <R>appUrl</R> = "https://script.google.com/macros/s/AKfycbwC0IQxXDBimU4xPKP_PxILswJ-0ozP_b5xDf4u0r2RARtA9yZiALSNEn7ebu6XEKrD1Q/exec" ;
<br>
<br>
<li>parameter = {dow:'read' };
<br>
<li>$.get(appUrl, parameter, function(data) {
<li> $('#DP').text(JSON.stringify(JSON.parse(data)) ;
<li> })
<li> <</c>/script>
</ol>
<br><br>
傳回 :<br>
<div id="DP"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</div>
<script>
var appUrl = "https://script.google.com/macros/s/AKfycbwC0IQxXDBimU4xPKP_PxILswJ-0ozP_b5xDf4u0r2RARtA9yZiALSNEn7ebu6XEKrD1Q/exec" ;
parameter = {dow:'read' };
$.get(appUrl, parameter, function(data) {
$('#DP').text(JSON.stringify(data )) ;
})
</script>
<style>
ol {background-color:tan ;}
li {background-color:ivory ;padding-left:10px;text-align: left;}
.DDiv {word-break: break-all; word-wrap: break-word;}
R {color:red}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('w19920221142HTML','600');</script>
</div>
<!---------------------HTML GET data------------------------------------------------------------------><!---------------------------------------------------------------------------------------><!---------------------------------------------------------------------------------------><!--------------------------------------------------------------------------------------->
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="w19920221142HTML_GET">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<div class="DDiv" >
<ol>
<li><<c>div id="DP"><<c>/div>
<br>
<li><<c>script type="text/javascript" >
<li> var xhr = new XMLHttpRequest();
<br> xhr.open("GET", "https://script.google.com/macros/s/AKfycbwC0IQxXDBimU4xPKP_PxILswJ-0ozP_b5xDf4u0r2RARtA9yZiALSNEn7ebu6XEKrD1Q/exec", false);
<li> xhr.send();
<li> var json = xhr.responseText;
<li> DP.innerHTML =json ;
<li><<c>/script>
</ol>
</div>
<br><br>
<!------------------------------------>
<div id="DP"></div>
<script type="text/javascript" >
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://script.google.com/macros/s/AKfycbwC0IQxXDBimU4xPKP_PxILswJ-0ozP_b5xDf4u0r2RARtA9yZiALSNEn7ebu6XEKrD1Q/exec", false);
xhr.send();
var json = xhr.responseText;
DP.innerHTML =json ;
</script>
<style>
ol {background-color:tan ;}
li {background-color:ivory ;padding-left:10px;}
.DDiv {word-break: break-all; word-wrap: break-word;}
R {color:red}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('w19920221142HTML_GET','600');</script>
</div>
<!-------------------------------------------------------------------------------------------------><!---------------------------------------------------------------------------------------><!---------------------------------------------------------------------------------------><!--------------------------------------------------------------------------------------->
<br>
<div style="clear:both">
☛ <a href="https://html.ug5g.com/search/label/Blogger%20Google%E8%B3%87%E6%96%99%E5%BA%AB" target="_blank" title="HTML">Blogger Google資料庫</a>
</div>
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/6579430469560092106" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size:10px; opacity: 0.3;">
<a href="https://html.ug5g.com/2022/09/google-apps-script-a.html" target="_blank" title="HTML">用JavaScript連結Google Sheets</a>
<a href="https://html.ug5g.com/2022/09/google-apps-script-a.html" target="_blank" title="HTML">建立 Google Sheets 為網頁資料庫 </a>
<a href="https://html.ug5g.com/2022/09/google-apps-script-a.html" target="_blank" title="HTML">Google Sheet</a>
<a href="https://html.ug5g.com/2022/09/google-apps-script-a.html" target="_blank" title="HTML">網頁資料庫 </a>
<a href="https://html.ug5g.com/2022/09/google-apps-script-a.html" target="_blank" title="HTML">How to pull your data from Google Sheets to Web</a>
<a href="https://html.ug5g.com/2022/09/google-apps-script-a.html" target="_blank" title="HTML">Google Sheets to Web</a>
<a href="https://html.ug5g.com/2022/09/google-apps-script-a.html" target="_blank" title="HTML">SpreadsheetApp.openByUrl();</a>
<a href="https://html.ug5g.com/2022/09/google-apps-script-a.html" target="_blank" title="HTML">SpreadSheet.getSheetByName() </a>
<a href="https://html.ug5g.com/2022/09/google-apps-script-a.html" target="_blank" title="HTML">SheetName.getRange()</a>
<a href="https://html.ug5g.com/2022/09/google-apps-script-a.html" target="_blank" title="HTML">range.setValu()</a>
</nobr>
CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-29643179932043027452024-03-19T18:51:00.000-07:002024-03-20T18:14:23.738-07:00Google Apps Script<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="AppsScript程式碼read">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<h3> 用 Google Apps Script 讀取雲端 Google Sheets 內容
</h3><br>
<div id="DP"></div>
<div id="TP"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
var appUrl = "https://script.google.com/macros/s/AKfycbwC0IQxXDBimU4xPKP_PxILswJ-0ozP_b5xDf4u0r2RARtA9yZiALSNEn7ebu6XEKrD1Q/exec" ;
var parameter = {dow:'read' };
$.get(appUrl, parameter, function(data) {
var txt = "" ;
txt += "var <R>appUrl</R> = " ;
txt += "'https://script.google.com/macros......../exec'";
txt += "<br>var <B>parameter</B> = {dow:'read' }";
txt += "<br>$.get(<R>appUrl</R>, <B>parameter</B>,";
txt += " function(data) {.....})" ;
txt += "<br><br>傳回 :" ;
txt += "<br>" ;
txt += "data = " + JSON.stringify(data) ;
txt += "<br>" ;
txt += "<br>data.檔案名稱 = "+ data.檔案名稱 ;
txt += "<br>data.工作表名 = "+ data.工作表名 ;
txt += "<br>data.資料筆數 = "+ data.資料筆數 ;
txt += "<br>data.資料項目 = "+ data.資料項目 ;
txt += "<br>" ;
txt += "<br>data.content = "+ JSON.stringify(data.content) ;
DP.innerHTML= txt ;
var Ttxt="<br><br><table border='1'><tbody>";
for(var trx=0; trx < data.資料筆數 ; trx++ ){
for(var tdx=0; tdx < data.資料項目 ; tdx++ ){
Ttxt+= "<td>" + data.content[trx][tdx] +"</td>" ; }
Ttxt+= "</tr>" ; }
Ttxt += "</tbody></table>";
TP.innerHTML= Ttxt ;
})
</script>
<style>
td {padding: 0 10 ; height:25px}
#DP{font-size: 20px ;}
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
R {color : red;}
B {color : blue;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('AppsScript程式碼read','700');</script>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
<div style="height:700;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="AppsScript程式碼read_RC">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<h3> 用 Google Apps Script 修改雲端 Google Sheets 內容
</h3><br>
<div id="TP"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
var appUrl = "https://script.google.com/macros/s/AKfycbwC0IQxXDBimU4xPKP_PxILswJ-0ozP_b5xDf4u0r2RARtA9yZiALSNEn7ebu6XEKrD1Q/exec" ;
var Mdata={} ;
function Ddisplay(){
TP.innerHTML= "<img src='https://cdn.pixabay.com/animation/2022/11/13/04/07/04-07-22-38_512.gif' width='40px'/>" ;
var parameter = {dow:'read' };
$.get(appUrl, parameter, function(data) {
Mdata = data ;
var Ttxt="<table border='1' id='Dtable' ><tbody>";
for(var trx=0; trx < Mdata.資料筆數 ; trx++ ){
if(Mdata.content[trx][0]=="1"){
Ttxt+= "<tr class='Yb'>"}
Ttxt+= "<td title='above add row' " ;
Ttxt+= "onclick='UA(" + trx + ")'>";
Ttxt+= "⍏</td>" ;
Ttxt+= "<td title='Del Row' " ;
Ttxt+= "onclick='DEL(" + trx + ")'>";
Ttxt+= "✂</td>" ;
if(Mdata.content[trx][0] == "1"){
Ttxt+= "<td> <input type='checkbox' checked "
Ttxt+= " onchange='Dchange("+ trx + ",0,0)'> " }
else{
Ttxt+= "<td> <input type='checkbox' "
Ttxt+= " onchange='Dchange("+ trx + ",0,1)'> " }
for(var tdx=1; tdx < Mdata.資料項目 ; tdx++ ){
Ttxt+= "<td onclick='Dchange(" ;
Ttxt+= trx + "," + tdx + "," ;
Ttxt+= this.innerHTML + ")'>" ;
Ttxt+= Mdata.content[trx][tdx] }
Ttxt+= "</tr>" ; }
Ttxt+= "</tbody></table>" ;
Ttxt+= "<button title='add row' "
Ttxt+= "onclick='addnew()'> add new row</button>" ;
TP.innerHTML= Ttxt ;
})
} Ddisplay() ;
function addnew(x){
TP.innerHTML= "<img src='https://cdn.pixabay.com/animation/2022/11/13/04/07/04-07-38-717_512.gif' width='40px'/>" ;
parameter = { dow: 'addnew' } ;
$.get(appUrl, parameter, function(data) { Ddisplay() }) ;
}
function DEL(x){
TP.innerHTML= "<img src='https://cdn.pixabay.com/animation/2022/11/13/04/07/04-07-38-717_512.gif' width='40px'/>" ;
parameter = { dow: 'Del' , idd: x +1 } ;
$.get(appUrl, parameter, function(data) { Ddisplay() }) ;
}
function UA(x){
TP.innerHTML= "<img src='https://cdn.pixabay.com/animation/2022/11/13/04/07/04-07-38-717_512.gif' width='40px'/>" ;
parameter = { dow: 'UA' , idd: x +1 } ;
$.get(appUrl, parameter, function(data) { Ddisplay() });
}
function Dchange(R,C,D){
var person = D;
if(C != 0){
person = prompt("Modify the content", Mdata.content[R][C]);
if(person == null ){ return } };
TP.innerHTML= "<img src='https://cdn.pixabay.com/animation/2022/11/13/04/07/04-07-38-717_512.gif' width='40px'/>" ;
var parameter = {dow: 'Dchange' , idd:R+1 , cow:C+1 , newD:person };
$.get(appUrl, parameter, function(data) {
Ddisplay()})
}
</script>
<style>
.Yb {background-color: rgba(0,0,0, 0.4)}
td {padding: 0 10}
#DP{font-size: 20px ;}
h3 { text-align: center;
font-size: 30px;
font-weight: bold;
text-shadow: 10px 6px 10px grey;
color: blue; }
R {color : red;}
B {color : blue;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('AppsScript程式碼read_RC','700');</script>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------><!------------------------------------------------------------------------------------------------------------------------------------------------------------------>
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/2964317993204302745" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size:10px; opacity: 0.3; float:left;clear:left;">
<a href="https://html.ug5g.com/2024/03/Google Apps Script.html" target="_blank" title="HTML">#Blogger Google資料庫</a>
<a href="https://html.ug5g.com/2024/03/Google Apps Script.html" target="_blank" title="HTML">HTML 資料庫</a>
<a href="https://html.ug5g.com/2024/03/Google Apps Script.html" target="_blank" title="HTML">#Google Apps Script</a>
<a href="https://html.ug5g.com/2024/03/Google Apps Script.html" target="_blank" title="HTML">#讀取雲端 Google Sheets</a>
<a href="https://html.ug5g.com/2024/03/Google Apps Script.html" target="_blank" title="HTML">#doGet(e)</a>
<a href="https://html.ug5g.com/2024/03/Google Apps Script.html" target="_blank" title="HTML">#doPost(e)</a>
<a href="https://html.ug5g.com/2024/03/Google Apps Script.html" target="_blank" title="HTML">#e.parameter</a>
<a href="https://html.ug5g.com/2024/03/Google Apps Script.html" target="_blank" title="HTML">#JSON.stringify(e)</a>
<a href="https://html.ug5g.com/2024/03/Google Apps Script.html" target="_blank" title="HTML">資料庫</a>
<a href="https://html.ug5g.com/2024/03/Google Apps Script.html" target="_blank" title="HTML">#免費 資料庫</a>
<a href="https://html.ug5g.com/2024/03/Google Apps Script.html" target="_blank" title="HTML">#free 資料庫</a>
<a href="https://html.ug5g.com/2024/03/Google Apps Script.html" target="_blank" title="HTML">#free database</a>
</nobr>
CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-87031226931947095302023-04-06T19:02:00.039-07:002024-03-23T07:45:19.329-07:00HTML Table<h3 class="hhh"><<c>table>標簽定義 HTML 表格。</h3>
<!------------------------------------11111-----------------------------------------------------><!--------------------------------------------------------------------------------------------------------><!--------------------------------------------------------------------------------------------------------><!-------------------------------------------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="htmlTableTXT">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre>
<<c>table> 建立一表格。
<<c>tbody> 表格內容開始。
<<c>caption> **標題** <<c>/caption>
<<c>th> <<c>/th> 表示表頭單元格
<<c>tr> <<c>/tr> 表頭單元格 - 包含表頭信息。
<<c>td> <<c>/td> 代表一列。
<<c>/tbody> 表格內容完結。
<<c>/table> 建立完成。
<<c>table border="1">邊框
<<c>table rules="rows"> 欄位內距距離
rules=none 沒有線條。
rules=groups 位於行組和列組之間的線條。
rules=rows 位於行之間的線條。
rules=cols 位於列之間的線條。
rules=all 位於行和列之間的線條。</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+ */
}
bb{font-size:25px;color:blue;font-weight : bold;}
b{font-size:20px;color:blue;}
r{font-size:20px;color:red;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('htmlTableTXT','500');</script>
</div>
<!----------------------------222222222222------------------------------------------------------><!--------------------------------------------------------------------------------------------------------><!--------------------------------------------------------------------------------------------------------><!-------------------------------------------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="htmlTable2222">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<bb><<c>caption> **標題** <<c>/caption></bb><br><br>
<table border="1" style="width:400px">
<tbody>
<caption>**標題**</caption>
<tr><td>第一行 欄位 1</td><td>第一行 欄位 2
</td></tr>
<tr><td>第二行 欄位 1</td><td>第二行 欄位 2
</td></tr>
</tbody>
</table>
<pre>
<<c>table border="1" style="width:400px">
<<c>tbody>
<<c>caption>**標題**<<c>/caption>
<<c>tr><<c>td>第一行 欄位 1<<c>/td><<c>td>第一行 欄位 2
<<c>/td><<c>/tr>
<<c>tr><c><<c>td>第二行 欄位 1<<c>/td><<c>td>第二行 欄位 2
<<c>/td><<c>/tr>
<<c>/tbody>
<<c>/table>
</pre>
<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+ */
}
bb{font-size:25px;color:blue;font-weight : bold;}
b{font-size:20px;color:blue;}
r{font-size:20px;color:red;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('htmlTable2222','500');</script>
</div>
<!--------------------22222-------------------------------------------------------------------------------------------------------------><!--------------------------------------------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------------------------------------------------------><!---------------------------------------------------------------------------------------------------------------------------------333333--->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="htmlTable3333">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<bb><<c>tr> 表頭單元格 - 包含表頭信息</bb><br><br>
<table border="1" style="width:400px">
<tbody>
<tr><th colspan="2">表頭單元格 - 包含表頭信息
</th</tr>
<tr><td>第二行 欄位 1</td><td>第二行 欄位 2
</td></tr>
</tbody>
</table>
<pre>
<<c>table border="1" style="width:400px">
<<c>tbody>
<<c>tr><b><<c>th colspan="2"></b>表頭單元格 - 包含表頭信息
<b><<c>/th>></b><<c>/tr>
<<c>tr><c><<c>td>第二行 欄位 1<<c>/td><<c>td>第二行 欄位 2
<<c>/td><<c>/tr>
<<c>/tbody>
<<c>/table>
</pre>
<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+ */
}
bb{font-size:25px;color:blue;font-weight : bold;}
b{font-size:20px;color:blue;}
r{font-size:20px;color:red;}
</style>
</textarea>
<div class="DP">00</div>
</div>
<script>
WWFT('htmlTable3333','500');
</script>
</div>
<!-------------------444444444444--------------------------------------------------------------------><!-----------------------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="htmlTable4444">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<bb><<c>table border="10" ></bb><br><br>
<table border="10" width="80%" >
<tbody>
<tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr>
<tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr>
</tbody></table>
<pre>
<<c>table <b>border="10"</b> style="width:400px">
<<c>tbody>
<<c>tr><<c>td>第一行 欄位 1<<c>/td><<c>td>第一行 欄位 2
<<c>/td>><<c>/tr>
<<c>tr><c><<c>td>第二行 欄位 1<<c>/td><<c>td>第二行 欄位 2
<<c>/td><<c>/tr>
<<c>/tbody>
<<c>/table>
</pre>
<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+ */
}
bb{font-size:25px;color:blue;font-weight : bold;}
b{font-size:20px;color:blue;}
r{font-size:20px;color:red;}
</style>
</textarea>
<div class="DP">00</div>
</div>
<script>
WWFT('htmlTable4444','500');
</script>
</div>
<!-----------------444444444444----------------------------------------------------------------------------><!-----------------------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="htmlTable55555">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<bb><<c>table cellspacing="30" ></bb><br><br>
<table border="1" cellspacing="30" width="80%" >
<tbody>
<tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr>
<tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr>
</tbody></table>
<pre>
<<c>table border="1" <b>cellspacing="30"</b> style="width:400px">
<<c>tbody>
<<c>tr><<c>td>第一行 欄位 1<<c>/td><<c>td>第一行 欄位 2
<<c>/td>><<c>/td>
<<c>tr><c><<c>td>第二行 欄位 1<<c>/td><<c>td>第二行 欄位 2
<<c>/td><<c>/tr>
<<c>/tbody>
<<c>/table>
</pre>
<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+ */
}
bb{font-size:25px;color:blue;font-weight : bold;}
b{font-size:20px;color:blue;}
r{font-size:20px;color:red;}
</style>
</textarea>
<div class="DP">00</div>
</div>
<script>
WWFT('htmlTable55555','500');
</script>
</div>
<!----------------------6666666666-------------------------------------------------------------------------><!-----------------------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="htmlTable66">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<bb><<c>table colspan="2" ></bb><br><br>
<table border="1" width="80%" >
<tbody>
<tr><td colspan="2" align="center">橫 二合併為一</td></tr>
<tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr>
</tbody></table>
<pre>
<<c>table border="1" style="width:400px">
<<c>tbody>
<<c>tr><<c>td <b>colspan="2" align="center"</b>>橫 二合併為一<<c>/td><<c>/tr>
<<c>/td>><<c>/td>
<<c>tr><c><<c>td>第二行 欄位 1<<c>/td><<c>td>第二行 欄位 2
<<c>/td><<c>/tr>
<<c>/tbody>
<<c>/table>
</pre>
<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+ */
}
bb{font-size:25px;color:blue;font-weight : bold;}
b{font-size:20px;color:blue;}
r{font-size:20px;color:red;}
</style>
</textarea>
<div class="DP">00</div>
</div>
<script>
WWFT('htmlTable66','500');
</script>
</div>
<!------------------7777777777------------------------------------------------------------------><!-----------------------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="htmlTable77">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<bb><<c>table rowspan="2" 直二合併為一></bb><br><br>
<table border="1" width="80%" >
<tbody>
<tr><td rowspan="2">直二合併為一</td><td>第一行 欄位 2</td></tr>
</td><td>第二行 欄位 2</td></tr>
</tbody></table>
<pre>
<<c>table border="1" style="width:400px">
<<c>tbody>
<<c>tr><<c>td rowspan="2">直二合併為一<<c>/td><<c>td>第一行 欄位 2
<<c>/td><<c>/tr>
<<c>tr><c><<c>td>第二行 欄位 2
<<c>/td><<c>/tr>
<<c>/tbody>
<<c>/table>
</pre>
<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+ */
}
bb{font-size:25px;color:blue;font-weight : bold;}
b{font-size:20px;color:blue;}
r{font-size:20px;color:red;}
</style>
</textarea>
<div class="DP">00</div>
</div>
<script>
WWFT('htmlTable77','500');
</script>
</div>
<!---------------------888--------------------------------------------------------------><!-----------------------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="htmlTable88">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<bb><<c>table rules=" rows/cols/all/none" ></bb><br><br>
<table border="1" cellspacing="30" style="width:95%">
<tbody>
<tr><td>
<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>
<style>
td{text-align:center}
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>
</textarea>
<div class="DP">00</div>
</div>
<script>
WWFT('htmlTable88','500');
</script>
</div>
<!-----------------------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------------->
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/8703122693194709530" target="_blank" title="HTML">Edit</a>
</div><br>
<nobr style="font-size:12px; opacity: 0.1; float:left;clear:left;">
<a href="https://html.ug5g.com/2023/04/html-table.html" target="_blank" title="HTML">#html</a>
<a href="https://html.ug5g.com/2023/04/html-table.html" target="_blank" title="HTML">#網頁格式</a>
<a href="https://html.ug5g.com/2023/04/html-table.html" target="_blank" title="HTML">#script</a>
<a href="https://html.ug5g.com/2023/04/html-table.html" target="_blank" title="HTML">#style</a>
<a href="https://html.ug5g.com/2023/04/html-table.html" target="_blank" title="HTML">#html table</a>
<a href="https://html.ug5g.com/2023/04/html-table.html" target="_blank" title="HTML">#table caption</a>
<a href="https://html.ug5g.com/2023/04/html-table.html" target="_blank" title="HTML">#table th</a>
<a href="https://html.ug5g.com/2023/04/html-table.html" target="_blank" title="HTML">#table tr</a>
<a href="https://html.ug5g.com/2023/04/html-table.html" target="_blank" title="HTML">#table td</a>
<a href="https://html.ug5g.com/2023/04/html-table.html" target="_blank" title="HTML">#標簽定義 HTML 表格</a>
<a href="https://html.ug5g.com/2023/04/html-table.html" target="_blank" title="HTML">#table border</a>
<a href="https://html.ug5g.com/2023/04/html-table.html" target="_blank" title="HTML">#table colspan</a>
<a href="https://html.ug5g.com/2023/04/html-table.html" target="_blank" title="HTML">#table rowspan</a>
<a href="https://html.ug5g.com/2023/04/html-table.html" target="_blank" title="HTML">#table rules</a>
</nobr>
CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-81891855212718599822023-04-03T18:40:00.040-07:002024-03-23T07:47:19.481-07:00display table<h3 class="hhh">CSS display:table-caption</h3>
<!------------------------------------11111-----------------------------------------------------><!--------------------------------------------------------------------------------------------------------><!--------------------------------------------------------------------------------------------------------><!-------------------------------------------------------------------------------------------------------->
<div style="height:1440px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="wdisplayTable1">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<table border="1" style="width: 100%;"><tbody>
<tr><th>值</th><th>描述</th></tr>
<tr><td> display:table
</td><td> 顯示 表格 類似 <<c>table></td></tr>
<tr><td> display:table-row-group
</td><td> 行的分組 類似 <<c>tbody></td></tr>
<tr><td> display:table-header-group
</td><td> 表格頭組 類似 <<c>thead></td></tr>
<tr><td> display:table-footer-group
</td><td> 表格尾組 類似<<c>tfoot></td></tr>
<tr><td> display:table-row
</td><td> 表格換行 類似 <<c>tr></td></tr>
<tr><td> display:table-column-group
</td><td> 列的分組 類似 <<c>colgroup></td></tr>
<tr><td> display:table-column
</td><td> 格列顯示 類似 <<c>col></td></tr>
<tr><td> display:table-cell
</td><td> 表格單元格 類似 <<c>td> 和 <<c>th></td></tr>
<tr><td> display:table-caption
</td><td> 表格標題 類似 <<c>caption></td></tr>
</tbody></table>
<pre><b>Example 1</b>
<<c>div class="Table"> <<c>!-- similar <<c>table>-->
<<c>div class="tr" > <<c>!-- similar <<c>tr>----->
<<c>!-- similar <<c>td> ------>
<<c>div class="td alignCenter verticalAlignTop" >
text-align:center;<<c>br>vertical-align:top;<<c>/div>
<<c>div class="td alignCenter verticalAlignMiddle">
text-align:center;<<c>br>vertical-align:middle;<<c>/div>
<<c>div class="td alignCenter verticalAlignBottom">
text-align:center;<<c>br>vertical-align: bottom;<<c>/div>
<<c>/div>
<<c>div class="tr" > <<c>!-- similar <<c>tr>-->
<<c>!-- similar <<c>td> ------>
<<c>div class="td alignLeft verticalAlignTop">
text-align:left;<<c>br>vertical-align:top;<<c>/div>
<<c>div class="td alignCenter verticalAlignMiddle" >
text-align: center;<<c>br>vertical-align: middle;<<c>/div>
<<c>div class="td alignRight verticalAlignBottom " >
text-align:right ;<<c>br>vertical-align: bottom;<<c>/div>
<<c>/div>
<<c>/div>
<<c>style>
.Table {display:table;width: 100%;font-size: 23px;}
div {border: 1px solid #f00;}
.tr {display:table-row;height: 200px; }
.td {display:table-cell;width:33%;}
.alignCenter {text-align:center;}
.alignLeft {text-align:left;}
.alignRight {text-align:right;}
.verticalAlignTop {vertical-align:top;}
.verticalAlignMiddle {vertical-align:middle;}
.verticalAlignBottom {vertical-align:bottom;}
<<c>/style>
</pre>
<style>
td {padding-left:10px}
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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('wdisplayTable1','1400');</script>
</div>
<!----------------------------222222222222------------------------------------------------------><!--------------------------------------------------------------------------------------------------------><!--------------------------------------------------------------------------------------------------------><!-------------------------------------------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="wdisplayTable2">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<b>Example 1</b>
<div class="Table">
<div class="tr" > <!-- similar <tr>-->
<div class="td alignCenter verticalAlignTop" >
text-align:center;<br>vertical-align:top;</div>
<div class="td alignCenter verticalAlignMiddle">
text-align:center;<br>vertical-align:middle;</div>
<div class="td alignCenter verticalAlignBottom">
text-align:center;<br>vertical-align: bottom;</div>
</div>
<div class="tr" > <!-- similar <tr>-->
<div class="td alignLeft verticalAlignTop">
text-align:left;<br>vertical-align:top;</div>
<div class="td alignCenter verticalAlignMiddle" >
text-align: center;<br>vertical-align: middle;</div>
<div class="td alignRight verticalAlignBottom " >
text-align:right ;<br>vertical-align: bottom;</div>
</div>
<style>
.Table {display:table;width: 100%;font-size: 23px;}
div {border: 1px solid #f00;}
.tr {display:table-row;height: 200px; }
.td {display:table-cell;width:33%;}
.alignCenter {text-align:center;}
.alignLeft {text-align:left;}
.alignRight {text-align:right;}
.verticalAlignTop {vertical-align:top;}
.verticalAlignMiddle {vertical-align:middle;}
.verticalAlignBottom {vertical-align:bottom;}
</style>
<style>
td {padding-left:10px}
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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('wdisplayTable2','500');</script>
</div>
<!--------------------22222-------------------------------------------------------------------------------------------------------------><!--------------------------------------------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------------------------------------------------------><!---------------------------------------------------------------------------------------------------------------------------------333333--->
<div style="height:890px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="wdisplayTable4">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<br>
<div style="display:table;width:90%;padding:30px" >
<div style="display:table-cell;width: 33% ;
border: 1px solid #f00;" >
inner Div CSS<br>
display:table-cell<br>width: 33%</div>
<div style="display:table-cell;width: 33% ;
border: 1px solid #f00;" >
inner Div CSS<br>
display:table-cell<br>width: 33%</div>
<div style="display:table-cell;width: 33% ;
border: 1px solid #f00;" >
inner Div CSS<br>
display:table-cell<br>width: 33%</div>
</div>
<span style="position:relative ;background:gold;
top:-270px ; left:20px;">
outer Div CSS display:table ; width:90%</span>
<style>
div{border: 1px solid #f00;height: 200px;}
</style>
<pre>
<<c>div style="display:table;width:90%;padding:30px" >
<<c>div style="display:table-cell;width: 33% ;
border: 1px solid #f00;" >
inner Div CSS<<c>br>
display:table-cell<<c>br>width: 33%<<c>/div>
<<c>div style="display:table-cell;width: 33% ;
border: 1px solid #f00;" >
inner Div CSS<<c>br>
display:table-cell<<c>br>width: 33%<<c>/div>
<<c>div style="display:table-cell;width: 33% ;
border: 1px solid #f00;" >
inner Div CSS<<c>br>
display:table-cell<<c>br>width: 33%<<c>/div>
<<c>/div>
<<c>span style="position:relative ;background:gold;
top:-270px ; left:20px;">
outer Div CSS display:table ; width:90%<<c>/span>
<<c>style>
div{border: 1px solid #f00;height: 200px;}
<<c>/style></pre>
<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+ */
}
bb{font-size:25px;color:blue;font-weight : bold;}
b{font-size:20px;color:blue;}
r{font-size:20px;color:red;}
</style>
</textarea>
<div class="DP">00</div>
</div>
<script>
WWFT('wdisplayTable4','850');
</script>
</div>
<!-----------------------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------------------><!----------------------------------------------------------------------------------------------->
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/8189185521271859982" target="_blank" title="HTML">Edit</a>
</div><br>
<nobr style="font-size:1px; opacity: 0.1; float:left;clear:left;">
<a href="https://html.ug5g.com/2023/04/display-table.html" target="_blank" title="HTML">#html</a>
<a href="https://html.ug5g.com/2023/04/display-table.html" target="_blank" title="HTML">#網頁格式</a>
<a href="https://html.ug5g.com/2023/04/display-table.html" target="_blank" title="HTML">#script</a>
<a href="https://html.ug5g.com/2023/04/display-table.html" target="_blank" title="HTML">#style</a>
<a href="https://html.ug5g.com/2023/04/display-table.html" target="_blank" title="HTML">#div</a>
<a href="https://html.ug5g.com/2023/04/display-table.html">#CSS display:table</a>
<a href="https://html.ug5g.com/2023/04/display-table.html">#CSS display:table-row-group</a>
<a href="https://html.ug5g.com/2023/04/display-table.html">#CSS display:table-header-group</a>
<a href="https://html.ug5g.com/2023/04/display-table.html">#CSS display:table-footer-group</a>
<a href="https://html.ug5g.com/2023/04/display-table.html">#CSS display:table-row</a>
<a href="https://html.ug5g.com/2023/04/display-table.html">#CSS display:table-column-group</a>
<a href="https://html.ug5g.com/2023/04/display-table.html">#CSS display:table-column-group</a>
<a href="https://html.ug5g.com/2023/04/display-table.html">#CSS display:table-column</a>
<a href="https://html.ug5g.com/2023/04/display-table.html">#CSS display:table-cell</a>
<a href="https://html.ug5g.com/2023/04/display-table.html">#CSS display:table-caption</a>
<a href="https://html.ug5g.com/2023/04/display-table.html">#CSS table</a>
<a href="https://html.ug5g.com/2023/04/display-table.html">#CSS tbody</a>
<a href="https://html.ug5g.com/2023/04/display-table.html">#CSS div</a>
</nobr>
CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-21356226156455119952023-04-02T02:49:00.034-07:002023-04-04T01:10:15.584-07:00input text<h3 class="hhh">HTML input text 文字輸入欄位用來讓網友輸入文字</h3>
<style type="text/css">#inputD div { height: 80px;border: 8px outset gainsboro; font-size: 20px ;"}
//#inputD * {width:100px;font-size: 40px ;} </style>
<!----------------------------1111111111---------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!-------------------------------------------------------------->
<div style="height:840px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="WinputTextA">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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 />
</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+ */
}
bb{font-size:25px;color:blue;font-weight : bold;}
b{font-size:20px;color:blue;}
r{font-size:20px;color:red;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('WinputTextA','800');</script>
</div>
<!----------------------------------2222222222-----------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!-------------------------------------------------------------->
<div style="height:840px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="WinputTextB">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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" >
</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+ */
}
bb{font-size:25px;color:blue;font-weight : bold;}
b{font-size:20px;color:blue;}
r{font-size:20px;color:red;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('WinputTextB','800');</script>
</div>
<!------------------33333333--------------------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!-------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="WinputTextcc">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre><bb>input </bb>
<<c>form action="demo_form.asp"> Quantity (between 1 and 5): <<c>input max="5" min="1" name="quantity" type="number" /> <<c>/form>
<form action="demo_form.asp"> Quantity (between 1 and 5): <input max="5" min="1" name="quantity" type="number" /> </form>
<hr>
<<c>form action="demo_form.asp"> <<c>input type="email" /><<c>/form>
<form action="demo_form.asp"> <input type="email" /></form>
<hr>
<<c>input type="file" multiple >
<input type="file" multiple >
</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+ */
}
bb{font-size:25px;color:blue;font-weight : bold;}
b{font-size:20px;color:blue;}
r{font-size:20px;color:red;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('WinputTextcc','500');</script>
</div>
<!--------------------------------------------------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!--------------------------------------------------------------><!-------------------------------------------------------------->
</div>
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/2135622615645511995" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size:1px; opacity: 0.1; float:left;clear:left;">
<a href="https://html.ug5g.com/2023/04/input-text.html" target="_blank" title="HTML">#html</a>
<a href="https://html.ug5g.com/2023/04/input-text.html" target="_blank" title="HTML">#網頁格式</a>
<a href="https://html.ug5g.com/2023/04/input-text.html" target="_blank" title="HTML">#script</a>
<a href="https://html.ug5g.com/2023/04/input-text.html" target="_blank" title="HTML">#style</a>
<a href="https://html.ug5g.com/2023/04/input-text.html" target="_blank" title="HTML">#div</a>
<a href="https://html.ug5g.com/2023/04/input-text.html">#html input</a>
<a href="https://html.ug5g.com/2023/04/input-text.html">#html input text</a>
</nobr>CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-53078652022289337992023-04-01T08:01:00.023-07:002023-04-02T02:58:38.732-07:00input radio<h3 class="hhh">input radio/Checkboxes 選擇框</h3>
<!--------------------------1111111111-------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!----------------------------------------------------------->
<div style="height:440px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="radio111">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('radio111','400');</script>
</div>
<!---------------2222222222----------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!----------------------------------------------------------->
<div style="height:440px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="radio222">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('radio222','400');</script>
</div>
<!--------------------------3333-------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!----------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="radio333">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('radio333','500');</script>
</div>
<!------------------4444444444----css color-----------------------------------------------------------><!-----------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------><!----------------------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="radio444">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
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>
</textarea>
<div class="DP">00</div>
</div>
<script>
WWFT('radio444','500');
</script>
</div>
<!-----------------------------------------------------------------------------><!-----------------------------------------------------------------------------><!-----------------------------------------------------------------------------><!-----------------------------------------------------------------------------><!----------------------------------------------------------------------------->
<div style="clear:both">
<a href="https://html.ug5g.com/search/label/%E6%A8%99%E7%B0%BD%20%3Cinput%3E" target="_blank" title="HTML">input radio/Checkboxes 選擇框</a>
</div>
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/5307865202228933799" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size:1px; opacity: 0.1; float:left;clear:left;">
<a href="https://html.ug5g.com/2023/04/input-radio.html" target="_blank" title="HTML">#html</a>
<a href="https://html.ug5g.com/2023/04/input-radio.html" target="_blank" title="HTML">#網頁格式</a>
<a href="https://html.ug5g.com/2023/04/input-radio.html" target="_blank" title="HTML">#script</a>
<a href="https://html.ug5g.com/2023/04/input-radio.html" target="_blank" title="HTML">#style</a>
<a href="https://html.ug5g.com/2023/04/input-radio.html" target="_blank" title="HTML">#div</a>
<a href="https://html.ug5g.com/2023/04/input-radio.html">#html input radio</a>
<a href="https://html.ug5g.com/2023/04/input-radio.html">#html 選擇框</a>
</nobr>CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-50662268851799531232023-04-01T01:09:00.027-07:002023-04-01T03:22:09.684-07:00input Checkboxes<h3 class="hhh">input radio/Checkboxes 選擇框</h3>
<!--------------------------1111111111-------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!----------------------------------------------------------->
<div style="height:440px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="CheckboxesAA">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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
</textarea>
<div class="DP">00</div></div>
<script>WWFT('CheckboxesAA','400');</script>
</div>
<!---------------2222222222----------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!----------------------------------------------------------->
<div style="height:440px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="Checkboxesbb">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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
</textarea>
<div class="DP">00</div></div>
<script>WWFT('Checkboxesbb','400');</script>
</div>
<!--------------------------3333-------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!-----------------------------------------------------------><!----------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="Checkboxes333">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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
</textarea>
<div class="DP">00</div></div>
<script>WWFT('Checkboxes333','500');</script>
</div>
<!------------------4444444444----css color-----------------------------------------------------------><!-----------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------><!----------------------------------------------------------------------------------->
<div style="height:300px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="WinputRadio33">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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>
</textarea>
<div class="DP">00</div>
</div>
<script>
WWFT('WinputRadio33','250');
</script>
</div>
<!------------------5555555--------------------------------------------------><!-----------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------><!-----------------------------------------------------------------------------------><!----------------------------------------------------------------------------------->
<div style="height:300px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="WinputRadio44">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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>
</textarea>
<div class="DP">00</div>
</div>
<script>
WWFT('WinputRadio44','250');
</script>
</div>
<!-----------------------------------------------------------------------------><!-----------------------------------------------------------------------------><!-----------------------------------------------------------------------------><!-----------------------------------------------------------------------------><!----------------------------------------------------------------------------->
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/5066226885179953123" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size:1px; opacity: 0.1; float:left;clear:left;">
<a href="https://html.ug5g.com/2023/04/input-checkboxes.html" target="_blank" title="HTML">#html</a>
<a href="https://html.ug5g.com/2023/04/input-checkboxes.html" target="_blank" title="HTML">#網頁格式</a>
<a href="https://html.ug5g.com/2023/04/input-checkboxes.html" target="_blank" title="HTML">#script</a>
<a href="https://html.ug5g.com/2023/04/input-checkboxes.html" target="_blank" title="HTML">#style</a>
<a href="https://html.ug5g.com/2023/04/input-checkboxes.html" target="_blank" title="HTML">#div</a>
<a href="https://html.ug5g.com/2023/04/input-checkboxes.html">#html input Checkboxes</a>
<a href="https://html.ug5g.com/2023/04/input-checkboxes.html">#html 選擇框</a>
</nobr>CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-76733107626615937662023-03-31T22:31:00.027-07:002024-03-23T07:51:40.225-07:00input range<h3 class="hhh">input range option label<br>input range拖動實時觸發事件</h3>
<!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="LRinputRangeA">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('LRinputRangeA','500');
</script>
</div>
<!-----------------------2222222----------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="LRinputRange">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('LRinputRange','500');
</script>
</div>
<!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="LRinputrange111">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('LRinputrange111','500');
</script>
</div>
<!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="LRinputrange222">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<!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>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('LRinputrange222','500');
</script>
</div>
<!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="LRinputrange333">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<!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>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('LRinputrange333','500');
</script>
</div>
<!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="LRinputrange444">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<!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>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('LRinputrange444','500');
</script>
</div>
<!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------>
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/7673310762661593766" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size:1px; opacity: 0.1; float:left;clear:left;">
<a href="https://html.ug5g.com/2020/04/input-range.html">#html input range option label</a>
<a href="https://html.ug5g.com/2020/04/input-range.html">#html input range拖動實時觸發事件</a>
</nobr>CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-39545125496006199492023-03-31T15:36:00.045-07:002023-03-31T19:43:10.581-07:00script setInterval<h3 class="hhh">setInterval() / clearInterval()<br>
method calls a function at specified intervals<br>
方法可按照指定的周期(以毫秒計)來調用函數或計算表達式。</h3>
<!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------>
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="a1">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('a1','500');</script>
</div>
<!------------------222222222222222--------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!-------------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="a2">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('a2','500');</script>
</div>
<!----------------3333333333333--------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!-------------------------------------------------------------------><!------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="a3">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('a3','500');</script>
</div>
<!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!-------------------------------------------------------------------------->
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/3954512549600619949" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size: 1px; opacity: 0.1;">
<a href="https://html.ug5g.com/2023/03/script-setinterval.html" target="_blank" title="HTML">#html</a>
<a href="https://html.ug5g.com/2023/03/script-setinterval.html" target="_blank" title="HTML">#網頁格式</a>
<a href="https://html.ug5g.com/2023/03/script-setinterval.html" target="_blank" title="HTML">#script</a>
<a href="https://html.ug5g.com/2023/03/script-setinterval.html" target="_blank" title="HTML">#style</a>
<a href="https://html.ug5g.com/2023/03/script-setinterval.html" target="_blank" title="HTML">#div</a>
<a href="https://html.ug5g.com/2023/03/script-setinterval.html" target="_blank" title="HTML">#script 延遲執行 setInterval(),</a>
<a href="https://html.ug5g.com/2023/03/script-setinterval.html" target="_blank" title="HTML">#script 延遲執行 clearInterval(),</a>
<a href="https://html.ug5g.com/2023/03/script-setinterval.html" target="_blank" title="HTML">#script setInterval()</a>
<a href="https://html.ug5g.com/2023/03/script-setinterval.html" target="_blank" title="HTML">#script clearInterval(),</a>
</nobr> CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-83009446879529584032023-03-31T03:47:00.033-07:002023-03-31T20:46:18.426-07:00 CSS position: fixed<h3 class="hhh">position 屬性指定了元素的定位類型</h3>
<!------------11111111111111------txt------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------>
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="aaaaa">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('aaaaa','500');</script>
</div>
<!------------222222------txt------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------>
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="bbbbbb">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('bbbbbb','500');</script>
</div>
<!------------33333------txt------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------>
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="cccc">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<!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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('cccc','500');</script>
</div>
<!------------4444------txt------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------>
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="cc444cc">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<!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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('cc444cc','500');</script>
</div>
<!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!-------------------------------------------------------------------------->
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/8300944687952958403" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size: 1px; opacity: 0.1;">
<a href="https://html.ug5g.com/2023/03/position-fixed.html" target="_blank" title="HTML">#html</a>
<a href="https://html.ug5g.com/2023/03/position-fixed.html" target="_blank" title="HTML">#網頁格式</a>
<a href="https://html.ug5g.com/2023/03/position-fixed.html" target="_blank" title="HTML">#script</a>
<a href="https://html.ug5g.com/2023/03/position-fixed.html" target="_blank" title="HTML">#style</a>
<a href="https://html.ug5g.com/2023/03/position-fixed.html" target="_blank" title="HTML">#div</a>
<a href="https://html.ug5g.com/2023/03/position-fixed.html" target="_blank" title="HTML">#script 延遲執行 setTimeou</a>
<a href="https://html.ug5g.com/2023/03/position-fixed.html" target="_blank" title="HTML">#script setTimeou</a>
<a href="https://html.ug5g.com/2023/03/position-fixed.html" target="_blank" title="HTML">#script clearTimeout</a>
</nobr> CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-27599060311794464832023-03-31T03:38:00.007-07:002023-04-04T02:39:33.353-07:00CSS display flex<h3 class="hhh">display:flex; <br>align-items:auto / align-self:auto / align-content:auto</h3>
<!------------------------1111---justify-content: center / align-items: center---------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------>
標簽 <div> 對齊,
CSS display flex 排版工具 ,
CSS display flex flex-wrap,
CSS display flex flex-direction,
CSS display flex flex-flow,
CSS display flex justify-content,
CSS display flex align-item,
CSS display flex align-content,
CSS display flex align-self,
CSS display flex order,
CSS display flex Flex ,
<div style="height:1640px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="justify-content1aaa">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre> <b> display:flex 排版工具 </b>
如果沒設成 display:flex,可佩配合下列語法 使用 :
1. flex-wrap : nowrap | wrap | wrap-reverse
nowrap:預設值不能換行 wrap:換行 wrap-reverse:反轉換行
2. flex-direction:row | row-reverse | column | column-reverse
row (預設值,由左至右,從上到下)
row-reverse (排列方向和row一樣,但內元件順序會反轉)
column (先從上到下,再由左至右)
column-reverse (排列方向和column一樣,但內元件順序會反轉)
3. flex-flow:wrap | column wrap
4. justify-content: flex-start|flex-end|center|space-between|
space-around|space-evenly|initial|inherit
flex-start 水平左側開始排 flex-end 水平右側開始排
center 水平分中 initial最初的 inherit繼承
space-between 水平 平均分配,貼齊兩側
space-around 水平 平均分配,兩側兩側的間距會較小
space-evenly 水平 平均分配,兩側兩側的間距會相同
5. align-item: stretch | flex-start | flex-end | center |
baseline
flex-start 上至下 開始排 flex-end 下至上 開始排
stretch 會往交錯軸方向將內元素全部填滿
center 上至下分中
6. align-content:stretch | flex-start | flex-end | center |
space-around | space-between | space-evenly
** flex-wrap:wrap 才能觸發 flex-content **
stretch 每行將拉伸以填滿剩餘空間 center 左右分中
flex-start 左側開始排 flex-end 右側開始排
Space-around 是平均分配行的位置,上下兩側較小
Space-between是平均分配行的位置,上下兩側會貼齊
Space-evenly 是平均分配行的位置,上下兩側 間距皆相同
7. align-self: stretch | flex-start | flex-end | center |
baseline
align-self和align-item的功能一樣,但它是針對「單一」對象
8. order:0
order預設值為0,它可以重新定義內元件的排列順序,
順序會依照數值的大小排列
9. Flex (flex-grow、flex-shrink、flex-basis)
</pre>
<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:25px;color:blue;}
r{font-size:20px;color:red;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('justify-content1aaa','1600');</script>
</div>
<!-----------------------22222---div-flex---justify-content: center / align-items: center---------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------><!------------------------------------------------------------------------>
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="div-flex">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<b> div Horizontal & Vertical Align 水平垂直置中</b>
<div id="outerDiv">
<div id="innerDiv">div id="innerDiv" </div>
</div>
<style>
#outerDiv{ width:100% ; height:80% ;
border: 1px solid black;
display: flex ;
justify-content: center ;
align-items: center ; }
#innerDiv{width:150px ; height:150px;
background: gray;
color:white}
pre{position: fixed;top: 20px;left:10px;}
</style>
<pre>div id="outerDiv"
#outerDiv{
width:100%;height:95%;
border:1px solid black;
display:flex ;
justify-content:center;
align-items: center; }
#innerDiv{
width:150px ; height:150px;
background: gray;
color:white }
</pre>
<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:25px;color:blue;}
r{font-size:20px;color:red;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('div-flex','500');</script>
</div>
<!-------------3333333333------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!-------------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="alignItems111">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<b>display:flex + align-self: flex-start; </b>
<div class="outside_DIV">
<div id="div1">div1<br>flex-start</div>
<div id="div2">div2<br>flex-end</div>
<div id="div3">div3<br>center</div>
<div id="div4">div4<br>stretch</div>
<div id="div5">div5<br>baseline</div>
</div>
<pre>
<<c>style>
#div1 { align-self: flex-start}
#div2 { align-self: flex-end; }
#div3 { align-self: center; }
#div4 { align-self: stretch; }
#div5 { align-self: baseline; }
<<c>/style>
</pre>
<style>
.outside_DIV{ display: flex; height: 150px;background: #def; }
#div1 {align-self: flex-start;}
#div2 {align-self: flex-end;}
#div3 {align-self: center;}
#div4 {align-self: stretch;}
#div5 {align-self: baseline;}
.outside_DIV div {text-align: center;
background: gray;
border: 1px solid black;
color: white;
padding: 0.5em;
box-sizing: border-box;
flex-basis: 20%; }
b{font-size:25px;color:blue;}
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+ */
}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('alignItems111','500');</script>
</div>
<!-----------------444444444-------align-content--------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!-------------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="order">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<b>display:flex + order </b>
<div class="outside_DIV">
<div id="div1">div1<br>flex-start</div>
<div id="div2">div2<br>flex-end</div>
<div id="div3">div3<br>center</div>
<div id="div4">div4<br>stretch</div>
<div id="div5">div5<br>baseline</div>
</div>
<pre>
<<c>style>
#div1 { order: 3 }
#div2 { order: 1 }
#div3 { order: 2 }
#div4 { order: 5 }
#div5 { order: 4 }
<<c>/style>
</pre>
<style>
.outside_DIV{ display: flex; height: 150px;background: #def; }
#div1 { order: 3 }
#div2 { order: 1 }
#div3 { order: 2 }
#div4 { order: 5 }
#div5 { order: 4 }
.outside_DIV div {text-align: center;
background: gray;
border: 1px solid black;
color: white;
padding: 0.5em;
box-sizing: border-box;
flex-basis: 20%; }
b{font-size:25px;color:blue;}
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+ */
}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('order','500');</script>
</div>
<!-----------------55555555555-------align-content--------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!-------------------------------------------------------------------------->
<div style="height:840px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="align_content111">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre> <b>display:flex + align-content: stretch; </b>
相交軸上彈性項目的對齊位置
Pack lines toward the center of the flex container
<r>align-content: stretch|center|flex-start|flex-end|
space-between|space-around|initial|inherit</r></pre>
<style>
#outside_DIV{ height: 200px;background: #def;
display: flex;
flex-wrap: wrap;
align-content: stretch; }
#outside_DIV div { text-align: center;
background: gray;
border: 1px solid black;
color: white;
padding: 0.5em;
box-sizing: border-box;
flex-basis: 33%; }
</style>
Example
<div id="outside_DIV">
<div id="div1">01</div>
<div id="div2">02</div>
<div id="div3">03</div>
<div id="div4">04</div>
<div id="div5">05</div>
</div>
<div id="Input">
align-content : <br>
<label class="container">stretch
<input type="radio" name="fradio" value="stretch" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">center
<input type="radio" name="fradio" value="center">
<span class="checkmark"></span>
</label>
<label class="container">flex-start
<input type="radio" name="fradio" value="flex-start">
<span class="checkmark"></span>
</label>
<label class="container">flex-end
<input type="radio" name="fradio" value="flex-end">
<span class="checkmark"></span>
</label>
<br><br>
<label class="container">flex-end
<input type="radio" name="fradio" value="flex-end">
<span class="checkmark"></span>
</label>
<label class="container">space-between
<input type="radio" name="fradio" value="space-between">
<span class="checkmark"></span>
</label>
<label class="container">space-around
<input type="radio" name="fradio" value="space-around">
<span class="checkmark"></span>
</label>
<label class="container">initial
<input type="radio" name="fradio" value="initial">
<span class="checkmark"></span>
</label>
<label class="container">inherit
<input type="radio" name="fradio" value="inherit">
<span class="checkmark"></span>
</label>
</div>
<script>
var Tag= document.querySelectorAll('input[name="fradio"]') ;
Tag.forEach((round) => {
round.addEventListener("click", function() {
outside_DIV.style.alignContent=round.value;
DP1.innerHTML = round.value ;
//DPM.innerHTML = round.value ;
}) })
</script>
<pre>
<<c>style>
#outside_DIV{ height: 250px;background: #def;
display: flex;
flex-wrap: wrap;
<r>align-content: <span id="DP1">stretch</span> ;</r> }
<</c>/style>
<</c>div id="outside_DIV">
<</c>div id="div1">01<</c>/div>
<</c>div id="div2">02<</c>/div>
<</c>div id="div3">03<</c>/div>
<</c>div id="div4">04<</c>/div>
<</c>div id="div5">05<</c>/div>
<</c>/div></pre>
<style>
b{font-size:25px;color:blue;}
r{font-size:20px;color:red;}
b{font-size:25px;color:blue;}
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+ */
}
.container { position: relative;
padding-left: 25px;
cursor: pointer;
font-size: 22px; }
.container input { opacity: 0;
cursor: pointer;}
.checkmark { position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #C0C0C0;
border-radius: 50%;}
.container:hover input ~ .checkmark {
background-color: #808080; }
.container input:checked ~ .checkmark {
background-color: #2196F3; }
.checkmark:after { content: "";
position: absolute;
display: none }
.container input:checked ~ .checkmark:after {
display: block; }
.container .checkmark:after { top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;}
</style>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('align_content111','800');</script>
</div>
<!------------------666666666666--justify-content: center / align-items: center---------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------>
<div style="height:840px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="justify-content111">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<div id="Mid">
<div id="outerDiv">
<div class="innerDiv">1</div>
<div class="innerDiv">2</div>
<div class="innerDiv">3</div>
<div class="innerDiv">4</div>
<div class="innerDiv">5</div>
</div>
</div>
<style>
#Mid{ width:100% ; height:400px ;
//border: 1px solid black;
display: flex ;
justify-content: center ;
align-items: center ; }
#outerDiv{width:50% ; height:60%;
border: 1px solid black;
display: initial ;
justify-content: start;
align-items: normal;
flex-direction: row;
flex-wrap:nowrap ;}
.innerDiv{width:80px ; height:70px;
border: 1px solid black;}
</style>
<table border="1" style="width: 95%;"><tbody>
<tr><td style="width: 300px;">
display: <select onchange="Display(this.value)">
<option value="initial">initial </option>
<option value="flex">flex</option>
<option value="inline-flex">inline-flex</option>
</select>
<br>
justify-content: <select onchange="justifyContent(this.value)">
<option value="start">start</option>
<option value="end">end</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center">center</option>
<option value="left">left</option>
<option value="right">right</option>
<option value="baseline">baseline</option>
<option value="first baseline">first baseline</option>
<option value="last baseline">last baseline</option>
<option value="space-between" >space-between</option>
<option value="space-around">space-around</option>
<option value="space-evenly">space-evenly</option>
<option value="stretch">stretch</option>
</select>
<br>
align-items: <select onchange="alignItems(this.value)">
<option value="normal">normal</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center" >center</option>
<option value="baseline">baseline</option>
<option value="stretch">stretch</option>
<option value="start">start</option>
<option value="end">end</option>
<option value="self-start">self-start</option>
<option value="self-end">self-end</option>
<option value="first baseline">first baseline</option>
<option value="last baseline">last baseline</option>
<option value="safe center">safe center</option>
<option value="unsafe center">unsafe center</option>
<option value="safe right">safe right</option>
<option value="unsafe right">unsafe right</option>
<option value="safe end">safe end</option>
<option value="unsafe end">unsafe end</option>
<option value="safe self-end">safe self-end</option>
<option value="unsafe self-end">unsafe self-end</option>
<option value="safe flex-end">safe flex-end</option>
<option value="unsafe flex-end">unsafe flex-end</option>
</select> ;
<br>
flex-direction: <select onchange="flexDirection(this.value)">
<option value="row">row</option>
<option value="row-reverse">row-reverse</option>
<option value="column">column</option>
<option value="column-reverse">column-reverse</option>
</select> ;
<br>
flex-wrap: <select onchange="flexWrap(this.value)">
<option value="nowrap">nowrap</option>
<option value="wrap">wrap</option>
<option value="wrap-reverse">wrap-reverse</option>
</select> ;
</td><td>
<span id="DPspan"></span>
</td></tr>
</tbody></table>
<script>
outerDiv.style.display = 'initial' ;
outerDiv.style.justifyContent= 'start' ;
outerDiv.style.alignItems= 'normal' ;
outerDiv.style.flexDirection= 'row' ;
outerDiv.style.flexWrap= 'nowrap' ;
function DPcss() {
var tt="<pre>" ;
tt += "<<c>style> " ;
tt += "\n #outerDiv {" ;
tt += "\n width:50% ; height:60% ;" ;
tt += "\n border: 1px solid black ;" ;
tt += "\n display: " ;
tt += outerDiv.style.display + " ;" ;
tt += "\n justify-content:" ;
tt += outerDiv.style.justifyContent+ " ;" ;
tt += "\n align-items:" ;
tt += outerDiv.style.alignItems+ " ;" ;
tt += "\n flex-direction: row ;" ;
tt += outerDiv.style.flexDirection+ " ;" ;
tt += "\n flex-wrap:nowrap ;" ;
tt += outerDiv.style.flexWrap+ " ;" ;
tt += "\n }</pre>"
DPspan.innerHTML= tt ;
} DPcss();
function Display(x) {
outerDiv.style.display = x ; DPcss();}
function alignItems(x){
outerDiv.style.alignItems = x ;DPcss();}
function justifyContent(x){
outerDiv.style.justifyContent= x ;DPcss();}
function flexDirection(x){
outerDiv.style.flexDirection= x ;DPcss();}
function flexWrap(x){
outerDiv.style.flexWrap= x ;DPcss();}
</script>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('justify-content111','800');</script>
</div>
<!-------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!--------------------------------------------------------------------------><!-------------------------------------------------------------------------->
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/2759906031179446483" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size: 1px; opacity: 0.1;">
<a href="https://html.ug5g.com/2023/03/css-display-flex_46.html" target="_blank" title="HTML">#html</a>
<a href="https://html.ug5g.com/2023/03/css-display-flex_46.html" target="_blank" title="HTML">#網頁格式</a>
<a href="https://html.ug5g.com/2023/03/css-display-flex_46.html" target="_blank" title="HTML">#script</a>
<a href="https://html.ug5g.com/2023/03/css-display-flex_46.html" target="_blank" title="HTML">#style</a>
<a href="https://html.ug5g.com/2023/03/css-display-flex_46.html" target="_blank" title="HTML">#div</a>
<a href="https://html.ug5g.com/2023/03/css-display-flex_46.html" target="_blank" title="HTML">#CSS div</a>
<a href="https://html.ug5g.com/2023/03/css-display-flex_46.html" target="_blank" title="HTML">#CSS align-items</a>
<a href="https://html.ug5g.com/2023/03/css-display-flex_46.html" target="_blank" title="HTML">#CSS align-self</a>
<a href="https://html.ug5g.com/2023/03/css-display-flex_46.html" target="_blank" title="HTML">#CSS align-content</a>
<a href="https://html.ug5g.com/2023/03/css-display-flex_46.html" target="_blank" title="HTML">#CSS flex</a>
<a href="https://html.ug5g.com/2023/03/css-display-flex_46.html" target="_blank" title="HTML">#CSS flex-basis</a>
<a href="https://html.ug5g.com/2023/03/css-display-flex_46.html" target="_blank" title="HTML">#CSS flex-basis</a>
</nobr>
CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-28208578040280372622023-03-26T02:37:00.018-07:002023-03-26T05:31:50.223-07:00script setTimeout<h3 class="hhh">setTimeout() 指定延遲時間執行一段程式</h3>
<!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------><!------------------------------------------------------------------------>
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="setTimeoutTXT">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre><b>setTimeout() 指定延遲時間執行一段程式</b>
setTimeout (要執行的代碼, 等待的毫秒數)
or
setTimeout (JavaScript 函數, 等待的毫秒數)
指定一段程式碼或函式在多少毫秒(ms)後執行,並回傳此定時器的編號。
<b>clearTimeout() 清除定時器</b>
可以通過將定時時產生的 ID 標識傳遞給 。
延遲時間執行 var <r>meter</r> = setTimeout( function , 1000)。
清除定時器 clearTimeout(<r>meter</r> )。
</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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('setTimeoutTXT','500');</script>
</div>
<!------------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="setTimeout_F">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<input onclick="Fstart()" id="fstart" type="button" value="開始" />
<input onclick="Fstop()" type="button" value="停止" />
<input onclick="FReset()" id="fReset" type="button" value="重啟" />
<br />
<br />
<div id="time" style="font-size: 30px;">0</div>
<script type="text/javascript">
var x = 0;
var clearid
function Fstart() {
fstart.disabled = true;
fReset.disabled = true;
x ++;
time.innerHTML = x;
clearid = setTimeout ( Fstart, 1000 );
}
function Fstop(){
fstart.disabled = false;
fReset.disabled = false;
clearTimeout(clearid);
}
function FReset(){
x = 0;
time.innerHTML = x;
}
</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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('setTimeout_F','500');</script>
</div>
<!-------------------------------------------------------------------------->
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/2820857804028037262" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size: 1px; opacity: 0.1;">
<a href="https://html.ug5g.com/2023/03/script-settimeout.html" target="_blank" title="HTML">#html</a>
<a href="https://html.ug5g.com/2023/03/script-settimeout.html" target="_blank" title="HTML">#網頁格式</a>
<a href="https://html.ug5g.com/2023/03/script-settimeout.html" target="_blank" title="HTML">#script</a>
<a href="https://html.ug5g.com/2023/03/script-settimeout.html" target="_blank" title="HTML">#style</a>
<a href="https://html.ug5g.com/2023/03/script-settimeout.html" target="_blank" title="HTML">#div</a>
<a href="https://html.ug5g.com/2023/03/script-settimeout.html" target="_blank" title="HTML">#script 延遲執行 setTimeou</a>
<a href="https://html.ug5g.com/2023/03/script-settimeout.html" target="_blank" title="HTML">#script setTimeou</a>
<a href="https://html.ug5g.com/2023/03/script-settimeout.html" target="_blank" title="HTML">#script clearTimeout</a>
</nobr> CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-19482842218826285892023-03-25T06:01:00.026-07:002023-03-26T02:22:01.756-07:00script for while<h3 class="hhh">JavaScript Loop For / while / do...while <br>
迴圈語法。</h3>
<!----------------------111111111111------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!---------------------------------------------------------->
<div style="height:440px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="2222" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre><b>JavaScript For Loop</b>
for (初始表達式 ; 條件式 ; 遞增表達式 ) { 陳述式 代碼塊 }
Example : for (var i = 0; i < 5; i++) { text += i } // 01234
</pre>
<script>
function Fif(x) {
var Select = "??" ;
if(x==10){ Select = "ten"}
if(x==30){ Select = "thirty"}
if(x==60){ Select = "sixty"}
if(x==90){ Select = "ninety"}
txt.innerHTML =Select ;
}
</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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('2222','400');</script>
</div>
<!---------------2222222--------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="height:440px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="3333" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre><b>JavaScript do...while Loop</b>
do { code block to be executed 陳述式 代碼塊 }
while (condition 條件式);
Example : <<c>script>
var text = "";
var i = 0;
do { text += i + " "; i++;}
while (i < 5);
document.write( text )
<<c>/script>
<script>
var text = "";
var i = 0;
do { text += i + " "; i++;}
while (i < 5);
document.write( text )
</script>
</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>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('3333','400');
</script>
</div>
<!---------------33333333333--------toFixed()------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="height:440px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="4444" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre><b>JavaScript while Loop</b>
while ( 條件式 ) { 陳述式 代碼塊 遞增表達式}
Example : <<c>script>
var text = "";
var i = 0;
while (i < 5) { text += i + " "; i++;}
document.write( text )
<<c>/script></pre>
<script>
var text = "";
var i = 0;
while (i < 5) { text += i + " "; i++;}
document.write( text )
</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>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('4444','400');
</script>
</div>
<!---------------2222222--------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/1948284221882628589" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size: 1px; opacity: 0.1;">
<a href="https://html.ug5g.com/2023/03/script-for-while.html" target="_blank" title="HTML">#html</a>
<a href="https://html.ug5g.com/2023/03/script-for-while.html" target="_blank" title="HTML">#網頁格式</a>
<a href="https://html.ug5g.com/2023/03/script-for-while.html" target="_blank" title="HTML">#script</a>
<a href="https://html.ug5g.com/2023/03/script-for-while.html" target="_blank" title="HTML">#style</a>
<a href="https://html.ug5g.com/2023/03/script-for-while.html" target="_blank" title="HTML">#div</a>
<a href="https://html.ug5g.com/2023/03/script-for-while.html" target="_blank" title="HTML">#script for</a>
<a href="https://html.ug5g.com/2023/03/script-for-while.html" target="_blank" title="HTML">#script while</a>
<a href="https://html.ug5g.com/2023/03/script-for-while.html" target="_blank" title="HTML">#script else</a>
<a href="https://html.ug5g.com/2023/03/script-for-while.html" target="_blank" title="HTML">#script Loop</a>
</nobr> CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-81089999611491905132023-03-24T08:14:00.032-07:002023-03-25T06:05:53.433-07:00if else while<h3 class="hhh">JavaScript Math Object <br>
是一個擁有數學常數及數學函數。</h3>
<!-----------------txt-----111111111111------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!---------------------------------------------------------->
<div style="height:640px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="iftxt" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre><b>JavaScript if, else, and else if</b>
if (condition 狀況)
{ block of code to be executed if the condition is
true 條件為真時執行的代碼塊 }
else if (condition2 狀況)
{ block of code to be executed
if the condition1 is false and condition2 is true
條件 1 為假且條件 2 為真時執行的代碼塊 }
else { block of code to be executed if the condition is false
條件為假時執行的代碼塊 }
比較運算子: 等於: == 不等於:!==
大於: > 小於:<
大於等於: >= 小於等於:<=
連接兩個以上的條件都是true &&
連接兩個其中一個條件成true ||
</pre>
<script>
function Fif(x) {
var Select = "??" ;
if(x==10){ Select = "ten"}
if(x==30){ Select = "thirty"}
if(x==60){ Select = "sixty"}
if(x==90){ Select = "ninety"}
txt.innerHTML =Select ;
}
</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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('iftxt','600');</script>
</div>
<!----------------------111111111111------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!---------------------------------------------------------->
<div style="height:640px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="Mif" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre><b>script if 條件敘述</b>
<<c>input onclick="Fif(this.value)" type="button" value="10" />
<<c>input onclick="Fif(this.value)" type="button" value="30" />
<<c>input onclick="Fif(this.value)" type="button" value="60" />
<<c>input onclick="Fif(this.value)" type="button" value="90" />
<<c>input onclick="Fif(this.value)" type="button" value=" " />
<<c>span id="txt">??<<c>/span>
<<c>script>
var Select = "??" ;
if(x==10){ Select = "ten"}
if(x==30){ Select = "thirty"}
if(x==60){ Select = "sixty"}
if(x==90){ Select = "ninety"}
txt.innerHTML =Select ;
}
<<c>/script>
<input onclick="Fif(this.value)" type="button" value="10" /> <input onclick="Fif(this.value)" type="button" value="30" /> <input onclick="Fif(this.value)" type="button" value="60" /> <input onclick="Fif(this.value)" type="button" value="90" /> <input onclick="Fif(this.value)" type="button" value=" " /> <span id="txt">??</span>
</pre>
<script>
function Fif(x) {
var Select = "??" ;
if(x==10){ Select = "ten"}
if(x==30){ Select = "thirty"}
if(x==60){ Select = "sixty"}
if(x==90){ Select = "ninety"}
txt.innerHTML =Select ;
}
</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>
</textarea>
<div class="DP">00</div></div>
<script>WWFT('Mif','600');</script>
</div>
<!---------------2222222--------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="height:640px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="if_else" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre><b>script if 條件敘述</b>
<<c>input onclick="Fif(this.value)" type="button" value="10" />
<<c>input onclick="Fif(this.value)" type="button" value="30" />
<<c>input onclick="Fif(this.value)" type="button" value="60" />
<<c>input onclick="Fif(this.value)" type="button" value="90" />
<<c>input onclick="Fif(this.value)" type="button" value=" " />
<<c>span id="txt">??<<c>/span>
<<c>script>
function Fif(x) {
var Select = (x==10)?"is 10" : (x==30)?"is 30" : (x==60)?"is 60":
(x>10)?"is 90": "??";
txt.innerHTML = Select ;
}
<<c>/script>
<input onclick="Fif(this.value)" type="button" value="10" /> <input onclick="Fif(this.value)" type="button" value="30" /> <input onclick="Fif(this.value)" type="button" value="60" /> <input onclick="Fif(this.value)" type="button" value="90" /> <input onclick="Fif(this.value)" type="button" value=" " /> <span id="txt">??</span>
</pre>
<script>
function Fif(x) {
var Select = (x==10)?"is 10" : (x==30)?"is 30" : (x==60)?"is 60" :
(x>10)?"is 90":"??";
txt.innerHTML =Select ;
}
</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>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('if_else','600');
</script>
</div>
<!---------------33333333333--------toFixed()------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="height:640px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="ifelseelse" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre><b>script if 條件敘述</b>
請選擇 30 Please select 30
<<c>input onclick="Fif(this.value)" type="button" value="10" />
<<c>input onclick="Fif(this.value)" type="button" value="30" />
<<c>input onclick="Fif(this.value)" type="button" value="60" />
<<c>input onclick="Fif(this.value)" type="button" value="90" />
<<c>input onclick="Fif(this.value)" type="button" value=" " />
<<c>span id="txt">??<<c>/span>
<<c>script>
function Fif(x) {
if (x==30){txt.innerHTML= '選擇正確choose correctly';return }
else if( x < 30) {txt.innerHTML='選擇小於/ hoose less than 30'}
else {txt.innerHTML='選擇大於/ elect greater than 30' }
}
<<c>/script>
請選擇 30 Please select 30
<input onclick="Fif(this.value)" type="button" value=1 /> <input onclick="Fif(this.value)" type="button" value=20 /> <input onclick="Fif(this.value)" type="button" value=30 /> <input onclick="Fif(this.value)" type="button" value=60 /> <input onclick="Fif(this.value)" type="button" value=90 /> <span id="txt">??</span>
</pre>
<script>
function Fif(x) {
if (x==30){txt.innerHTML= '選擇正確choose correctly';return }
else if( x < 30) {txt.innerHTML='選擇小於 / Choose less than 30' }
else {txt.innerHTML='選擇大於 / Select greater than 30' }
}
</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>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('ifelseelse','600');
</script>
</div>
<!---------------2222222--------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/8108999961149190513" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size: 1px; opacity: 0.1;">
<a href="https://html.ug5g.com/2023/03/if-else-while.html" target="_blank" title="HTML">#html</a>
<a href="https://html.ug5g.com/2023/03/if-else-while.html" target="_blank" title="HTML">#網頁格式</a>
<a href="https://html.ug5g.com/2023/03/if-else-while.html" target="_blank" title="HTML">#script</a>
<a href="https://html.ug5g.com/2023/03/if-else-while.html" target="_blank" title="HTML">#style</a>
<a href="https://html.ug5g.com/2023/03/if-else-while.html" target="_blank" title="HTML">#div</a>
<a href="https://html.ug5g.com/2023/03/if-else-while.html" target="_blank" title="HTML">#script 條件真假 if else</a>
<a href="https://html.ug5g.com/2023/03/if-else-while.html" target="_blank" title="HTML">#script if else</a>
<a href="https://html.ug5g.com/2023/03/if-else-while.html" target="_blank" title="HTML">#運算子</a>
</nobr> CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-45766692537526358682023-03-23T01:28:00.037-07:002023-03-23T02:29:35.528-07:00getElementById<h3 class="hhh">document.getElementById(id)<br>取得 id 的元素 </h3>
<!----------------------111111111111------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!---------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="getElementById111" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre><b>document.getElementById()</b>
<div id="div1">html.ug5g.com My id = div1</div>
<input type="button" onclick="div1.style.color='red'" value='document.getElementById("div1").style.color="red"' />
<input type="button" onclick="div1.style.color='blue'" value='document.getElementById("div1").style.color="blue"' />
<input type="button" onclick="div1.style.color='darkorange'" value= 'document.getElementById("div1").style.color="darkorange"' />
<input type="button" onclick="div1.style.fontSize ='20px'" value='document.getElementById("div1").style.fontSize ="20px"' />
<input type="button" onclick="div1.style.fontSize ='30px'" value='document.getElementById("div1").style.fontSize ="30px"' />
<input type="button" onclick="div1.style.fontSize ='40px'" value= 'document.getElementById("div1").style.fontSize ="40px"' />
</pre>
<style>
b { font-size:30px;color:blue; }
input { font-size:20px;color:black;width: 600px;cursor:pointer }
#div1 { font-size:20px;color:blue;height:100px; }
</style>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('getElementById111','500');
</script>
</div>
<!---------------2222222------------getElementsByName--------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="height:540px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="getElementById222" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre><b>document.getElementsByName()</b>
<span name="Name"><<c>div name="Name"><<c>/div></span >
<span name="Name"><<c>p name="Name"><<c>/p></span >
<span name="Name"><<c>span name="Name"><<c>/span></span>
<span name="Name"><<c>h1 name="Name"><<c>/h1></span >
<div id="dp"></div>
</pre>
<script>
var xx= document.getElementsByName("Name") ;
var txt="" ;
txt += 'var xx= document.getElementsByName("Name")' ;
txt += '\nxx.length = '+ xx.length;
txt += '\nxx[0].innerHTML= '+ xx[0].innerHTML;
txt += '\nxx[1].innerHTML= '+ xx[1].innerHTML;
txt += '\nxx[2].innerHTML= '+ xx[2].innerHTML;
txt += '\nxx[3].innerHTML= '+ xx[3].innerHTML;
dp.innerHTML = txt;
</script>
<style>
pre { font-size:20px }
b { font-size:30px;color:blue; }
</style>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('getElementById222','500');
</script>
</div>
<!---------------33333333333--------getElementsByClassName------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="height:590px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="getElementsByClassName" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre><b>document.getElementsByClassName()</b>
<span class="CLASS"><<c>div class="CLASS"><<c>/div></span >
<span class="CLASS"><<c>p class="CLASS"><<c>/p></span >
<span class="CLASS"><<c>span class="CLASS"><<c>/span></span>
<span class="CLASS"><<c>h1 class="CLASS"><<c>/h1></span >
<div id="dp"></div>
</pre>
<script>
var xx= document.getElementsByClassName("CLASS") ;
var txt="" ;
txt += 'var xx= document.getElementsByName("CLASS")' ;
txt += '\nxx.length = '+ xx.length;
txt += '\nxx[0].innerHTML = '+ xx[0].innerHTML;
txt += '\nxx[1].innerHTML = '+ xx[1].innerHTML;
txt += '\nxx[2].innerHTML = '+ xx[2].innerHTML;
txt += '\nxx[3].innerHTML = '+ xx[3].innerHTML;
dp.innerHTML = txt;
</script>
<style>
pre { font-size:20px }
b { font-size:30px;color:blue; }
</style>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('getElementsByClassName','500');
</script>
</div>
<!---------------444444---------getElementsByTagName-----------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="height:590px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="getElementsByTagName" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre><b>document.getElementsByTagName()</b>
<span><<c>span>11<<c>/span></span>
<span><<c>span>22<<c>/span></span>
<span><<c>span>33<<c>/span></span>
<span><<c>span>44<<c>/span></span>
<div id="dp"></div>
</pre>
<script>
var xx= document.getElementsByTagName("span") ;
var txt="" ;
txt += 'var xx= document.getElementsByName("span")' ;
txt += '\nxx.length = '+ xx.length;
txt += '\nxx[0].innerHTML = '+ xx[0].innerHTML;
txt += '\nxx[1].innerHTML = '+ xx[1].innerHTML;
txt += '\nxx[2].innerHTML = '+ xx[2].innerHTML;
txt += '\nxx[3].innerHTML = '+ xx[3].innerHTML;
dp.innerHTML = txt;
</script>
<style>
pre { font-size:20px }
b { font-size:30px;color:blue; }
</style>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('getElementsByTagName','500');
</script>
</div>
<!---------------2222222--------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/4576669253752635868" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size: 1px; opacity: 0.1;">
<a href="https://html.ug5g.com/2023/03/getelementbyid.html" target="_blank" title="HTML">#html</a>
<a href="https://html.ug5g.com/2023/03/getelementbyid.html" target="_blank" title="HTML">#網頁格式</a>
<a href="https://html.ug5g.com/2023/03/getelementbyid.html" target="_blank" title="HTML">#script</a>
<a href="https://html.ug5g.com/2023/03/getelementbyid.html" target="_blank" title="HTML">#style</a>
<a href="https://html.ug5g.com/2023/03/getelementbyid.html" target="_blank" title="HTML">#div</a>
<a href="https://html.ug5g.com/2023/03/getelementbyid.html" target="_blank" title="HTML">#script 元素獲取 getElementById()</a>
<a href="https://html.ug5g.com/2023/03/getelementbyid.html" target="_blank" title="HTML">#script 元素獲取 getElementsByClassName()</a>
<a href="https://html.ug5g.com/2023/03/getelementbyid.html" target="_blank" title="HTML">#script 元素獲取 getElementsByTagName()</a>
<a href="https://html.ug5g.com/2023/03/getelementbyid.html" target="_blank" title="HTML">#script 元素獲取 getElementsByName()</a>
<a href="https://html.ug5g.com/2023/03/getelementbyid.html" target="_blank" title="HTML">#script getElementById()</a>
<a href="https://html.ug5g.com/2023/03/getelementbyid.html" target="_blank" title="HTML">#script getElementsByClassName()</a>
<a href="https://html.ug5g.com/2023/03/getelementbyid.html" target="_blank" title="HTML">#script getElementsByTagName()</a>
<a href="https://html.ug5g.com/2023/03/getelementbyid.html" target="_blank" title="HTML">#script getElementsByName()</a>
</nobr> CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-17951246375957344022023-03-22T03:23:00.045-07:002023-03-22T22:20:16.630-07:00script Math<h3 class="hhh">JavaScript Math Object <br>
是一個擁有數學常數及數學函數。</h3>
<!----------------------111111111111------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!---------------------------------------------------------->
<div style="height:840px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="Math1111" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<font size = 5><center>
常用 Math 數學的運算</center>
<div border="2" class="Div" >
<!-------------------------------------------------------------------->
Math.round(x) : 將x四捨五入到整數。<br />
Math.round ( <input class="c" type="text" value="3.1416" /> ) = <nobr class="c"></nobr><br />
Math.round ( <input class="c" type="text" value="3.89" /> ) = <nobr class="c"></nobr></div>
<!--------------------------------------------------------------------> <div border="2" class="Div">
Math.floor(x) : 將x往下減到整數。<br />
Math.floor ( <input class="c" type="text" value="4.2" /> ) = <nobr class="c"></nobr><br />
Math.floor ( <input class="c" type="text" value="4.8" /> ) = <nobr class="c"></nobr></div>
<!-------------------------------------------------------------------> <div border="2" class="Div">
Math.pow(7,2) 返回7的2次方,即為7X7=49。<br />
Math.pow( <input class="c" type="text" value="7" />,
<input class="c" type="text" value="2" /> ) = <nobr class="c"></nobr></div>
<!-------------------------------------------------------------------> <div border="2" class="Div">
Math.sqrt(49) 表示49的平方根,即為\( \sqrt 49 \)=7。
<br />Math.sqrt( <input class="c" type="text" value="49" /> ) = <nobr class="c"></nobr></div>
<!--------------------------------------------------------------------> <div border="2" class="Div">
Math.abs(x) : 將x轉成正數。( 將x轉成負數 張 x 成 -1 OK)<br />
Math.abs( <input class="c" type="text" value="-123" /> ) = <nobr class="c"></nobr></div>
<!-------------------------------------------------------------------> <div border="2" class="Div">
Math.ceil(x) : 將x往上加到整數。<br />
Math.ceil( <input class="c" type="text" value="1.23" /> ) = <nobr class="c"></nobr></div>
<!--------------------------------------------------------------------> <div border="2" class="Div">
Math.min() : 找出參數列表中最小的值。<br />
Math.min( <input class="c" type="text" value="88" />,
<input class="c" type="text" value="33" />,
<input class="c" type="text" value="22" />,
<input class="c" type="text" value="44" /> ) = <nobr class="c"></nobr></div>
<!------------------------------------------------------------------> <div border="2" class="Div">
Math.max() : 找出參數列表中最大的值。<br />
Math.max( <input class="c" type="text" value="88" />,
<input class="c" type="text" value="33" />,
<input class="c" type="text" value="22" />,
<input class="c" type="text" value="44" /> ) = <nobr class="c"></nobr></div>
<!-------------------------------------------------------------------------------------------------->
<style>
.Div input {width:80px}
.Div {background-color: lavender; width: 90%;font-size: 20px ;
border: 1px solid black; padding: 10px; }
.Div:nth-child(2n+2) {background-color: orange}
</style>
<script>function OKf() {
bb = document.getElementsByClassName("c");
bb[1].innerHTML = Math.round(bb[0].value);
bb[3].innerHTML = Math.round(bb[2].value);
bb[5].innerHTML = Math.floor(bb[4].value);
bb[7].innerHTML = Math.floor(bb[6].value);
bb[10].innerHTML = Math.pow(bb[8].value,bb[9].value);
bb[12].innerHTML = Math.sqrt(bb[11].value);
bb[14].innerHTML = Math.abs(bb[13].value);
bb[16].innerHTML = Math.ceil(bb[15].value);
bb[21].innerHTML = Math.min(bb[17].value,bb[18].value,bb[19].value,
bb[20].value);
bb[26].innerHTML = Math.max(bb[22].value,bb[23].value,bb[24].value,bb[25].value); } OKf();
</script>
<script>
function ISKey(event){
var charCode = (evt.which) ? evt.which : evt.keyCode; document.getElementById("kkk").innerHTML=charCode ;
if (charCode == 13 ){ return true;};
if (charCode > 41 && charCode < 57){ return true;};
return false; }
</script>
<script>
var Class= document.querySelectorAll(".c") ;
Class.forEach((round) => {
round.addEventListener("mouseover", function() {
round.style.backgroundColor = "bisque";
round.focus() ;
round.select() ;
}) })
Class.forEach((round) => {
round.addEventListener("mouseout", function() {
round.style.backgroundColor = "ivory";
round.blur() ;
}) })
Class.forEach((round) => {
round.addEventListener("change", function() {
round.select() ; OKf() ;
}) })
</script>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('Math1111','800');
</script>
</div>
<!---------------2222222--------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="height:440px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="MathRandom" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<style>
#Random {font-size:20px;width:100%}
#Random td{font-size:20px;padding:6px}
</style>
<font size = 5><center>Math.random() 偽隨機數</center>
<table id="Random" border="1" >
<tbody><tr>
<th width="55%">函數</th><th width="20%">範圍</th><th width="25%">隨機數</th>
<tr><td> Math.random()</td><td>random 0 to 1</td><td id="Ra1">第一行 欄位 2
<tr><td> Math.floor(Math.random()*10)</td><td>random 0 to 9</td><td id="Ra2">
<tr><td> Math.floor(Math.random()*10+1)</td><td> random 1 to 10</td><td id="Ra3">
<tr><td> Math.floor(Math.random()*100)</td><td> random 0 to 99</td><td id="Ra4">
<tr><td> Math.floor(Math.random()*100+1)</td><td> random 1 to 100</td><td id="Ra5">
<tr><td> var min=20, max=80<br>
Math.floor(Math.random() * (max - min + 1) ) + min;
</td><td> random 20 to 80</td><td id="Ra6">
</td></tr>
</tbody>
</table>
<script>
var qid ;
function Ram(){
clearTimeout ( qid );Math.floor
Ra1.innerHTML = Math.random().toFixed(15);
Ra2.innerHTML = Math.floor(Math.random()*10);
Ra3.innerHTML = Math.floor(Math.random()*10+1);
Ra4.innerHTML = Math.floor(Math.random()*100);
Ra5.innerHTML = Math.floor(Math.random()*100+1);
var min=20, max=80 ;
Ra6.innerHTML=Math.floor(Math.random() * (max - min + 1) ) + min;
qid = setTimeout ( Ram, 1000 );
}
Ram();
</script>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('MathRandom','400');
</script>
</div>
<!---------------33333333333--------toFixed()------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="height:390px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="toFixed" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<font size = 5><center>number.toFixed(x)<br>
小數點後有指定位數的數字</center><font size = 3>
<pre>
1234.123456789.toFixed(0) = <script>document.write(1234.123456789.toFixed(0) ) </script>
1234.123456789.toFixed(2) = <script>document.write(1234.123456789.toFixed(2) ) </script>
1234.123456789.toFixed(5) = <script>document.write(1234.123456789.toFixed(5) ) </script>
1234.123456789.toFixed(30) = <script>document.write(1234.123456789.toFixed(30) ) </script>
</pre>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('toFixed','350');
</script>
</div>
<!---------------2222222--------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/1795124637595734402" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size: 1px; opacity: 0.1;">
<a href="https://html.ug5g.com/2023/03/script-math.html" target="_blank" title="HTML">#html</a>
<a href="https://html.ug5g.com/2023/03/script-math.html" target="_blank" title="HTML">#網頁格式</a>
<a href="https://html.ug5g.com/2023/03/script-math.html" target="_blank" title="HTML">#script</a>
<a href="https://html.ug5g.com/2023/03/script-math.html" target="_blank" title="HTML">#style</a>
<a href="https://html.ug5g.com/2023/03/script-math.html" target="_blank" title="HTML">#div</a>
<a href="https://html.ug5g.com/2023/03/script-math.html" target="_blank" title="HTML">#script 數字 小數點 toFixed()</a>
<a href="https://html.ug5g.com/2023/03/script-math.html" target="_blank" title="HTML">#script Math.round() </a>
<a href="https://html.ug5g.com/2023/03/script-math.html" target="_blank" title="HTML">#script Math.floor()</a>
<a href="https://html.ug5g.com/2023/03/script-math.html" target="_blank" title="HTML">#script Math.pow()</a>
<a href="https://html.ug5g.com/2023/03/script-math.html" target="_blank" title="HTML">#script Math.sqrt()</a>
<a href="https://html.ug5g.com/2023/03/script-math.html" target="_blank" title="HTML">#script Math.ceil()</a>
<a href="https://html.ug5g.com/2023/03/script-math.html" target="_blank" title="HTML">#script Math.random() 隨機數</a>
<a href="https://html.ug5g.com/2023/03/script-math.html" target="_blank" title="HTML">#script Math 數字運算()</a>
<a href="https://html.ug5g.com/2023/03/script-math.html" target="_blank" title="HTML">#script Math.random()</a>
</nobr> CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0tag:blogger.com,1999:blog-6423990083890753752.post-68324959718018056302023-03-22T00:39:00.017-07:002023-03-22T02:08:15.746-07:00setAttribute<h3 class="hhh">element.setAttribute(name, value)<br>
設置指定元素上的一個屬性值。</h3>
<!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!----------------------------------------------------------><!---------------------------------------------------------->
<div style="height:640px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="setAttributeTXT" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<pre><font size = 5>element.setAttribute(string name, string value)
<font size = 4><br>string name 名稱和值的新屬性。
string value 屬性設定為指定的值。
example : div1.setAttribute("align", "center")
div1.setAttribute("id", "div2")
input.setAttribute("type", "button")
img.setAttribute("src", "yy.jpg")
相關 : getAttribute() hasAttribute() removeAttribute()<br />
</pre>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('setAttributeTXT','600');
</script>
</div>
<!---------------2222222--------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="height:640px;width:48%; min-width: 720px; float:left;border: 3px solid darkgray;font-size:20px;margin:5px 5px 5px 5px">
<div id="setAttribute" >
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
<div id="Mdiv">
<div id="div">
<<c>div id="<span id="id1"></span>" > change this Attribute<<c>/div>
<br><br>
<span id="id2"></span>.setAttribute("id" , "<input id="idInput" type="text" value = "div" onchange="Change()" onmouseover="this.select()" > ")
<br><br>
<span id="id3"></span>.setAttribute("style" , "color :<select id="Cinput" onchange="Change()" style="width:100px" >
<option value="black">black</OPTION>
<option value="blue">blue</OPTION>
<option value="lime">lime</OPTION>
<option value="goldenrod">goldenrod</OPTION>
<option value="red">red</OPTION></SELECT>")
<br><br>
<span id="id4"></span>.setAttribute("style" , "font-size : <select id="Finput" onchange="Change()" style="width:100px" > <option value="20px">16px</OPTION>
<option value="25px">20px</OPTION>
<option value="30px">25px</OPTION>
</SELECT>")
</div></div>
<script language="JavaScript">
function Change(){
var CHid = idInput.value ;
var CHcolor = document.getElementById("Cinput").value ;
var CHfont = document.getElementById("Finput").value ; Mdiv.children[0].setAttribute("id",CHid ); Mdiv.children[0].setAttribute("style","color:" + CHcolor +";font-size :" + CHfont );
id1.innerHTML = Mdiv.children[0].id;
id2.innerHTML = Mdiv.children[0].id;
id3.innerHTML = Mdiv.children[0].id;
id4.innerHTML = Mdiv.children[0].id; }
Change() </script>
</textarea>
<div class="DP">
00</div>
</div>
<script>WWFT('setAttribute','600');
</script>
</div>
<!---------------2222222--------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!-----------------------------------------------------------------------><!----------------------------------------------------------------------->
<div style="clear:both">
<a href="https://draft.blogger.com/blog/post/edit/6423990083890753752/6832495971801805630" target="_blank" title="HTML">Edit</a>
</div>
<nobr style="font-size: 1px; opacity: 0.1;">
<a href="https://html.ug5g.com/2023/03/setattribute.html" target="_blank" title="HTML">#html</a>
<a href="https://html.ug5g.com/2023/03/setattribute.html" target="_blank" title="HTML">#網頁格式</a>
<a href="https://html.ug5g.com/2023/03/setattribute.html" target="_blank" title="HTML">#style</a>
<a href="https://html.ug5g.com/2023/03/setattribute.html" target="_blank" title="HTML">#script setAttribute() </a>
<a href="https://html.ug5g.com/2023/03/setattribute.html" target="_blank" title="HTML">#script setAttribute() 添加指定的属性</a>
</nobr> CK Chanhttp://www.blogger.com/profile/12856316544534277024noreply@blogger.com0