✍ 📁 🙈 🙉 🙊

getElementById

document.getElementById(id)
取得 id 的元素

<pre><b>document.getElementById()</b>
<div id="div1">html.ug5g.com My id = div1</div>

Edit

#html #網頁格式 #script #style #div #script 元素獲取 getElementById() #script 元素獲取 getElementsByClassName() #script 元素獲取 getElementsByTagName() #script 元素獲取 getElementsByName() #script getElementById() #script getElementsByClassName() #script getElementsByTagName() #script getElementsByName()

script Math

JavaScript Math Object
是一個擁有數學常數及數學函數。

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

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>

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

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>

Edit

#html #網頁格式 #script #style #div #script 數字小數點 toFixed() #script Math.round() #script Math.floor() #script Math.pow() #script Math.sqrt() #script Math.ceil() #script Math.random() 隨機數 #script Math 數字運算() #script Math.random()

setAttribute

element.setAttribute(name, value)
設置指定元素上的一個屬性值。

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

Edit

#html #網頁格式 #style #script setAttribute() #script setAttribute() 添加指定的属性

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

getElementById

document.getElementById(id)
取得 id 的元素

script Math

JavaScript Math Object
是一個擁有數學常數及數學函數。

setAttribute

element.setAttribute(name, value)
設置指定元素上的一個屬性值。

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

getElementById

document.getElementById(id)取得 id 的元素

script Math

JavaScript Math Object 是一個擁有數學常數及數學函數。

setAttribute

element.setAttribute(name, value) 設置指定元素上的一個屬性值。

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

document.getElementById(id)
取得 id 的元素

JavaScript Math Object
是一個擁有數學常數及數學函數。

element.setAttribute(name, value)
設置指定元素上的一個屬性值。