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

WBOY
リリース: 2016-06-24 11:24:31
オリジナル
966 人が閲覧しました

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

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="../img/slide01-1920px.jpg" /></li>        <li class="slide"><img src="../img/slide02-1920px.jpg" /></li>        <li class="slide"><img src="../img/slide03-1920px.jpg" /></li>        <li class="slide"><img src="../img/slide04-1920px.jpg" /></li>        <li class="slide"><img src="../img/slide05-1920px.jpg" /></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;}
ログイン後にコピー
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!