zoukankan      html  css  js  c++  java
  • 第四节(循环,数组,异常,九九乘法表,计算器)

    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>

    
    
  • 相关阅读:
    移动端开发适配总结
    gulp进阶构建项目由浅入深
    css3 实现逐帧动画
    jQuery1.9.1源码分析--数据缓存Data模块
    nodejs开发指南读后感
    css3动画由浅入深总结
    浅谈javascript函数节流
    go语言基础之copy的使用
    go语言基础之append扩容特点
    go语言基础之append函数的使用
  • 原文地址:https://www.cnblogs.com/Deng1185246160/p/4238086.html
Copyright © 2011-2022 走看看