考点整理代码块系列

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">//第一:先创建function()函数
function method(){
   var num=prompt("请输入数字");
  //第二,验证变量num是不是数字
   if(isNaN(num)){
      alert("您输入的不是数字");
      //第三,不是数字返回,中断循环
      return;  
       }
    //第四,判断变量num能否被3和5整除
    if(+num%3==0 && +num%5==0){
        document.write(+num+"能被3和5整除");//是输出的内容
        }else{
            document.write(+num+"不能被3和5整除");//不是输出的内容
        }    
 }
 method(); //最后,调用变量
</script>
</head>

<body>
</body>
</html>

2、有一个函数y=x (x<1) || y=zx-1(1<=x<10) || y=3x-1(x>=10) 写一个方法getvalue(),对任意参数x,返回y的值。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">//第一,创建function函数
function getvalue(){
        var x=document.getElementById("sr").value,//input文本框的值定义为变量x
            y=0;
    //判断y的值        
        if(+x<1){
        y=x;
        }else if(+x>=1 && +x<10){
            y=2*(+x)-1;
        }else if(+x>=10){
            y=3*(+x)-11;
        }
        //把y的值用span标签的形式输出
        document.getElementById("sp").innerHTML=y;
    }
</script>
</head>

<body>
输入数字:<input type="text" id="sr" onblur="getvalue()" value=""/><br />  <!--用onblur标签把结果显示在span标签中-->
最后y的值:<span id="sp"></span>
</body>
</html>

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

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">//建立function函数
function fanh(n1,n2,fh){
    //判断是不是数字
    if(isNaN(n1)||isNaN(n2)){
        return"请输入数字";//return"<span style='color:red'>请输入正确数字</span>";字体变红
       }
    //判断是不是符号
    if(["+","-","*","/"].indexOf(fh) == -1){
        return"请输入正确的符号(加减乘除)";  
        }
        //计算并返回值
     var num=eval(n1+fh+n2);
     return num;    
  }
function jis(){
    //获取俩个数和一个符号
     var n1=document.getElementById("one").value,
         n2=document.getElementById("two").value,
         fh=document.getElementById("three").value;
        //调用方法并且接受返回的值
         var num=fanh(n1,n2,fh);
         //把返回值赋值给span标签
         document.getElementById("sp").innerHTML=num;
         
  }
</script>
</head>

<body>
<!--输入数字:<input type="text" id="sr" onblur="getvalue()" value=""/><br />  <!--用onblur标签把结果显示在span标签中-->
<!--最后y的值:<span id="sp"></span>-->
输入第一个数字<input  type="text" id="one"/><br />
输入第二个数字<input  type="text" id="two"/><br />
    输入符号<input  type="text" id="three"/><br />
<button onclick="jis()">&nbsp;等&nbsp;于&nbsp;</button>   值为:<span id="sp"></span>
</body>
</html>

 

4、实现全选和全不选效果.

     如果下面的复选框有一个没有选中,全选复选框自动不勾选,如果全部选中则自动勾选

 

// 1.找到全选表格
//  2.获取全选表格的选中属性
//  3.获取所有的CheckBox属性
//  4.把所有的CheckBox属性设为全选表格的属性 
    function one(obj){
        var arr=document.getElementsByName("list");
        //alert(arr);
        for(var i=0;i<arr.length;i++){
            if(obj.checked){
                //arr[i].setAttribute("checked","checked"); //第一种方法与下面的问题冲突
                arr[i].checked=true;//第二种方法,与下面的问题相互应
            }else{
                //arr[i].removeAttribute("checked"); //第一种方法,与下面问题冲突
                
                arr[i].checked=false; //第二种方法,与下面的题相呼应
            }
        }
     }
    

</script>
<body>
<table width="100%" border="1" >
    <tr>
        <td><input id="qx" type="checkbox" onClick="one(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></script> <script> var arr2=document.getElementsByName("list"); for(var i=0;i<arr2.length;i++){ arr2[i].setAttribute("onclick","xuanz()"); } function xuanz(){
//获取CheckBox元素 flag
=true;
//判断是否每个都选中
for(var i=0;i<arr2.length;i++){ if(!arr2[i].checked){ flag=false; } }
//全选框单元格是否选中
if(flag){ document.getElementById("qx").checked=true; //全选框选中,所有CheckBox也都选中 }else{ document.getElementById("qx").checked=false; //CheckBox有没选中的,全选不勾选 } } </script>

 

posted @ 2017-10-20 00:12  凯迪威  阅读(200)  评论(0编辑  收藏  举报