JavaScript-部分练习(含JQ1)实例及代码

最新推荐文章于 2022-04-27 21:37:11 发布

MrLss

最新推荐文章于 2022-04-27 21:37:11 发布

阅读量269

点赞数

分类专栏： JS 文章标签： javascript js

本文链接：https://blog.csdn.net/MrLsss/article/details/104124530

版权

JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这篇博客通过实例展示了JavaScript在实际应用中的几个常见功能，包括选取元素、实现图像跟随鼠标移动的效果、创建JS省市联动菜单、动态增删DOM元素、表单操作以及跑马灯效果。同时，还介绍了实现类似微博朋友弹窗的交互设计。这些实例深入浅出地帮助读者理解并掌握JavaScript的基本操作和应用场景。

摘要由CSDN通过智能技术生成

获取选中元素

 window.onload = function () {
            //获取所有选择标签
           var cks = document.getElementById("div").getElementsByTagName('input');
           for (var i = 0; i < cks.length; i++) {
               if (cks[i].type == "checkbox") {
                   //每次点击循环遍历每个元素，添加数组然后显示
                   cks[i].onclick = function () {
                       var cksList = [];
                       for (var r = 0; r < cks.length; r++) {
                           if (cks[r].checked) {
                               cksList[cksList.length] = cks[r].value;
                           }
                       }
                       //每次点击遍历所有点击的元素并且显示给用户
                       document.getElementById("pid").innerHTML = "共选中" + cksList.length + "人，都是" + cksList.toString() + "";
                   }
               }
          }
        };

图像跟随鼠标移动：

    //图像跟随鼠标移动
    //clientX 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；  不随滚动条滚动而改变；
    //使用PageX，PageY效果相同。
        document.onmousemove = function (evt) {
           var e = window.event || evt;
           var imgTS = document.getElementById("imgTs");
           imgTS.style.left = e.clientX + "PX";
           imgTS.style.top = e.clientY + "px";//和position同时联用才起作用
        };
//------------------------------------------------------------------------------------------
            document.getElementById('x').value = e.pageX + "PX";//页面，跟随滚动条改变，pageX(滚动条(整体)下滑，高度增加)
            document.getElementById('y').value = e.pageY + "PX";
            document.getElementById('x1').value = e.clientX + "PX";//始终以可视区域为整体
            document.getElementById('y1').value = e.clientY + "PX";
            document.getElementById('x2').value = e.offsetX + "PX";
            document.getElementById('y2').value = e.offsetY + "PX";//距离事件源左上角，每一次移动与上一次位置左上角计算
            document.getElementById('x3').value = e.screenX + "PX";
            document.getElementById('y3').value = e.screenY + "PX";//整个屏幕
            alert(e.pageY + "PX" + e.clientY + "PX");//1129px(加上滚动条，以整体计算)  729px(可视区域)

全选，反选，全不选：

   //全选
            document.getElementById('btnAll').onclick = function () {
                var cks = document.getElementById('did').getElementsByTagName('input');
                for (var i = 0; i < cks.length; i++) {
                    cks[i].checked = "true";
                }
            };
            //全不选
            document.getElementById('btnNotAll').onclick = function () {
                var cks = document.getElementById('did').getElementsByTagName('input');
                for (var i = 0; i < cks.length; i++) {
                    //cks[i].checked =false;
                    cks[i].checked = "";
                }
            };
            //反转选择
            document.getElementById("btnReverse").onclick = function () {
                var cks = document.getElementById('did').getElementsByTagName('input');
                for (var i = 0; i < cks.length; i++) {
                    //cks[i].checked =false;
                    //cks[i].checked = "";
                    if (cks[i].checked) {
                        cks[i].checked = "";
                    } else {
                        cks[i].checked = true;
                    }
                }
            };

JS省市联动：

 <script type="text/javascript">  
        var datas = {
            "山东": ["青岛", "济南", "威海"],
            "河南": ["郑州", "开封", "信阳"],
            "山西": ["大同", "太原", "运城"]
        };
        window.onload = function () {
            LoadProvinceData();
            document.getElementById('provinceId').onchange = fnChange;
            //手动触发省份下拉框事件
            document.getElementById('provinceId').onchange();
         
        };
        //加载省份
        function LoadProvinceData() {
            var prid = document.getElementById('provinceId');
            for (var key in datas) {
                var option = document.createElement('option');
                option.innerHTML = key;
                option.value = key;//把当前的省份名称设置到Value
                prid.appendChild(option);
            }
        };
        //属性更改事件
        function fnChange() {
            var citys = document.getElementById('cityId');
            //先清除城市列表
            while (cityId.firstChild) {
                cityId.removeChild(cityId.firstChild);
            }
            //获取用户选择的省份
            var selectPrId = this.value;
            for (var key in datas[selectPrId]) {
                var optionCity = document.createElement('option');
                optionCity.innerHTML = datas[selectPrId][key];
                optionCity.value = datas[selectPrId][key];
                citys.appendChild(optionCity);
            }
        };
    </script>
    //--------------------------------------------------------------------------------------
        <script>
        onload = function() {
            var datas = {
                "山东省": ["青岛市", "济南市", "威海市"],
                "河南省": ["郑州市", "开封市", "信阳市"],
                "山西省": ["大同市", "太原市", "运城市"]
            };
            loadProvinceData(); //加载省份数据
            //属性值更改事件
            document.getElementById('province').onchange = changeEventHandler;
            //触发属性更新事件
            document.getElementById('province').onchange();

            //处理程序----------------------------------------------------------------
            function loadProvinceData() {
                for (var key in datas) {
                    var op = document.createElement('option');
                    op.value = key;
                    op.innerHTML = key;
                    document.getElementById('province').appendChild(op);
                }
            }
            //属性更改处理程序
            function changeEventHandler() {
                // document.getElementById('city').innerHTML = ''; //清除原有市信息
                while (document.getElementById('city').firstChild) {
                    document.getElementById('city').removeChild(document.getElementById('city').firstChild);
                }

                var keyValue = document.getElementById('province').value;
                for (var key in datas[keyValue]) { //循环当前省份的市信息
                    var opt = document.createElement('option');
                    opt.innerHTML = datas[keyValue][key];
                    opt.value = datas[keyValue][key];
                    document.getElementById('city').appendChild(opt);
                }
            }
        };
    </script>

JS动态删除子元素和动态创建子元素：

            //清空元素下的所有子元素
            var objdiv = document.getElementById("timediv");
            while (objdiv.firstChild) {
                alert(objdiv.firstChild.toString());//查找出的对象
                //查找div的子元素，当没有了时候就为Undefined跳出循环
                objdiv.removeChild(objdiv.firstChild);//查到数据然后删除
            };
            //插入子元素
            document.getElementById("timediv").innerText = "我是div";//写入文本 
            var a = document.createElement("a");
            var a = document.createElement('a');
            a.href = "http://www.baidu.com";
            a.innerText = "百度一下，你就知道。";
            a.href = "http://www.baidu.com";2
            a.innerText = "百度";//插入文本
            //永远添加在第一个
           //document.getElementById('timediv').insertBefore(a, document.getElementById('timediv').firstChild);

JS表单操作注意：

        //提交事件只对于表单sbumit提交按钮有效，div层调用表单元素的submit函数提交方式并不会触发
        //document.getElementById("sub").click(); //通过获取提交按钮对象的点击事件等同于点击提交按钮你也可以触发

JS跑马灯：

 var direction = "left";//默認向左移動！
        var timeoutid;
        window.onload = function () {
            //启动计时器
            window.setInterval(function () {
                var txttitle = document.getElementById("txttxt").value;
                if (direction == "left") {
                    //拿到第一个字符换到最后一个
                    var txtfirst = txttitle.charAt(0);
                    var endtxt = txttitle.substring(1);
                    document.getElementById("txttxt").value = endtxt + txtfirst;
                } else {
                    //向右
                    var endtxt = txttitle.charAt(txttitle.length - 1);
                    var first = txttitle.substring(0, txttitle.length - 1);//不包括最后一个索引位置的字符 
                }
            }, 100);
            //为按钮注册点击事件
            document.getElementById("txtleft").onclick = function () {
                direction = "left";
            };
            document.getElementById("txtright").onclick = function () {
                direction = "right";
            };

微博朋友弹窗：

           var friends = ["张三", "李四", "王五"];
            $('#aid').click(function () {
                //获取当前超链接的气质
                //offset()函数用于设置或返回当前匹配元素相对于当前文档的偏移，也就是相对于当前文档的坐标。
                var x = $(this).offset().left;
                var y = $(this).offset().top + $(this).height();
                var friendsdiv=$('<div id="friendid" style="background-color:white;width:120px;border:dashed 1px blue;"><span id="sid"style="float:right;cursor:pointer;color:aqua;">离开</span></div>').appendTo('body');
                $('#sid').click(function () {
                    $(this).parent().remove();//父节点自杀
                });
                //设置层的位置
                friendsdiv.css({ 'position': 'absolute', 'left': x + 'px', 'top': y + 'px' });//使用键值对集合形式
                //动态创建列表
                $('<ul id="uuid" style="list-style-type:none; margin:0;clear:both;"></ul>').appendTo(friendsdiv);
                if ($('#uuid').text().length==0) {
                    for (var i = 0; i < friends.length; i++) {
                        $('<li>' + friends[i] + '</li>').appendTo('#uuid').mouseover(function () {
                            $(this).css('backgroundColor', 'red');
                        }).mouseout(function () {
                            $(this).css('backgroundColor', 'white');
                        }).click(function () {
                            $('#txtmoden').val($('#txtmoden').val() + '@' + $(this).text());
                        });
                    }
                } else {
                    alert("加载完毕");
                }