文章目錄
-
-
-
- 6.1内置對象Math
- 6.2執行個體:科學電腦
- 6.3彩票執行個體
- 6.4随機生成簡單驗證碼
-
-
6.1内置對象Math
- 使用Math對象前不需要new操作來建立對象執行個體,直接調用Math對象的屬性或方法。與Date,Array不同。
- 常見的屬性
常見的Math屬性:<br>
Math.e 對然對數的底,約2.718<br>
Math.PI 圓周率,約3.14
Math.SORT2 2的平方根,約1.414
- 常見的方法
常見Math方法:<br>
Math.abs(number) 求絕對值<br>
Math.sqrt(number) 求平方根<br>
Math.random() 傳回0-1的随機數<br>
Math.pow(base,exponent) 傳回數值類型base的exponent次幂<br>
ceil函數進位取整,floor函數舍掉小數取整,round函數四舍五入取整<br>
三角函數sin.cos,tan接受的參數是要計算的角度,機關是弧度。
6.2執行個體:科學電腦
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>科學電腦</title>
<!-- 樣式表 -->
<style>
/*規定了所有字型的樣式*/
{font-size:12px}
/*視窗主體大小*/
body{
background-color: buttonface;
border-style: none;
}
/*按鈕大小*/
.button{
width: 50px;
height: 30px;
}
/*顯示結果的文本框樣子*/
#txt_display {
width: 100%;
cursor: default;
text-align: right;
}
</style>
<!-- 腳本部分 -->
<script>
var calc_buttons=[0,1,2,3,4,5,6,7,8,9,".","=","+","-","*","/","AC","sin","cos","tan","asin","acos","atan","ln"];
var previous_value=0,op="",start_new_input=true;
//計算函數
function calc(strCMD) {
var objTxt=document.getElementById("txt_display");
switch(strCMD){
//三角函數調用Math對象相應方法
case"sin":
objTxt.value=Math.sin(objTxt.value);
break;
case"cos":
objTxt.value=Math.cos(objTxt.value);
break;
case"tan":
objTxt.value=Math.tan(objTxt.value);
break;
case"asin":
objTxt.value=Math.asin(objTxt.value);
break;
case"acos":
objTxt.value=Math.acos(objTxt.value);
break;
case"atan":
objTxt.value=Math.atan(objTxt.value);
break;
case"ln":
objTxt.value=Math.log(objTxt.value);
break;
//如果是四則運算,則執行計算
case"+":
case"-":
case"*":
case"/":
start_new_input=true;
if(op!=""&&objTxt.value!=""){
objTxt.value=eval(previous_value+op+objTxt.value);
op=strCMD;
}
else{
op=strCMD;
}
break;
case"=":
start_new_input=true;
if(op!=""&&objTxt!=""){
objTxt.value=eval(previous_value+op+objTxt.value);
}
op="";
previous_value=0;
break;
case"AC":
start_new_input=true;
objTxt.value="0";
op="";
previous_value=0;
break;
//如果是小數
case".":
if(objTxt.value.indexOf(".")!=-1)
break;
default:
if(start_new_input){
start_new_input=false;
previous_value=objTxt.value;
objTxt.value="0";
}
if(objTxt.value!="0"){
objTxt.value+=strCMD;
}
else if(strCMD!="0"){
objTxt.value=strCMD;
}
}
}
function write_table() {
document.write("<table>");
document.write("<tr>");
for(var i=0;i<calc_buttons.length;i++){
/* this 是js的關鍵字,對目前對象的引用。this指向的就是按鈕本身;
* \""是轉義符,其僅僅代表一個雙引号; */
document.write("<td><input value= \""+calc_buttons[i]+"\" type=\"button\" class= \"button\" onclick=\"calc(this.value);\"></td>");
if((i+1)%5==0){
document.write("</tr><tr>");
}
}
document.write("</tr>");
document.write("</table>");
}
</script>
</head>
<body style="overflow: auto;">
<!-- readonly 屬性可以防止使用者對值進行修改 -->
<input id="txt_display" value="0"readonly>
<script>
write_table();
</script>
</body>
</html>
6.3彩票執行個體
注:readOnly屬性是隻能讀。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>6-3 彩票遊戲</title>
<!-- 樣式表 -->
<style>
* { font-size:12px; } /*規定了所有的字型樣式*/
</style>
<!-- 腳本部分 -->
<script>
len = 7;//彩票号碼的位數
function calc(){
var strNumber, strMatchNumber, strResult, intResult;
//擷取使用者輸入的号碼
strNumber = $("txt_number").value;
//判斷輸入是否符合要求
if(strNumber.length!=len || isNaN(strNumber)){ alert("輸入不符合要求"); return; }
//扣除使用者兩元錢
$("txt_money").value-=2;
//生成中獎号碼
strMatchNumber = "";
for(var i=0; i<len; i++)strMatchNumber+=parseInt(Math.random()*10);
//輸出中獎号碼
$("txt_match_number").value = strMatchNumber;
//判斷是否中獎
switch(intResult = test_match(strMatchNumber, strNumber)){
//中獎的話輸出提示,并傳回現金給使用者
case 2: case 3: case 4: case 5: case 6: case 7:
$("txt_result").value = "恭喜你中了" + ["特","一","二","三","四","五"][len-intResult] + "等獎,獲得了" + (5000000/Math.pow(10,len-intResult)) + "元";
$("txt_money").value = parseInt($("txt_money").value) + 5000000/Math.pow(10,len-intResult);
break;
//隻有一位數字和中獎号碼相同
case 1:
$("txt_result").value = "可惜隻差一點就中獎了,加油啊";
break;
//所有數字全都不同
case 0:
default:
$("txt_result").value = "真可惜沒有中獎...";
}
//如果使用者的錢已用光
if($("txt_money").value<1){
if(confirm("你已經用光了所有的錢,還要再來一次嗎?")){
//重來
$("txt_money").value = 10;
}else{
//關閉視窗
window.close();
}
}
}
//判斷有幾位數字相同
function test_match(str1, str2){
var result = new Array(), matched = 0;
//循環判斷每一位數字
for(var i=0; i<len; i++){
if(str1.charAt(i)==str2.charAt(i)){
//如果第i個數字相同,則将相符的字元數加一
matched++;
}else if(matched>0){
//如果第i個數字不同,且前面有matched個位數相同,則将相符的字元數儲存在數組result中
result.push(matched);
//清空前面字元的相同情況
matched = 0;
}
}
//如果直到循環結束,兩者都相同,儲存相同的位數
if(matched>0)result.push(matched);
//判斷兩者最大的相符位數
result.sort();
return(result.pop());
}
function $(str){ return(document.getElementById(str)); }
</script>
</head>
<body style="overflow:auto;">
<table>
<tr>
<td>現有資金:</td>
<td><input id="txt_money" value="10" size="7" readonly >元</td>
</tr>
<tr>
<td>輸入購買的彩票号碼(7位數):</td>
<td><input id="txt_number" size="7" maxlength="7"></td>
</tr>
<tr>
<td><input type="button" value="開獎" onclick="calc();"></td>
</tr>
<tr>
<td>本期開獎号碼:</td>
<td><input id="txt_match_number" size="7" readonly ></td>
</tr>
<tr>
<td>結果:</td>
<td><input id="txt_result" size="30" readonly ></td>
</tr>
</table>
</body>
</html>
6.4随機生成簡單驗證碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function generate() {
var num=[1,2,3,4,5,6,7,8,9,0]
var str="";
for(var i=0;i<4;i++){
var ran=num[parseInt(Math.random()*10)];
str+=ran;
//alert(str);
}
document.getElementById("gene").value=str+"";
}
</script>
</head>
<body>
<input id="gene"readonly>
<input id="bnt" type="button" value="驗證碼" onclick="generate()">
</body>
</html>