Javascript基础六---Math内置对象，计算器，**实例
程序员文章站
2024-02-28 21:48:40
...
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 lang="en">
<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 lang="en">
<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>