Javascript基础六---Math内置对象，计算器，彩票实例

文章目录

- - - 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>

Javascript基础六---Math内置对象，计算器，彩票实例

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>

Javascript基础六---Math内置对象，计算器，彩票实例

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>

Javascript基础六---Math内置对象，计算器，彩票实例

Javascript基础六---Math内置对象，计算器，彩票实例

文章目录

6.1内置对象Math

6.2实例：科学计算器

6.3彩票实例

6.4随机生成简单验证码

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条