Renren.com で上級フロントエンド面接の筆記試験の質問を見ました
手書きのコードが必要で、問題の 1 つは画像表示を作成することです
Baidu の写真の下部にある小さなサムネイルのある表示バーに似ています
次に、マウス ホイールをスクロールして大きくしたり小さくしたりする必要があります。
やり方がよく分からないので、ネットで情報を探しました。
onmousewheelをキャプチャできるイベントを見つけました
次に、event.wheelDelta の正または負の値に基づいて、前方にロールするか後方にロールするかを決定します。
何気なく小さな例を書いてキーボードのキーをキャプチャしましたが、あまり美しくなく、改行もありません。
textNodeで作成しているため、htmlコードを追加することはできません。
そういえば、この方法は xss インジェクションを防ぐために使用できますか?
次のようにコードをコピーします。
<body onkeydown="showKey()" onmousewheel="showKey()">
次のようにコードをコピーします。
関数 showKey(){
if(event.wheelDelta){
次のようにコードをコピーします。
// 正の 120 は前方ロール、負の 120 は後方ロールを意味します
var textNode = document.createTextNode(event.wheelDelta+" ");
document.body.appendChild(textNode);
document.body.normalize();
}
if(イベント.キーコード)
{
var textNode = document.createTextNode(event.keyCode+" ");
document.body.appendChild(textNode);
document.body.normalize();
}
}
その中で、今日見た高度なデザインの textNode 要素の 1 つを使用しました。
複数の textNode をマージするメソッド
次のようにコードをコピーします。
ノーマライズ（）;