练习javascript 一些练习总结，思路模型

Posted 2020-10-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了练习javascript 一些练习总结，思路模型相关的知识，希望对你有一定的参考价值。

1 编写一个方法method()，判断一个数能否同时被3和5整除

<script type="text/javascript">

    function method(){
        var num = prompt("输入一个数");
        if(isNaN(num)){
            return "";
        }   //这里验证输入的是不是数字，如果不是会进入isNaN，然后return ‘‘ 会退出函数
        if(+num % 3 == 0 && +num % 5 ==0){
            document.write(num + "能被3和5整除");
        }else{
            document.write(num + "不能被3和5整除")
        }
    }
    method()      //调用函数
</script>

2 写一个方法getValue()，对任意参数x，返回y的值；x<1时，返回y；10>x>1时，y=2*x-1；x>10时，y=3*x-11

<script type="text/javascript">
function get(){
        var x = document.getElementById("in1").value,   //获取in1的value，也就是输入的值x
            y = 0;
        if(+x < 1){
            y = x;
        }else if(+x >= 1 && +x < 10){
            y = 2*(+x)-1;
        }else if(+x > 10){
            y = 3*(+x)-11;
        }
        document.getElementById("in2").value =y;    //获取in2的value，并且把运算偶的y赋值给in2，这样计算的数就会出现的在in2的input
    }
</script>
</head>

<body>
输入一个数：<input id="in1" type="text" onBlur="get()" value=""><br>  //onBlur 失去焦点按钮
经计算y的值为<input type="tel" value="" id="in2">
</body>
效果图

技术分享

3 实现简单计算器，分别输入两个数和一个运算符号，计算结果。计算过程使用一个带参数和带返回值得函数封装实现

    function method(a,b,c){
        //判断a和b是不是数字
        if(isNaN(a) || isNaN(b)){
            return"请输入正确的字";    //isNaN判断是不是数字，如果不是进入if函数，并且returun返回值“、、、、”
        }
        if(["+","-","*","/"].indexOf(c) == -1){ //idndexof()是求数组下标，如果c是数组里的，就是返回相应的下标，最小的是0，如果=—1，说明这里没有
            return "请输入正确的（加减乘除）";
        }
        var num =eval(a+c+b);        //计算结果，并且返回一个结果
        return num;
    }
    function jisuan(){
        //第一步获取输入的数字和符号
        var a =document.getElementById("one").value,
            b =document.getElementById("two").value,
            c =document.getElementById("fh").value;
        //调用函数方法，并且接收到返回的值
        var num = method(a,b,c);
        document.getElementById("jg").innerhtml=num;
    }
    
</script>
</head>

<body>
数字1：<input type="text" id="one"><br>
数字2：<input type="text" id="two"><br>
符 号：<input type="text" id="fh"><br>
<button onClick="jisuan()">计算</button>结果为：<span id="jg"></span>

4 实现全选/全不选效果.如果下面的复选框有一个没有选中，全选复选框自动不勾选，如果全部选中则自动勾选

<script type="text/javascript">
    //全选/全不选
    /*
    1、找到全选框
    2、获取全选框选中属性
    3、获取所有的 CheckBox元素
    4、把这些CheckBox元素的选中属性设为全选框的选中属性
    */
    
    function check(obj){
//    1、找到全选框
//    2、获取全选框选中属性
//    3、获取所有的 CheckBox元素
        var ckArr = document.getElementsByName("list");
    
//    4、把这些CheckBox元素的选中属性设为全选框的选中属性
        for(var i = 0; i<ckArr.length;i++){
            if(obj.checked){
    //ckArr[i].setAttribute("checked","checked");
            ckArr[i].checked = true;    
            }else{
        //        ckArr[i].removeAttribute("checked");
            ckArr[i].checked = false;    
            }
            
        }
    }
    
    /*
    1、获取所有CheckBox元素
    2、每个都判断是否选中
    3、如果有 没有选中的   全选框不选中 反之 选中
    */
    
</script>
</head>

<body>

<table width="100%" border="1" >
    <tr>
        <td><input id="qx" type="checkbox" onClick="check(this)">全选</td>
        <td>表头</td>
        <td>表头</td>
        <td>表头</td>
    </tr>
    <tr>
        <td><input name="list" type="checkbox"></td>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td><input name="list" type="checkbox"></td>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td><input name="list" type="checkbox"></td>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    
    
</table>
</body>
</html>

<script type="text/javascript">
    var ckarr = document.getElementsByName("list");
    
    for(var i = 0; i<ckarr.length;i++){
        ckarr[i].setAttribute("onclick","isxz()");
    }
    
    function isxz(){
        //1、获取所有CheckBox元素
        var flag = true;
    //    2、每个都判断是否选中
        for(var i = 0; i<ckarr.length;i++){
            if(!ckarr[i].checked){
                flag = false;
            }
        }
    //    3、如果有 没有选中的   全选框不选中 反之 选中
        //flag = true ;   全部选中
        //flag = false;   有   没有选中的
        if(flag){
            document.getElementById("qx").checked = true;
        }else{
            document.getElementById("qx").checked = false;
        }
    }

</script>

以上是关于练习javascript 一些练习总结，思路模型的主要内容，如果未能解决你的问题，请参考以下文章