JavaScript零基础入门--笔记动力节点最新老杜(七）全套笔记精髓

听~宇

于 2022-04-10 17:37:03 发布

阅读量1.3k

点赞数

分类专栏：前端三件套文章标签： java

本文链接：https://blog.csdn.net/qq_47518713/article/details/124079547

版权

前端三件套专栏收录该内容

15 篇文章 1 订阅

订阅专栏

复选框的全选和取消全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function(){

            var aihaos = document.getElementsByName("aihao");
            var firstChk = document.getElementById("firstChk");
            firstChk.onclick = function(){
                //点击全选框则全选
                for(var i = 0; i < aihaos.length; i++){
                    aihaos[i].checked = firstChk.checked;
                }
            }

            // 对以上数组进行遍历
            var all = aihaos.length;
            //第一个for循环是页面加载绑定aihao[i],但不会主动执行它的onclick
            //第二个for循环是用来检测选中元素的数量
            for(var i = 0; i < aihaos.length; i++){
                //点击一下单选框
                aihaos[i].onclick = function(){
                    var checkedCount = 0;
                    // 总数量和选中的数量相等的时候,第一个复选框选中.
                    for(var i = 0; i < aihaos.length; i++){
                        if(aihaos[i].checked){
                            //遍历所有选项，如果选中则加1
                            checkedCount++;
                        }
                    }
                    //如果全选了则firstChk则调用checked选中
                    firstChk.checked = (all == checkedCount);
                    /*
                    if(all == checkedCount){
                        firstChk.checked = true;
                    }else{
                        firstChk.checked = false;
                    }
                    */
                }
            }
        }
    </script>

    全选<input type="checkbox" id="firstChk"/><Br>
    <input type="checkbox" name="aihao" value="smoke" />抽烟<Br>
    <input type="checkbox" name="aihao" value="drink" />喝酒<Br>
    <input type="checkbox" name="aihao" value="tt" />烫头
</body>
</html>

获取下拉列表选中项的value

<body>
    <select onchange="alert(this.value)">
        <option value="">--请选择省份--</option>
        <option value="001">河北省</option>
        <option value="002">河南省</option>
        <option value="003">山东省</option>
        <option value="004">山西省</option>
    </select>
</body>

<body>
    <script type="text/javascript">
        window.onload = function () {
            var provinceListElt = document.getElementById('provinceList')
            provinceListElt.onchange = function () {
                // 获取选中项的value
                alert(provinceListElt.value)
            }
        }
    </script>

    <select id="provinceList">
        <option value="">--请选择省份--</option>
        <option value="001">河北省</option>
        <option value="002">河南省</option>
        <option value="003">山东省</option>
        <option value="004">山西省</option>
    </select>
</body>

显示网页时钟

关于JS中内置的支持类：Date，可以用来获取时间/日期

<body>
    <script type="text/javascript">
        var nowTime = new Date()
        document.write(nowTime)//Sun Apr 10 2022 15:59:01 GMT+0800 (GMT+08:00)
        document.write('<br>')
        document.write('<br>')//换行

        // 转换成具有本地语言环境的日期格式.
        nowTime = nowTime.toLocaleString()
        document.write(nowTime)//2022/4/10 16:01:12
        document.write("<br>");
        document.write("<br>");

        //自定义输出
        var t = new Date();
        var year = t.getFullYear(); // 返回年信息,以全格式返回.
        var month = t.getMonth(); // 月份是:0-11
        // var dayOfWeek = t.getDay(); // 获取的一周的第几天(0-6)
        var day = t.getDate(); // 获取日信息.
        document.write(year+ "年" + (month+1) + "月" + day + "日")
        document.write("<br>");
        document.write("<br>");

        // 重点:怎么获取毫秒数？(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数)
        var times = t.getTime()
        document.write(times)//1649578042246
        document.write("<br>");
        
    </script>
</body>

<body>
    <script type="text/javascript">
        function displayTime() {
            var time = new Date()
            var strTime = time.toLocaleString()
            document.getElementById('timeDiv').innerHTML = strTime
        }

        // 每隔1秒调用displayTime()函数
        function start() {
            // 从这行代码执行结束开始,则会不间断的,
            // 每隔1000毫秒调用一次displayTime()函数.
            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>

内置支持类Array

<body>
    <script type="text/javascript">
        // 创建长度为0的数组
        var arr = [];
        alert(arr.length);//0

        // 数据类型随意
        var arr2 = [1,2,3,false,"abc",3.14]
        alert(arr2.length)//6

        // 下标会越界吗
        arr2[7] = "test"; // 自动扩容.
        document.write("<br>");

        // 遍历
        for(var i = 0; i < arr2.length; i++){
            document.write(arr2[i] + "<br>");
        }
    </script>
</body>

<body>
    <script type="text/javascript">
        // 另一种创建数组的对象的方式
        var a = new Array();
        alert(a.length); // 0

        var a2 = new Array(3); // 3表示长度.
        alert(a2.length);

        var a3 = new Array(3,2);//3,2 是里面的元素
        alert(a3.length); // 2

        var a = [1,2,3,9];
        var str = a.join("-");
        alert(str); // "1-2-3-9"

        // 在数组的末尾添加一个元素(数组长度+1)
        a.push(10);
        alert(a.join("-"));//1-2-3-9-10

        var endElt = a.pop();
        alert(endElt);//10
        alert(a.join("-"));// "1-2-3-9"

        // 反转数组.
        a.reverse();
        alert(a.join('-'))//9-3-2-1
    </script>
</body>

// 注意:JS中的数组可以自动模拟栈数据结构:后进先出,先进后出原则.
// push压栈
// pop弹栈

听~宇

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript零基础入门--笔记动力节点最新老杜(七）全套笔记精髓

复选框的全选和取消全选<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script type="text/javascript"> window.onload = function(){
复制链接

扫一扫