1.數字平方
流程:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function pf(){
//獲取文本框
var input =
document.getElementById("num");
console.log(input);
//獲取框內的值
var n = input.value;
console.log(n);
//獲取span
var span =
document.getElementById("result");
//判斷該值是否未數字
if(isNaN(n)){
//不是數字,給與提示
span.innerHTML = "請輸入數字";
}else {
//是數字,計算平方
span.innerHTML = n*n;
}
}
</script>
</head>
<body>
<input type="text" id="num"/>
<input type="button" value="平方"
οnclick="pf();"/>
= <span id="result"></span>
</body>
</html>
圖:
2.猜數字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//網頁加載時直接生成隨機數。
//該數字在body加載前就有了,所以
//用戶點擊猜時在對應的函數內可以使用
//0<=x<1 -> <= 100x<100 -> 0,1,..99
var ran = parseInt(Math.random()*100);
//無論此函數寫在前面還是在後面,它都是在用戶點擊按鈕
//時調用,他比生成隨機數執行的晚
console.log(ran);
function guess(){
//獲取文本框的值
var n =
document.getElementById("num").value;
var span =
document.getElementById("result");
console.log(n);
//判斷該值是否爲數字
if(isNaN(n)){
//不是數字,給予提示
span.innerHTML = "請輸入數字"
}else{
//是數字,和隨機數比較
if(n<ran){
span.innerHTML = "小了";
}else if(n>ran){
span.innerHTML = "大了";
}else{
span.innerHTML = "對了";
}
}
}
</script>
</head>
<body>
<input type="text" id="num"/>
<input type="button" value="猜"
οnclick="guess();"/>
<span id="result"></span>
</body>
</html>
圖:
3.數的階乘
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo5</title>
<script>
function jc(){
//獲得數據
var n =
document.getElementById("num").value;
var span =
document.getElementById("result");
//判斷是否爲數字
if(isNaN(n)){
//不是數字,給予提示
span.innerHTML("請輸入數字");
}else{
if(n==0){
span.innerHTML = 1;
}else if(n<0){
span.ionnerHTML = "負數沒有階乘";
}else{
var s = 1;
//使用i可以做條件,當i遞減到0時,
//就相當於false,循環終止
for(var i = n; i; i--){
s*=i;
}
span.innerHTML = s;
}
}
}
</script>
</head>
<body>
<p>n(正整數)的階乘=1*2*3*..*n</p>
<p>0的階乘固定爲1</p>
<p>
<input type="text" id="num"/>
<input type="button" value="階乘"
οnclick="jc();"/>
= <span id="result"></span>
</p>
</body>
</html>
圖: