分享幾個前端乾貨，面試經常提
前言
今天，分享幾個小知識，算是乾貨吧！前端面試中也經常會問及，不過問及的機率相對較少。我個人認為，面試中你把基礎的知識打好，就可以無敵！哪些基礎知識呢？例如：js的繼承、js函式等等，萬變不離其宗，都是這些的擴充套件及應用。這些知識理解透徹了，再加一些面試技巧就可以了！
一、怎麼讓Chrome支援小於12px 的文字？
這個我們在做移動端的時候，設計師圖片上的文字假如是10px，我們實現在網頁上之後。往往設計師回來找我們，這個字型能小一些嗎？我設計的是10px？為啥是12px?其實我們都知道，谷歌Chrome最小字型是12px，不管你設定成8px還是10px，在瀏覽器中只會顯示12px，那麼如何解決這個坑爹的問題呢？
我們的做法是：
針對谷歌瀏覽器核心，加webkit字首，用transform:scale()這個屬性進行縮放！
<style>
p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}</style><p><span>haorooms部落格測試10px</span></p>二、IOS手機瀏覽器字型齒輪
修改-webkit-font-smoothing屬性，結果是：-webkit-font-smoothing: none:無抗鋸齒-webkit-font 三、如何修改chrome記住密碼後自動填充表單的黃色背景？
大體可以通過input : -webkit-autofill來進行修改！
input:-webkit-autofill {
background-color:#FAFFBD;
background-image: none;
color:#000;}四、谷歌瀏覽器執行下面程式碼，並解釋！
[].forEach.call($$</span><span class="pun">(</span> 你可以在你的Chrome瀏覽器控制檯中輸入$$('a')，然後你就能得到一個當前頁面中所有錨元素的列表。</p>
<p>$$函式是許多現代瀏覽器命令列API中的一個部分，它等價於document.querySelectorAll,你可以將一個CSS選擇器作為這個函式的引數，然後你就能夠獲得當前頁面中所有匹配這個CSS選擇器的元素列表。如果你在瀏覽器控制檯以外的地方，你可以使用document.querySelectorAll('')來代替$$('')
為元素新增顏色
為了讓元素都有一個漂亮的邊框，我們在上面的程式碼中使用了CSS屬性outline。outline屬性位於CSS盒模型之外，因此它並不影響元素的屬性或者元素在佈局中的位置，這對於我們來說非常有用。這個屬性和修改border屬性非常類似，因此下面的程式碼應該不會很難理解：
a.style.outline="1px solid #"+ color
真正有趣的地方在於定義顏色部分：
（~~(Math.random()*(1<<24))).toString(16)
~~的作用相當於parseInt，和我前面講解的“|”功能類似，關於運算子“I” ，可以去看看！
通過上面程式碼可以獲取到一個隨機的顏色值！
五、input [type=search] 搜尋框右側小圖示如何美化？
美化效果如下圖：
右側預設的比較難看的按鈕，美化成右側效果。
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance: none;height:15px; width:15px;border-radius:8px;background:url("images/searchicon.png")no-repeat 00;background-size:15px15px;}
六、iOS safari 如何阻止“橡皮筋效果”？
但是，我們遇到的問題不是這樣，我是要解決彈跳導致彈出層（position:absolute）的覆蓋層高度小於100%;
針對這個問題，我想到的解決方案如下：
方法一：
把position:absolute改成position:fixed，並在彈出層之後，設定body的高度是100%；overflow是hidden。
方法二：
思路是獲取蘋果瀏覽器導航欄的高度。然後滾動的時候，重新獲取其高度。在導航欄高度變小的時候，給彈出層增加高度的百分比！
程式碼如下：
//ios safari 伸縮判斷var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true;
$(window).scroll(function(){if(agent.indexOf("iPhone")!=-1|| agent.indexOf("iPad")!=-1){var topbarHeightNow=window.outerHeight-window.innerHeight;if(topbarHeightNow<topbarHeight){
globleflag=false//此處寫處理邏輯}else{
globleflag=true//此處寫處理邏輯}}});
七、實現點選文字，文字後面radio選中效果
這個效果是前端很經常用到和遇到的效果了，實現這個效果的方式也很多，很多朋友用js和jquery來實現，但是最簡單的，我們可以直接用lable標籤的 for 屬性來實現。
看下下面例子：
<form><labelfor="male">Male</label><inputtype="radio"name="sex"id="male"/><br/><labelfor="female">Female</label><inputtype="radio"name="sex"id="female"/></form>
label 的for屬性後面跟著input的id,就可以點選label，來觸發input效果了，大家可以試一試！
八、網站中，圖片檔案（jpg，png,gif），如何點選下載？而非點選預覽？
我們平時在網站中的圖片，假如我們要下載，如下寫：
<ahref="haorooms部落格.jpg">下載</a>
我們點選下載按鈕，只會預覽“haorooms部落格.jpg”這張圖片，並不會出現下載框，另存為那種？那麼我們如何做呢？
我們只需要如下寫
<ahref="haorooms部落格.jpg"download>下載</a>
就可以下載了。點選如下進行嘗試吧！下載
不但如次，我們還可以指定檔名稱，如下寫法：
<ahref="haorooms部落格.jpg"download="haoroom前端部落格圖片下載">下載</a>
測試如下：下載
上面就是指定下載的寫法！
九、Math.min()比Math.max()大
Math.min()<Math.max()// falseMath.min()>Math.max()// true
因為Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。
十、經典面試題目
constGreeters=[]for(var i =0; i <10; i++){Greeters.push(function(){return console.log(i)})}Greeters[0]()// 10Greeters[1]()// 10Greeters[2]()// 10
把 var 改成 let試試！
constGreeters=[]for(let i =0; i <10; i++){Greeters.push(function(){return console.log(i)})}Greeters[0]()// 0Greeters[1]()// 1Greeters[2]()// 2
十一、陣列物件全等比較
// 這些可以'abc'==='abc'// true1===1// true// 然而這些不行[1,2,3]===[1,2,3]// false{a:1}==={a:1}// false{}==={}// false
因為[1,2,3]和[1,2,3]是兩個不同的陣列，只是它們的元素碰巧相同。因此，不能簡單的通過===來判斷。
十二、關於數字和點號
3.toString()3..toString()3...toString()
這個題也挺逗, 答案是
error,'3', error
你如果換一個寫法就更費解了
var a =3;
a.toString()
這個答案就是 ‘3’;
為啥呢?
因為在 js 中 1.1, 1., .1 都是合法的數字. 那麼在解析 3.toString 的時候這個 . 到底是屬於這個數字還是函式呼叫呢? 只能是數字, 因為3.合法啊!
十三、變數提升
如下題目
var name ='World!';(function(){if(typeof name ==='undefined'){var name ='Jack';
console.log('Goodbye '+ name);}else{
console.log('Hello '+ name);}})();
理解這個，我們可以先看下面的題目：
var x =1;// Initialize x
console.log(x +" "+ y);// '1 undefined'var y =2;
相當於：
var x =1;// Initialize xvar y;// Declare y
console.log(x +" "+ y);// '1 undefined'
y =2;// Initialize y
變數提升了！
所以上面的自呼叫函式可以如下理解：
var name ='World!';(function(){var name;if(typeof name ==='undefined'){
name ='Jack';
console.log('Goodbye '+ name);}else{
console.log('Hello '+ name);}})();
name在scope裡面，因此，先找裡面，裡面找到了name,因此執行的結果是
'Goodbye Jack'
十四、區域性變數和全域性變數
(function(){var x = y =1;})();
console.log(y);
console.log(x);
輸出：
1, error
y 被賦值到全域性。x 是區域性變數，全域性中獲取不到。所以列印 x 的時候會報 ReferenceError
十五、正則表示式字面一致也不相等
var a =/123/,
b =/123/;
a == b
a === b
即使正則的字面量一致, 他們也不相等.
答案 false, false
十六、函式名稱不可改變
function foo(){}var oldName = foo.name;
foo.name ="bar";[oldName, foo.name]
答案
['foo','foo']
例如：
function doSomething(){}
doSomething.name;// "doSomething"var f =function(){};varobject={
someMethod:function(){}};
console.log(f.name);// "f"
console.log(object.someMethod.name);// "someMethod"
函式的名字是不可以改變的。
十七、寫出最簡單的去重方式
例如：
let array=[0,3,4,5,3,4,7,8,2,2,5,4,6,7,8,0,2,0,90];[...newSet(array)]
或者直接
[...newSet([1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0])]
2、es5的Array filter()
[1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0].filter(function(elem,
相關推薦
分享幾個前端乾貨，面試經常提
前言
今天，分享幾個小知識，算是乾貨吧！前端面試中也經常會問及，不過問及的機率相對較少。我個人認為，面試中你把基礎的知識打好，就可以無敵！哪些基礎知識呢？例如：js的繼承、js函式等等，萬變不離其宗，都是這些的擴充套件及應用。這些知識理解透徹了，再加一些面試技巧就可以了！
一、怎麼讓Chrome支援小於12p
分享幾個學習前端的網站
clas pos 分享 教程 pan 文檔 doc run bsp 1.關註前端開發，關註用戶體驗
2.源於開發者，服務開發者
3.菜鳥教程
4.印記中文，唯一與官方文檔同步的中文文檔分享幾個學習前端的網站
從事多年大數據，給大家分享幾個學習方法
大數據 大數據學習 大數據開發 編程語言 曾從事軟件開發和培訓9年。參與多個大型項目開發,涉及c++,Java,Python,大數據,數據科學,人工智能等多個領域。熟悉多個領域中軟件開發流程及軟件架構。曾在大型IT公司任程序員,項目經理,高級講師,教學負責人。現在是一名線上培訓機構的講師，看到
關於程式設計師的幾個階段 轉，好的文章就要分享
因為和同事有約定再加上LZ自己也喜歡做完一件事之後進行總結，因此有了這篇文章。這篇文章大部分內容都是面向整個程式設計師群體的，當然因為LZ本身是做Java開發的，因此有一部分內容也是專門面向咱們Java程式設計師的。
簡單先說一下，LZ座標杭州，13屆本科畢業，算上年前在阿里巴巴B2B事業部的面
分享幾個提升審美的前端UI框架！
十個前端UI優秀框架
自己最近也在看，也在學^_^
最近需要一些前端框架,於是在網上整理了一些感覺不錯的前端框架,有pc端和移動端,為了方便日後自己先記錄下來了...
Bootstrap
首先說 Bootstrap，估計你也猜到會先說或者一定會有這個( 呵呵了 )，這是說明它的強大之
作為Web前端開發者，不可不知的幾個前端框架
近年來，Web技術的發展速度快得讓人窒息，特別是最近幾年一代又一代的變革一次又一次的創造。各大巨頭又紛紛把技術轉向HTML5和CSS3，各種企業級框架如雨後春筍般湧現。
那麼今天就給大家介紹幾個在web界比較優秀的前端框架。
1.Bootstrap
為大家分享幾個又實用價值的資源網站，記得收藏
或許有人和我一樣在網上找資源能找半天，非常浪費時間，下面為大家分享幾個資源網站
一，PicJumbo
PicJumbo這是一個圖片素材網，不僅只有圖片，還有向量圖，插畫，種類也很繁多，有建築類，時尚類，科技類，生活類的等等類別的圖片。
二，辦公資源
這
分享幾個.NET WinForm開源元件，紀念逐漸遠去的WinForm。。。
前面3個月的時間內，這些.NET開源專案你知道嗎？系列文章已經發表了3篇，共計45個平時接觸比較少，曾經默默無聞的.NET開源專案，展示給大家，當然不是每個人都能用得上，但也的確是有些人用了，反響還不錯，所以非常感謝大家的支援。由於收藏夾的專案越來越少，越整理到最後，越發
分享幾個開源的android專案的原始碼，基本上用androidstudio都可以編譯成功
轉自：http://blog.csdn.net/liuqz2009/article/details/53507472
Android開源專案有很多，但是完整的app專案不多，下面是最近我從 jcodecraeer網站 整理的一些開源app專案：
注： jcodecr
前端程式設計師需要具備的幾個軟實力，你具備了嗎
有很多關於前端程式設計師的調侃，比如“智商很高情商卻很感人，思維縝密，極客，加班嚴重，沒有物件只能new一個……”，雖然不是所有前
分享幾個珍藏多年的黑科技app，總有你喜歡的
手機APP是大家每天都要使用的一種工具，今天小編給大家分享4款珍藏多年的黑科技APP，功能各個超級出色，請大家低調收藏。
1.筱筱
C++ string中的幾個小陷阱，你掉進過嗎？
stl 試題 賦值 clu ror ati world mod iostream
C++開發的項目難免會用到STL的string。使用管理都比char數組（指針）方便的多。但在得心應手的使用過程中也要警惕幾個小陷阱。避免我們項目出bug卻遲遲找不到原因。1. 結構體中的
關於信息化的幾個小故事，摘自麥楓網
了解 信心 放大 凝聚力 是什麽 小故事 工作 組織 外部 企業的信息化的實行是增強企業反響才幹、進步企業效率、改進企業管理方式的一項工作，選擇實施一項性能良好的信息化軟件是作為信息化的主管的一項重要工作，下面我們就幾個小故事來看一看： 一、指導看電腦 這是發作在幾年前
幾個前端工程師應當掌握的“詞語”
photoshop html5 -s 設置 none 瀏覽器中 應用場景 規範 一段時間 HTML5學堂-碼匠：W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各類前端術語知多少？
有不少前端開發工程師，可能並不清楚下面的部分詞語，但是在實戰中其實都在使用
分享幾個能用的editplus 註冊碼
地址 sky edit 使用 editplus soft -c host edi 分享幾個能用的editplus 註冊碼原文：http://host.zzidc.com/wljc/1286.html 註冊名：host1991 序列號：14F50-CD5C8-E1
Python的幾個小程序，其實我覺得可以稱作初學時的基礎算法
基本 什麽 否則 col 重新 保留 put span pri 昨天學習的，今天做一下整理，以前學過幾天c，感覺什麽都沒有搞出來，有點泄氣，看到Python後試試，從最基本的東西學起，希望不要辜負我的這一點熱情。
if語句的應用
1 n=1
2 while
根據幾個的描述，判斷結果
技術分享 AI clu 比賽 http 結果 color print amp 5位運動員參加了10米臺跳水比賽，有人讓他們預測比賽結果 A選手說：B第二，我第三； B選手說：我第二，E第四； C選手說：我第一，D第二； D選手說：C最後，我第三； E選手說：我第四，A第一；
業余草分享Java高級工程師，面試總結
多服務器 疑問 EDA 線程安全 只需要 結構 功能 抓包 htm 面試之前覺得自己在原來公司相同工作經驗的同事當中，無論是業務能力還是技術能力都還可以，也對自己解決問題的能力有一定的自信，剛開始面試的時候，一度出現了尷尬，明明知道的東西，就是說不出來，也不知道從哪裏說，自
[API 開發管理] 分享幾個 eoLinker 實用操作技巧
導出pdf 請求參數 項目文件 lin 本地 方便 tro 批量導入 oracl 一鍵離線導出項目，PDF、WORD等格式任你挑選
舉例說明，如果我要將 “示例素材項目” 導出到本地，並且以 PDF 的格式保存。
首先找到該項目所在空間：演示空間，在左邊一級菜單中選擇 “
分享幾個實用的PDF美化技巧
https 需要 字體 center 生活 我們 edi 根據 體驗 最近杭州又火了！杭州的一男子因為PPT做的太醜被公司開除，引發網友熱議，大家在對他做的“PPT究竟有多醜”產生好奇的同時，也針對辦公類文件美化是否重要這一點進行激烈的爭議和吐槽。
其實不光是PPT，我們