阅读量

“20230330领航面试题有关滑块数值、图片预览、省市联动二级菜单”

2023-03-30

小作业

1.滑块数值显示：

//range滑块显示为数字
            function change(){
            var value = document.getElementById('range').value;
            document.getElementById('value').innerHTML = value;
            }//先在滑块设置时把oninput和onchange事件都给上chang（）函数，一旦活动滑块就调用这个函数

2.图片预览：

//图片预览函数
              function imgPreview(preview){
                //获取目前上传文件，这里使用到了this传参
                 var file = preview.files[0];//给file上传的第一个图片
                 console.log(file);
                 //设置预览图片大小
                 if(file.size > 1024*1024*2){
                  alert("图片大小不可超过2MB!");
                  return flase;
                 }
                 //获取windows的URL
                 var URL = window.URL || window.webkitURL;
                 //通过file生成目标url
                var imgURL = URL.createObjectURL(file);
                //用这个URL产生一个img图片并显示 
                var img=document.createElement("img");
                img.src = imgURL;//将生成的imgURL给img
                img.width = 100;
                img.height = 100;
                img.style.display = 'block';
                document.getElementById("imgBox").appendChild(img);//通过id找到放图片的imgBox并添加一个节点img
                }

3.省市二级联动：

//二级省市联动下拉菜单，以下的val都是使用this.value传回来的选择省所代表的值
        var arr = new Array(5);//设置市，相当于一个字典,根据选择的省传回来的值进行相应的调用
        arr[0] = ['请选择'];
        arr[1] = ['武汉','潜江'];
        arr[2] = ['杭州','宁波'];
        arr[3] = ['合肥','芜湖'];
        arr[4] = ['理塘顶真','雪豹'];
    
          function changeCity(val){//为防止重复出现市设计的函数,放在根据value匹配市前进行提前的删除归零
            //获取城市下拉框
            var selCity = document.getElementById("city");
            // 若有元素则删除
            var cityNodes=selCity.getElementsByTagName("option");
  
            for(var y=0;y<cityNodes.length;y++){
              selCity.removeChild(cityNodes[y]);
              y--;
            }
  
            //根据value匹配市
            for(var y=0;y<arr[val].length;y++){
              //创建option标签
              var optionNode = document.createElement("option");
              //设置option标签为城市名
              optionNode.innerHTML=arr[val][y];
              //将optionNode添加到下拉框节点中
              selCity.appendChild(optionNode);
            }
          }

查阅的资料：

1.input元素的oninput事件和onchange事件
2.JS中的this详解
3.window.URL || window.webkitURL || window.mozURL 的作用
4.JavaScript中的appendChild（）方法
6.innerHTML作用和用法
5.创建元素节点createElement
6.Javascript removeChild()删除节点及删除子节点的方法

特殊问题：
JS删除子元素删除不干净问题
除了这种还可以使用y减减来实现删除干净；

本文作者： lllry
本文链接： http://wusterlllry.xyz/2023/03/30/%E2%80%9C20230330%E9%A2%86%E8%88%AA%E9%9D%A2%E8%AF%95%E9%A2%98%E6%9C%89%E5%85%B3%E6%BB%91%E5%9D%97%E6%95%B0%E5%80%BC%E3%80%81%E5%9B%BE%E7%89%87%E9%A2%84%E8%A7%88%E3%80%81%E7%9C%81%E5%B8%82%E8%81%94%E5%8A%A8%E4%BA%8C%E7%BA%A7%E8%8F%9C%E5%8D%95%E2%80%9D/
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！