実践的なフロントエンド筆記試験問題 10 問_html/css_WEB-ITnose

注: 一部の回答はインターネットから編集されています

1. 配列 (js) 内の重複要素を削除する方法

方法 1: 新しい配列を作成し、indexOf() メソッドを使用して要素のインデックス値を決定します。配列内 新しい配列内の配列 -1 かどうか。そうであれば、次のように新しい配列に追加し、関数にカプセル化します。

function unique(arry){    var arry2=[];    for(i=0;i<arry1.length;i++){        if(arry2.indexOf(arry1[i])==-1){          arry2.push(arry1[i]);        }    }    return arry2;}

方法 2: 引き続き、indexOf() メソッドを使用して、インデックス値が -1 であるかどうかを検出します。元の配列の要素は、次のように i と等しくなります:

function unique(arry){    var arry2=[];    for(i=0;i<arry1.length;i++){        if(arry1.indexOf(arry1[i])==i){          arry2.push(arry1[i]);        }    }    return arry2;}

2. 垂直方向のセンタリング (CSS) を実装する方法

方法 1: テーブルのvertical-align 属性を使用します もちろん、最初に表示モードを a に設定します。

<div class="content">    <div class="cell">      your content    </div></div>/*css*/.content{    display:table;}.cell{   display:table-cell;   vertical-align:middle;}

方法 2: 単一行のテキストを使用する場合、次のように line-height 属性を使用できます:

<div class="content">    your content</div>/*css*/.content{    height:20px;    line-height:20px;}

3. 絶対位置の要素にドラッグ効果を実装する方法 (js)

要素にmousedownイベントを与え、マウスの座標と要素の上端と左端の差分を取得し、さらに必要な差分合計によりmousemoveイベントを追加しますマウス位置の上端と左端の値をリセットします、最後に、mouseup 属性を追加し、次のように、mousedown および Mouseove イベントをクリアします。

function drag(ele){            ele.onmousedown=function(event){                var disx=event.clientX-ele.offsetLeft;                var disy=event.clientY-ele.offsetTop;                document.onmousemove=function(event){                    ele.style.left=event.clientX-disx+"px";                    ele.style.top=event.clientY-disy+"px";                };                document.onmouseup=function(){                    document.onmousedown=null;                    document.onmousemove=null;            };        };    }

4. ele.removeClass() の効果を理解する

このメソッドは、jQuery のメソッドです。要素のクラス名を追加します。パラメータがない場合、デフォルトではすべてのクラス名が削除されます。原則として、split() メソッドを使用して要素のクラス名を配列に変換します。次に、配列の IndexOf() メソッドを使用して、メタクラス名の配列内で削除する必要があるクラス名のインデックス値を見つけ、次のように splice() メソッドを通じてそれを削除します。デバイスの種類を判断するには?

userAgent を使用します。 userAgent の機能は、ブラウザ名、バージョン、エンジン、オペレーティング システム、その他の情報の内容を識別することです。以下の通り:

function removeClass(ele,delClassArry){    var claNameArry=ele.className.split(" ");    if(delClassArry){        for(i=0;i<delClassArry.length;i++){            var index=claNameArry.indexOf(delClassArry[i]);            claNameArry.splice(index,1);        }    }else{        claNameArry.splice(0,claNameArry.length);    }    var nowClass="";    for(i=0;i<claNameArry.length;i++){        nowClass+=claNameArry[i];        if(i<claNameArry.length-1){            nowClass+=" ";        }    }    ele.className=nowClass;}

拡張読み物 1拡張読み物 2

6. QQ Space や Weibo のようなスキン変更システムを実装するとしたら、どうしますか?

個人的には、ユーザーがスキンを変更することを選択した場合、js を使用してリンクの href 属性値を対象のスキンの CSS に置き換えることができると思います。

7.ページ

(1) 次のように HTML5 オーディオ タグを使用しますが、IE 8 以前のバージョンではサポートされていません:

var browser = { versions:function(){  var u = navigator.userAgent, app = navigator.appVersion;  return ; }(), language:(navigator.browserLanguage || navigator.language).toLowerCase()} document.writeln("语言版本: "+browser.language);document.writeln(" 是否为移动终端: "+browser.versions.mobile);document.writeln(" ios终端: "+browser.versions.ios);document.writeln(" android终端: "+browser.versions.android);document.writeln(" 是否为iPhone: "+browser.versions.iPhone);document.writeln(" 是否iPad: "+browser.versions.iPad);document.writeln(navigator.userAgent);

(2) 次のように Yahoo メディア プレーヤーを使用します:

<audio src="songPath"></audio>

8. ランダムな音声を生成する関数を実装します。カラー

通常、カラー モードは 16 進数モードと RGB モードを使用して色を自動生成します

(1) 16 進数モード、Math.random() メソッドを使用してランダムな自然数を生成します。次のように、0 から 1 までの最大値を乗算し、toString() メソッドを使用して 16 進値に変換します。

<a href="songPath"></a><srcipt type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

(2) RGB モード、上記と同じ、

function color(){    var color=Math.round(Math.random()*(16*16*16*16*16*16+16)).toString(16);      if(color<=0xf){          color="00000"+color;      }      else if(color<=0xff){          color="0000"+color;      }      else if(color<=0xfff){          color="000"+color;      }      else if(color<=0xffff){          color="00"+color;      }      else if(a<=0xfffff){          color="0"+color;      }      color="#"+color;      return color;}

9 . 非同期とは何ですか?投票とは何ですか?

ポーリングってよく分からないのでググるしかありません

非同期は呼び出し後すぐに結果が得られないので戻り値がありません。ただし、呼び出し先は後でステータス、通知を渡すか、コールバック関数を介してこの呼び出しを処理します。 ポーリングは、情報を「プル」する動作モードです。データを送信するために接続が確立されるたびに、サーバーに情報があるかどうかを定期的に問い合わせるようにタイマーを設定します。 10. フォーカスカルーセル効果を実現するにはどうすればよいですか?

フォーカス カルーセル画像を実装するには、すべてのフォーカスにクリック イベントを設定し、タイマーを使用して画像を回転できるように変更できます。 早速、前回実装したコードを投稿します。 HTML コード:

function color(){    var r=Math.round(Math.random()*255);    var g=Math.round(Math.random()*255);    var b=Math.round(Math.random()*255);    var color="rgb("+r+","+g+","+b+")";    return color;}

CSS コード:

<div class="bisc-slider">    <ul>        <li class="slide  slide-01" id="slide-cur"><img  src="/static/imghwm/default1.png"  data-src="../img/slide01-1920px.jpg"  class="lazy" / alt="実践的なフロントエンド筆記試験問題 10 問_html/css_WEB-ITnose" ></li>        <li class="slide"><img  src="/static/imghwm/default1.png"  data-src="../img/slide02-1920px.jpg"  class="lazy" / alt="実践的なフロントエンド筆記試験問題 10 問_html/css_WEB-ITnose" ></li>        <li class="slide"><img  src="/static/imghwm/default1.png"  data-src="../img/slide03-1920px.jpg"  class="lazy" / alt="実践的なフロントエンド筆記試験問題 10 問_html/css_WEB-ITnose" ></li>        <li class="slide"><img  src="/static/imghwm/default1.png"  data-src="../img/slide04-1920px.jpg"  class="lazy" / alt="実践的なフロントエンド筆記試験問題 10 問_html/css_WEB-ITnose" ></li>        <li class="slide"><img  src="/static/imghwm/default1.png"  data-src="../img/slide05-1920px.jpg"  class="lazy" / alt="実践的なフロントエンド筆記試験問題 10 問_html/css_WEB-ITnose" ></li>    </ul>    <div class="dot-list">        <span class="dot"></span>        <span class="dot"></span>        <span class="dot"></span>        <span class="dot"></span>        <span class="dot"></span>    </div>    <span id="slide-prev"></span>    <span id="slide-next"></span></div>

JavaScript コード:

.bisc-slider{    position:relative;    height:22.083333%;    overflow: hidden;}.slide{    opacity:0;    z-index: 0;    padding-bottom:22.083333%;    width:100%;    position:absolute;}.slide-01{    opacity:1;    z-index: 1;}.bisc-slider ul{    padding-bottom:22.083333%;}.bisc-slider .slide img{    position:absolute;    left:0;    top:0;    width:100%}.dot-list{    position:absolute;    left:61.8%;    bottom:10px;    z-index: 9999999999;}.dot-list span{    display:inline-block;    width:10px;    height:10px;    margin:3px;    border-radius: 5px;    background:#fff;    cursor: pointer;}.dot-list span:first-child{    background:#365e7b;}#slide-prev{    background:url(../img/arl.png) no-repeat center;    height:100%;    width:50px;    position:absolute;    left:-50px;    top:0;    z-index: 999999999;    cursor:pointer;}#slide-next{    background:url(../img/arr.png) no-repeat center;    height:100%;    width:50px;    right:-50px;    top:0;    z-index:999999;    position:absolute;    cursor:pointer;}