第四节(循环,数组,异常,九九乘法表,计算器)

1:循环
<body> <script type="text/javascript"> /* <1> 语句 1 初始化循环中所用的变量 (var i=0) <2> 语句 1 是可选的,也就是说不使用语句 1 也可以 <3> 可以在语句 1 中初始化任意(或者多个)值 */ for(var i =0,j=1;i < 5; i++){ document.write("i = " + i +"<br />"); j++; } document.write("J = "+j); </script> </body> //////////////////////////////////////////////////// <body> <script type="text/javascript"> var students = ["单晨","Ming","阿伦","梅浪","LeBron","土豆"]; /* var i = 0,leg = students.length; for(; i < leg; i++){ document.write("i = "+i+" ,student:"+students[i]+"<br />"); } */ var i = 0,leg = students.length; for(; i < leg;){ document.write("i = "+i+" ,student:"+students[i]+"<br />"); i++; } </script> </body>
<body>
<script type="text/javascript">
    
    var i;
    var teachers = {name:"arry",sex:"",age:"18"};
    for(i in teachers){
        document.write(teachers[i]);
    }
</script>
</body>
<body>


<script type="text/javascript">
    var i = 0;
    var txt = 0;

    for(; i < 10;){
        document.write("<br /><br />for , i = "+i+"<br />");
        i++;
        txt = i;
    }
    i = 0;
    while(i < 10){
        document.write("i = "+i+"<br />");
        i++;
    
</script>
</body>
2:异常
<body>


<h1>JavaScript Throw 语句</h1>
<p>请输入 1 到 5之间的数字:</p><br />
<input type="text" id="txt"/>
<input type="button" value="请输入数字" onclick="isNumber();"/><br /><br />
<p id="mes"></p>

<script type="text/javascript">
    
    function isNumber(){
        
        try{
            var txt_val = document.getElementById("txt").value;
            if(txt_val == ""){
                throw "您的文本框为空";
            } else if(isNaN(txt_val)){
                throw "不是数字";
            } else if(txt_val > 5){
                throw "数字大于5";
            }else if(txt_val < 1){
                throw "数字小于1";
            }else{
                throw "恭喜您,太棒了,答对啦 !";
            }
        } catch(err){
            document.getElementById("mes").innerHTML = "错误信息:<font color='red'>"+err+"</font>";
        }

    }

</script>
</body>
2:数组

 <script type="text/javascript">
    /*
        javascript---数组Array
        定义方式如下:
        var arr = [];//初始化一个空长度的数组
        var arr = new Array();//内存 
        1:数组下标都是从0开始,也就是说数组里面的第一个元素就是
        2:数组的长度是:.length
        3:第一个元素:arr[0] = "xxx"; 最后一个元素:arr[length-]="xxx"
        4:当一个数组下标越界的时候,返回undefined
        5:toString()转成字符串
        6:数组的push()方法是:追加到数组的最后面
        7:join()改变数组的分隔符
        8:shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值
        9:pop() 方法用于把数组的最后一个元素从其中删除,并返回最后元素的值
        10:slice(start,end);start:下标 end截取的个数(或者是start+1)
        11: arr6.sort(function(a,b){//升序
                return b - a;    
            });
            //降序    
            arr6.sort(function(a,b){
                return a - a;    
            })

    */

    //第一种方式定义一个空数组
    var arr = [];
    //第二种定义了一个有值的数组
    var arr2 = [1,3,4,5,6];
    //alert(arr2[4]);
    //第三种定义方式:先定义后赋值的数组
    var arr3 = [];
    arr3[0] = "xiaoer";
    arr3[1] = "单晨";
    /************************************************/

    /*********************数组的合并--push***************************/
    var arr5 =  ["xiaoer","KID","ming","白羊"];
    //alert("数组push之前的长度是:"+arr5.length+"值是:"+arr5.toString());
    arr5.push("IOY");
    arr5.push("简简单单");
    //alert("数组push之后的长度是:"+arr5.length+"值是:"+arr5.toString());

    /*********************数组的合并--join***************************/
    var arr6 =  ["1","2","3","4","5","6"];
    //alert("数组join之前是用逗号分开的:"+arr6.toString());
    //alert("数组join之后是用#分开的:"+arr6.join("#").toString());

    /*********************数组的删除第一个元素--shift***************************/
    var arr7 =  ["1","2","3","4","5","6"];
    //alert("数组shift之前的值是:"+arr7.toString()+"长度:"+arr7.length);
    var value = arr7.shift();
    //alert(value);
    //alert("数组shift之后值的是:"+arr7.toString()+"长度:"+arr7.length);

    /*********************数组的删除最好一个元素--prop***************************/
    var arr8 =  ["1","2","3","4","5","6"];
    //alert("数组pop之前的值是:"+arr8.toString()+"长度:"+arr8.length);
    var value = arr8.pop();
    //alert(value);
    //alert("数组pop之后值的是:"+arr8.toString()+"长度:"+arr8.length);
    
    /*********************数组截取--splice***************************/
    //splice(start,end);start:下标 end截取的个数
    var arr9 = [1,2,3,4,5,6,7,8,9,0];
    alert(arr9.slice(2,1));//2

    
    /*********************数组截取--slice***************************/
    //splice(start,end);start:下标 end截取的个数
    var arr9 = [1,2,3,4,5,6,7,8,9,0];
    alert(arr9.splice(2,1));//2


    /*********************数组的合并--concat***************************/
    var carr = [1,2,5,7];
    var larr = [1,8,9,2,200];
    var car2 = larr.concat(carr);
    //alert(typeof carr);
    //alert(typeof car2.toString());

  </script>
九九乘法表

 <style type="text/css">
    table td{border:1px solid #ccc;padding:5px;}
    table td:hover{background:#141414;color:#fff;}
  </style>

 <body>
  <h1>九九乘法表</h1>
  <input type="text" id="number"/><input type="button" onclick="tm_change(this)" value="更换"/>
  <hr>
  <div id="tm_box"></div>
  <script type="text/javascript">
    //九九乘法表
    tm_chengfabiao(9);
    function tm_chengfabiao(number){
        var html = "<table>";
        for(var i=1;i<=number;i++){
            html +="<tr>";
            for(var j=1;j<=i;j++){
                html +="<td>"+i+"*"+j+" = "+(i*j)+"</td>";
            }
            html +="</tr>";
        };
        html+="</table>";
        //这里代表给div赋值
        document.getElementById("tm_box").innerHTML = html;
    };

    function tm_change(obj){
        //获取表单的元素
        var number = document.getElementById("number").value;
        //if(isEmpty(num) || isNaN(number))return; Tmutil.js
        if(isNaN(number))return;
        tm_chengfabiao(number);
    };

    //作业很简单:定义一个数组,然后循环获取数组里面的元素
  </script>
 </body>

计算器

<style type="text/css">
    input{60px;height:50px;text-align:center;}
    #tbCalculator td{text-align:center;vertical-align:middle;}
    table td{padding:5px;}
    #result{font-size:36px;font-weight:bold;}
</style>
<script type="text/javascript">
    /*
        1:点击数字
        2:点击操作符  
        3:获取结果
    */
    //alert("45"+45);
    //alert("45"+"45");
    //alert("45+45");
    //alert(eval("45+45"));
    //alert(typeof("1.269"*1));    
    var operator;
    var result;
    function tm_number_click(obj){
     var number = obj.value;
     var inputdom = document.getElementById("result");
     if((inputdom.value.indexOf(".")>-1 && number=="."))return;
     inputdom.value += number;
    };

    function calculation(obj){
       operator = obj.value;
      var newValue = document.getElementById("result");
      if(newValue.value=="") return false;
      result = newValue.value;
      newValue.value = "";
    }
    //点击等于符号获取
    function getResult(obj){
        //var result = "";
        var sourceResult = result;
        var inputdom =  document.getElementById("result");
        var newValue = inputdom.value;
        switch(operator){
         case"+":result = sourceResult+newValue;break;
         case"-":result = sourceResult-newValue;break;
         case"*":result = sourceResult*newValue;break;
         case"/":result = sourceResult/newValue;break;
        }
        inputdom.value = result;
        result = "";
        operator = "";
    };
    
    function tm_backspace(obj){
      var inputdom = document.getElementById("result");
      var inputValue = inputdom.value;
      inputdom.value = inputValue.substring(0,inputValue.length-1);
    }
    //重置清除
    function tm_clearall(obj){
     operator = "";
     result="";
     document.getElementById("result").value = "0";
    }
    

</script>


<body>

<table id="tbCalculator" width="360" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="30" colspan="4" align="center">
<input type="text" name="txtScream" id="result" style="180px; border-style:none; text-align:right;"  /> </td>
</tr>
<tr>
<td height="30" colspan="2">
<input type="button" name="btnCE" id="btnCE" value="C&nbsp;E" style="80px;" align="right"; onclick="tm_clearall(this);" /></td>
<td height="30" colspan="2">
<input type="button" name="btn10" id="btn10" value="Backspace" style="80px;" align="right"; onclick="tm_backspace(this);" /></td>
</tr>
<tr>
<td height="30"><input type="button" name="btn7" id="btn7" value="7" onclick="tm_number_click(this);" /></td>
<td><input type="button" name="btn8" id="btn8" value="8" onclick="tm_number_click(this);"/></td>
<td><input type="button" name="btn9" id="btn9" value="9" onclick="tm_number_click(this);" /></td>
<td><input type="button" name="btn6" id="btn6" value="/" onclick="calculation(this);" /></td>
</tr>
<tr>
<td height="30">
<input type="button" name="btn4" id="btn4" value="4" onclick="tm_number_click(this);"/></td>
<td><input type="button" name="btn5" id="btn5" value="5" onclick="tm_number_click(this);"/></td>
<td><input type="button" name="btn6" id="btn6" value="6" onclick="tm_number_click(this);"/></td>
<td><input type="button" name="btn13" id="btn13" value="*" onclick="calculation(this);" /></td>
</tr>
<tr>
<td height="30">
<input type="button" name="btn1" id="btn1" value="1" onclick="tm_number_click(this);"/></td>
<td><input type="button" name="btn2" id="btn2" value="2" onclick="tm_number_click(this);"/></td>
<td><input type="button" name="btn3" id="btn3" value="3" onclick="tm_number_click(this);"/></td>
<td><input type="button" name="btn18" id="btn18" value="-" onclick="calculation(this);" /></td>
</tr>
<tr>
<td height="30"><input type="button" name="btn0" id="btn0" value="0" onclick="tm_number_click(this);"/></td>
<td><input type="button" name="btndot" id="btndot" value="." onclick="tm_number_click(this);" /></td>
<td><input name="btn22" type="button" id="btn22" value="=" onclick="getResult();" /></td>
<td><input type="button" name="btn23" id="btn23" value="+" onclick="calculation(this);" /></td>
</tr>
</table>
</body>


原文地址:https://www.cnblogs.com/Deng1185246160/p/4238086.html