總結的一些前端開發筆試題

時間 2019-11-13

標籤總結一些前端開發筆試欄目快樂工作简体版

原文原文鏈接

最近正忙於前端的應聘，在網絡上搜集了一些問題，順便結合網絡答案，本身也整理了一部分，若有紕漏，還望批評指正。javascript

一、請寫出至少三個CSS3中新添加的樣式屬性的名字；html

（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;java

（3）border-top-color/border-right-color/border-bottom-color/border-left-color/border-image/border-radiusjson

（4）overflow-x/overflow-y/box-sizing/resize/nav-index/transform等等數組

ps:因爲一開始就學的CSS3，因此對於那些是CSS3中那些是新添加的，有點模糊。本身看了下，就不一一列舉了。網絡

二、JavaScript包括哪些數據類型？ide

第一種：javascript中包含6種數據類型：undefined、null、string、number、boolean和object。其中，前5 種是原始數據類型，object是對象類型。flex

object類型中包括Object、Function、String、Number、Boolean、Array、Regexp、Date、 Globel、Math、Error，以及宿主環境提供的object類型。this

第二種：九種類型：一、未定義undefined 二、空null 三、布爾boolean 四、字符串string 五、數字number 六、對象object 七、引用reference 八、列表list 九、完成completion 後三種類型是javascript運行時的中間結果的數據類型，在代碼中不能使用。

三、使用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 }

四、用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>

五、HTML5強調標籤的語義化，請寫出5個HTML5的語義化標籤。

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

六、使用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";
       }
}

七、數組去重。

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);

八、統計一個字符串中，出現次數最多的字符，統計這個字符出現的次數。

 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);

九、在網頁上實現當年還剩多少時間，格式: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>