JavaScript41-44：复选框、周期函数、Array类

最新推荐文章于 2023-12-02 19:20:21 发布

高开低走。

最新推荐文章于 2023-12-02 19:20:21 发布

阅读量85

点赞数

分类专栏：锦到说JavaScript

本文链接：https://blog.csdn.net/qq_43568982/article/details/117437244

版权

锦到说JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

开始时间：2021-05-31

复选框全选和取消全选

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复选框全选</title>
</head>

<body>
<script type="text/javascript">
    window.onload=function(){
        var fisrtChk=document.getElementById("fisrtChk");
        var MyHobby=document.getElementsByName("hobby");
        
        //设置全选按钮，直接将全选按钮状态赋值给单个按钮
        fisrtChk.onclick=function(){
            for(var i=0;i<MyHobby.length;i++){
                MyHobby[i].checked=fisrtChk.checked;
            }
        }
             
        //设置单个按钮都选上时，全选按钮选上
        var Num=MyHobby.length;
        //设置单个按钮的状态
            for(var i=0;i<MyHobby.length;i++){
                MyHobby[i].onclick=function(){
                    //判断逻辑就是，如果选中的个数等于总的按钮个数，那么即勾上全选
                var HobbyCount=0;
                for(var i=0;i<MyHobby.length;i++){
                    if(MyHobby[i].checked){
                        HobbyCount++;
                    }
                }
             
             fisrtChk.checked=(Num==HobbyCount); 
            }
        }
    }
    
    </script>
<input type="checkbox" id="fisrtChk"/>
<br>
<input type="checkbox" name="hobby" value="basketball"/>
篮球<br>
<input type="checkbox" name="hobby" value="table tennis"/>
乒乓球<br>
<input type="checkbox" name="hobby" value="football"/>
足球<br>
</body>
</html>

获取下拉列表选中项

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>20210601_Test02</title>
</head>

<body>
    <script>
    window.onload=function(){
        var provinceListElt=document.getElementById("provinceList");
        provinceListElt.onchange=function(){
            alert(this.value);
        }  
    }
    
    </script>
    <!--获取选中字段的value值-->
    <select id="provinceList">
    <option value="" >--请选择省份--</option>
    <option value="001">河北省</option>
    <option value="002">河南省</option>
    <option value="003">山东省</option>
    <option value="004">北京市</option>
    </select>
</body>
</html>

显示时钟

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>显示网页时钟</title>
</head>

<body>
    <script type="text/javascript">
        var nowTime=new Date();
        //输出当前时间
        document.write(nowTime);
        document.write("<br>");
        document.write(nowTime.toLocaleString());
        
        //重点：获取毫秒数 从1970年1月1日零时零分开始
        var times=nowTime.getTime();
        document.write("<br>");
        document.write(times);
    </script>
    
    <script type="text/javascript">
        //点出来之后显示当前时间，再让函数每秒刷新一次，实现自动显示
    function displayTime(){
        var time=new Date();
        var strTime=time.toLocaleString();
        document.getElementById("timeDiv").innerHTML=strTime;
    }
        //定义v的全局变量，用于存放setInterval的返回值，便于后面操作停止时钟
        var v;
        //每隔一秒钟刷新一次
        function start(){
               v=window.setInterval("displayTime()",1000);
        }
        
        function stop(){
            window.clearInterval(v)
        }
    </script>
    <br>
    <input type="button" value="显示系统时间" onclick="start();"/>
    <input type="button" value="停止系统时间" onclick="stop();"/>
    <div id="timeDiv">
    
    </div>
</body>
</html>

内置支持类Array

JavaScript弱类型语言，所以他的列表或者说是数据，更接近于Python中的列表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内置Array类</title>
</head>

<body>
    <script type="text/javascript">
    
        var arr=[];
        alert(arr.length);
        
        var arr2=[1,2,3,false,"ab",3.2];
        alert(arr2.length);
        //这个时候赋值一个arr[7],再来观察一下结果
        arr2[7]="seven";
        
        for(var i=0;i<arr2.length;i++){
            document.write(arr2[i]);
            document.write(" ");
        }
    
    </script>
</body>
</html>

在这里插入图片描述
JavaScript数组自动扩容，没有传值的默认为undefined

另一种创建数组的方式

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>内置Array类</title>
    </head>

    <body>
        <script type="text/javascript">
        //创建一个空数组
         var MyArray=new Array();

            //创建一个长度为3的初始值为undefined的数组
        var MyArray2=new Array(3);
            for(var i=0;i<MyArray2.length;i++){
                document.write(MyArray2[i]);
                document.write(" ");
            }
            //创建一个存放初始值为3和2，长度为2的数组
        var MyArray3=new Array(3,2);
        
        </script>
    </body>
    </html>

模拟弹栈和压栈，还可以反转reverse，类似于Python的操作

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>内置Array类</title>
    </head>

    <body>
        <script type="text/javascript">
        var a=[1,2,3,4];
        var str=a.join("-");
            //可以得到结果1-2-3-4 通过join来连接里面的元素
            alert(str);
        
            //还可以自动模拟压栈和弹栈
            
            a.push(10);
            alert(a);
            a.pop();
            alert(a);
            
            a.reverse();
            alert(a);
        </script>
    </body>
    </html>

结束时间：2021-06-01

高开低走。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
JavaScript41-44：复选框、周期函数、Array类

复选框全选和取消全选<!doctype html><html><head><meta charset="utf-8"><title>复选框全选</title></head><body><script type="text/javascript"> window.onload=function(){ var fisrtChk=document.getElemen
复制链接

扫一扫

专栏目录