好程式設計師web前端教程:Math函式
阿新 • • 發佈:2019-06-08
好程式設計師web前端教程:Math函式
Math.round(3.6) //四捨五入
random() //返回0-1之間的隨機數
max(num1, num2) //返回較大的數
min(num1, num2) //返回較小的數
abs(num) //絕對值
ceil(19.3) //12 向上取整
floor(11.8) //11 向下取整
1. 獲取四位數的驗證碼。
<!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>無標題文件</title> <script type="text/javascript"> window.onload = function() { var arr = ['a', 'b', 'c'] var oBtn = document.getElementById('btn'); var oTxt = document.getElementById('txt'); oBtn.onclick = function() { var iNum = parseInt(Math.random() * 10000) while (iNum < 1000) { iNum = parseInt(Math.random() * 10000) } oTxt.value = iNum } } </script> </head> <body> <input type="button" value="獲取驗證碼" id="btn" /> <input type="text" value="5345" id="txt" /> </body> </html>
2、驗證
<!DOCTYPE HTML> <html> <head> <title>註冊頁面</title> <meta charset="utf-8" /> <script type="text/javascript"> //可以對輸入的文字做簡單校驗 function btnClick() { var oUsername = document.getElementById("box_username"); var oPassname = document.getElementById("box_password"); var oSpan = document.getElementById("box_span"); //清楚掉兩個文字中的空格 var sUsername = oUsername.value.replace(/ /g, ""); var sPassname = oPassname.value.replace(/ /g, ""); //取出使用者名稱第一個字元 var unChar = sUsername.charAt(0); if (unChar >= '0' && unChar <= '9') { oSpan.innerHTML = "使用者名稱首字母不可以是數字!"; } else if (sUsername.length == 0) { oSpan.innerHTML = "使用者名稱不能為空!"; } else if (sUsername.length < 6 || sUsername.length > 20) { oSpan.innerHTML = "使用者名稱長度應該不小於6並且不大於20!"; } else if (sPassname.length == 0) { oSpan.innerHTML = "密碼不能為空!"; } //將處理完空格的文字替換掉原來錯誤的文字 //替換文字框中的值 oUsername.value = sUsername; oPassname.value = sPassname; } </script> </head> <body> <span id="box_span"></span> <input id="box_username" type="text" placeholder="使用者名稱" onblur="btnClick()" /> <input id="box_password" type="password" placeholder="密碼" onblur="btnClick()" /> <button type="button" onClick="btnClick()">登入</button> </body> </html>
思路:
佈局(略)
1.獲取需要操作的元素;
2.增加事件;
3.獲取需要驗證的字串;
4.對字串進行處理(1.使用者名稱不能為空 。2.開頭字母不能是數字。3.使用者名稱長度應該小於6位但是不能大於20位。4.密碼不能為空。);
5.驗證字串,並將結果寫入提示區域內;
注:空格也是字元;
3.計算器, 計算器思路。
佈局。(略)
switch()語句和if類似,但是比if更復雜;
switch(sth){ case sth1: 程式碼塊; break; default: 程式碼塊; }
一個小的計算器:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script> window.onload=function(){ var oTxt1=document.getElementById('txt1'); var oTxt2=document.getElementById('txt2'); var oBtn=document.getElementById('resBtn'); var oSelect=document.getElementById('opt'); oBtn.onclick=function(){ //數字; var n1=Number(oTxt1.value); var n2=Number(oTxt2.value); if(isNaN(n1)||isNaN(n2)){ alert('請輸入數字型別進行運算'); return } //操作符 switch(oSelect.value){ case '+':alert(n1+n2); break; case '-':alert(n1-n2); break; case '*':alert(n1*n2); break; case '/':alert(n1/n2); break; default:alert('操作符不正確') } } } </script> </head> <body> <input type="text" id="txt1"> <select id="opt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="txt2"> <input type="button" value="計算" id="resBtn"> </body&g