• 总结的一些前端开发笔试题


    最近正忙于前端的应聘,在网络上搜集了一些问题,顺便结合网络答案,自己也整理了一部分,如有纰漏,还望批评指正。

    1、请写出至少三个CSS3中新添加的样式属性的名字

    (1)增强的文本属性:text-shadow(CSS2.1中已定义,但CSS3中又重新定义并增加了不透明度效果)、text-overflow、word-wrap;

    (2)新增的盒模型属性:box-align、box-direction、box-flex、box-flex-group、box-lines、box-orient、box-pack;

    (3)border-top-color/border-right-color/border-bottom-color/border-left-color/border-image/border-radius

    (4)overflow-x/overflow-y/box-sizing/resize/nav-index/transform等等

    ps:由于一开始就学的CSS3,所以对于那些是CSS3中那些是新添加的,有点模糊。自己看了下,就不一一列举了。

    2、JavaScript包括哪些数据类型?

    第一种:javascript中包含6种数据类型:undefined、null、string、number、boolean和object。其中,前5 种是原始数据类型,object是对象类型。

    object类型中包括Object、Function、String、Number、Boolean、Array、Regexp、Date、 Globel、Math、Error,以及宿主环境提供的object类型。

    第二种:九种类型:1、未定义undefined 2、空null 3、布尔boolean 4、字符串string 5、数字number 6、对象object 7、引用reference 8、列表list 9、完成completion 后三种类型是javascript运行时的中间结果的数据类型,在代码中不能使用。

    3、使用JavaScript深度克隆一个对象?

    深度克隆:所有元素或属性均完全克隆,并于原引用类型完全独立,即,在后面修改对象的属性的时候,原对象不会被修改。

     1 Object.prototype.Clone=function(){
     2     var objClone;
     3     if(this.constructor==Object){
     4         objClone=new this.constructor();
     5     }
     6     else{
     7         objClone=new this.constructor(this.valueOf());
     8     }
     9     for(var key in Object){
    10         if(objClone[key]!=this[key]){
    11             if(typeof(this[key])=="object"){
    12                 objClone[key]=this[key].Clnoe();
    13             }
    14             else{
    15                 objClone[key]=this[key];
    16             }
    17         }
    18     }
    19     objClone.toString=this.toString;
    20     objClone.valueOf=this.valueOf;
    21 }

    4、用javascript实现控制一个文本框的输入字数限制,超出字数限制文本框飘红显示。

    <script type="text/javascript">
             function checkLength(Id){
                  var maxValue=9;//设定最大的文本字数
                  if(Id.value.length>9){
                       Id.style.borderColor="red";
                       //alert("已超出文本的长度!");
                        
                  }
              }
    </script> 
    <form>
          <input id="ss" type="text" onkeyup="checkLength(this)">
    </form>

     5、HTML5强调标签的语义化,请写出5个HTML5的语义化标签。

    <header><nav><article><aside><footer><section><hgroup><address><time><figure>.......

    6、使用javascript实现,将文档中className有“test”的td标签背景色设为黄色.

    var tds=document.getElementsByTagName("td");
    for(var i=0;i<tds.length;i++){
           if(tds[i].className.indexOf("test")!=-1){
                  tds[i].style.backgroundColor="yellow";
           }
    }

    7、数组去重。

    var arr=[15,29,33,33,15,23,19,29,56];//需要去重的数组
        var newArr=[];
        var json={};
        for(var i=0;i<arr.length;i++){
            if(!json[arr[i]]){
                newArr.push(arr[i]);
                json[arr[i]]=1;
            }
        }
    alert(newArr);

     8、统计一个字符串中,出现次数最多的字符,统计这个字符出现的次数。

     1             var ss="abcdefgabaag";
     2             for(var i=0,len=0,temp="";i<ss.length;i++){
     3                 var s=ss.substr(i,1);
     4                 var tt=ss.split(s);
     5                 if((tt.length-1)>len){
     6                     len=tt.length-1;
     7                     temp=s+"出现最多次数为"+len;
     8                 }
     9             }
    10             alert(temp);

     9、在网页上实现当年还剩多少时间,格式:xx年还剩xx天xx小时xx分xx秒。

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         
     7     </head>
     8     <body>
     9         <div id="datatime"></div>
    10         <script type="text/javascript">
    11     function counter() {
    12       document.getElementById("datatime").innerHTML="";
    13       var date = new Date();
    14       var year = date.getFullYear();
    15       var date2 = new Date(year, 12, 31, 23, 59, 59);
    16       var time = (date2 - date)/1000;
    17       var day =Math.floor(time/(24*60*60))
    18       var hour = Math.floor(time%(24*60*60)/(60*60))
    19       var minute = Math.floor(time%(24*60*60)%(60*60)/60);
    20       var second = Math.floor(time%(24*60*60)%(60*60)%60);
    21       var str = year + "年还剩"+day+""+hour+""+minute+""+second+"";
    22       document.getElementById("datatime").innerHTML=str;
    23       
    24    }
    25    window.setInterval("counter()", 1000);
    26         </script>
    27     </body>
    28 </html>
  • 相关阅读:
    根据屏幕大小,加载不同大小的图片
    规范命名CSS
    iframe框架加载完成后执行函数
    js获取IP地址
    80端口被System占用 造成Apache不能启动的解方案
    自定义一个仿Spinner
    让你的代码量减少3倍!使用kotlin开发Android(一)
    屏幕适配
    一个旋转菜单
    手势监听GestureDetector 案例
  • 原文地址:https://www.cnblogs.com/lonelybonze/p/3957706.html
Copyright © 2020-2023  润新知