範本一:value取得

測試

<script>
function go(){
	var x=document.getElementById("t1").value;
	alert(x);
}
</script>
----------------------------------------------------------------------
<input type="text" id="t1" value="我會被抓取" />
<button onclick="go1()">測試</button>
	

範本二:value更改

測試

<script>
function go2(){
	var x=document.getElementById("t22").value;
	document.getElementById("t21").value=x;
}
</script>
----------------------------------------------------------------------
<input type="text" id="t21" value="我會被更改" readonly disabled />
<input type="text" id="t22" value="我會被抓取" />
<button onclick="go2()">測試</button>
	

範本三:數字型態

測試
測試
測試
測試

<script>
function go3(){
	var N=parseInt(document.getElementById("t32").value);
	document.getElementById("t31").value=N;
}
function go33(){
	var N=parseInt(document.getElementById("t34").value);
	document.getElementById("t33").value=N;
}
function go333(){
	var N=Math.floor(document.getElementById("t36").value);
	document.getElementById("t35").value=N;
}
function go3333(){
	var N=Math.round(document.getElementById("t38").value);
	document.getElementById("t37").value=N;
}
</script>
----------------------------------------------------------------------
<input type="text" id="t31" value="這裡會變整數" readonly disabled />
<input type="text" id="t32" value="12px" />
<button onclick="go3()">測試</button>

<input type="text" id="t33" value="這裡會變整數" readonly disabled />
<input type="text" id="t34" value="3.14159" />
<button onclick="go33()">測試</button>

<input type="text" id="t35" value="這裡會無條件捨去" readonly disabled />
<input type="text" id="t36" value="6.6" />
<button onclick="go333()">測試</button>

<input type="text" id="t37" value="這裡會四捨五入" readonly disabled />
<input type="text" id="t38" value="6.6" />
<button onclick="go3333()">測試</button>
	

範本四:亂數產生

測試
測試

<script>
function go5(){
	var x=Math.random()*100;
	document.getElementById("t51").value=x;
}
function go55(){
	var x=parseInt((Math.random()*100));
	document.getElementById("t52").value=x;
}
</script>
----------------------------------------------------------------------
<input type="text" id="t51" value="這裡是小數亂數" readonly disabled />
<button onclick="go5()">測試</button>

<input type="text" id="t52" value="這裡是整數亂數" readonly disabled />
<button onclick="go55()">測試</button>
	

範本五:樣式修改

綠色 藍色 左 右

<script>
var L;
function tc1(){
	document.getElementById("dd").style.backgroundColor="green";
}
function tc2(){
	document.getElementById("dd").style.backgroundColor="blue";
}
function tc3(){
	L=parseInt(document.getElementById("dd").style.left);
	L=L-10;
	document.getElementById("dd").style.left=L+"px";
}
function tc4(){
	L=parseInt(document.getElementById("dd").style.left);
	L=L+10;
	document.getElementById("dd").style.left=L+"px";
}
</script>
----------------------------------------------------------------------
<button onclick="tc1()">綠色</button>
<button onclick="tc2()">藍色</button>
<button onclick="tc3()">左</button>
<button onclick="tc4()">右</button>
<div id="dd" style="width:30px;height:30px;position:relative;left:20px;background-color:red;"></div>
	

範本六:事件變數

1 2 3 4

<script>
function go6(e){
	alert("事件中的變數是:"+e);
}
</script>
----------------------------------------------------------------------
<button onclick="go6(1)">1</button>
<button onclick="go6(2)">2</button>
<button onclick="go6(3)">3</button>
<button onclick="go6(4)">4</button>
	

範本七:新增觸發事件

請按任意鍵

<script>
addEventListener("keydown",function(){
	alert("你按了鍵盤");
});
</script>