一個初級前端，面試的時候要求手寫js輪播效果，寫不出來正常嗎

正常，輪播這種東西純用css都能實現，隨手就能寫，從新建記事本開始計時，寫完超過5分鐘你砍我，扯什么js當借口。。。

為啥會有這么多人不信啊。。。我貼gif看得清代碼么？你們看這點代碼有難度么。。。從新建記事本開始計時，編輯器editplus，有代碼染色，無自動補全，換系統自帶記事本寫也可以。html部分純手打，用了大概1分30秒，這部分你把我屏幕關了就給個鍵盤讓我寫10遍我都能寫10份分毫不差的出來，一個制表符和換行符都不帶多的。。。剩下三分鐘在瀏覽器上按F12寫css樣式，瀏覽器有補全，最后復制粘貼整理到代碼里，刷新頁面確認效果收工。。。。一共4分31秒，animation的參數順序忘記了，稍微試了幾次，不然還能快一點。其實比我想象中慢，我本來想說3分鐘來著，還好穩了一手。。。

好的，我發現PC知乎可以貼代碼，那我貼出來吧。。。真是純基本功，面試考這個沒毛病

<html>
<head>
</head>
<body>
	<style>
		body{background: #ddd;}
		.aaa{width: 300px;height: 100px;margin: 0 auto;overflow: hidden;}
		.bbb{width: 300px;height: 100px;position: relative;left: 0;white-space: nowrap;animation: ddd 3s cubic-bezier(0.5,1,0.5,1) infinite normal;}
		.bbb:hover{animation-play-state:paused;}
		.bbb a{width: 100px;height: 100px;display: inline-block;line-height: 100px;text-align: center;color: #fff;font-size: 40px;}
		@keyframes ddd{0%{left:0;}33%{left:-100px;}66%{left:-200px;}100%{left:-300px;}}
		.bbb a:nth-child(1){background: #f00;}
		.bbb a:nth-child(2){background: #0f0;}
		.bbb a:nth-child(3){background: #00f;}
		.bbb a:nth-child(4){background: #f00;}
		.bbb a:nth-child(5){background: #0f0;}
		.bbb a:nth-child(6){background: #00f;}
	</style>
	<div class="aaa">
		<div class="bbb">
			<a>1</a><a>2</a><a>3</a><a>1</a><a>2</a><a>3</a>
		</div>
	</div>
</body>
</html>

手寫 JS 輪播效果算個啥，我見過要求純 CSS 實現輪播效果的

初級前端定義應該是熟練使用某種框架，了解基本的 JS 基礎的相關知識，瀏覽器提供的各種 API。就一個 JS 實現的輪播效果來看，這里面涉及到的 JS 基礎并不會太難，所以我認為這樣面試是完全合理的

在寫輪播組件的時候，如果能注意類的抽象，方法的封裝。能夠可復用，可擴展，就可以更好的展示自己的能力，offer 也分分鐘拿下

正常我工作3年半，你讓我沒準備直接寫也寫不出來

事實上是大部分面試官都是在面試你之前在網上搜兩道題，自己看懂了，再來面試你

甚至有的面試官只看到網上的一種解法，就默認你應該用他看到的那種解法，你要方法和他不一樣，一樣掛你

我有碰到過和我視頻share screen讓我debug css的面試官。。那個視頻軟件還可以給鼠標權限，但搞笑的是我的鼠標進不去他的developer tool...所以只能我口述，她debug。。最后按我的口述給她debug出來了，但是方法和她的不一樣我也是醉了。。

接著讓我share一個我覺得好的css solution, 我說我們用純css實現了responsive font size

大概就是 calc(38px +(60 - 38) * (100vw - 768px) / (1440 - 768)); 這樣做一般最多只用打三個斷點就可以覆蓋手機到桌面的所有情況下的responsive font size，并且使得字體自適應屏幕大小。

比起直接用vw，這樣做可以自己設定自己的比例尺，任意調節大小；比起em, rem這種殘疾方法，這樣不需要打無數個斷點。

那邊hmm, interesting... 也不知道她聽懂沒。。

、HTML基本信息

注釋：

DOCTYPE：就是告訴瀏覽器，我們要使用什么規范

head：網頁頭部標簽

title：網頁標題
meta：描述性標簽，描述網站的信息，用來做SEO

charset = "UTF-8"
name = "keyword" content = ""關鍵詞
name = "descrisption" content = ""描述

body：代表網頁主題

二、網頁基本標簽

標題標簽

<h1>一級標簽</h1>一直到6級標簽

段落標簽

<p>段落標簽</p>

換行標簽

<br/> /是閉合的意思，單標簽，閉不閉合都行

水平線標簽

<hr/>

字體樣式標簽

<strong>粗體</strong>
<em>斜體</em>

注釋

特殊字符

空格 ---->一個空格
大于號 >
小于號<
版權符號©

特殊符號就是 & xxx ;

三、圖像標簽

src 圖像地址必填
alt 圖像的代替文字(找不到圖片的時候顯示) 必填
title 鼠標懸停提示文字
width 圖像的寬度
height 圖像的高度

注意：../ 代表上一級目錄

四、鏈接標簽

文本鏈接

<a href="path" target="目標窗口位置">鏈接文本或圖像</a>

href 鏈接路徑，要跳轉帶那個位置必填
target鏈接在哪個窗口打開：常用值_self 當前窗口（默認的）、_blank 新窗口

圖像鏈接：就是嵌套圖片標簽

頁面間鏈接

從一個頁面鏈接到另一個頁面

錨鏈接

第一步需要一個標記使用name做標記
第二步跳轉到標記使用#標記
<a name="top" ></a>
<a href="#top"></a>
上面是頁面內的跳轉

<a name="down"></a>
<a href="第一個頁面的path#down"></a>
頁面間的跳轉

功能性鏈接

郵件鏈接：mailto： <a href="mailto:郵箱"></a>點擊后會打開郵箱
qq鏈接：在qq推廣工具里面的

五、行內元素和塊元素

塊元素

無論內容多少，該元素獨占一行
p、h1-h6

行內元素

內容撐開寬度、左右都是行內元素的可以排在一起
a、strong、em...

六、列表

什么是列表：就是一種展示方式

有序列表

<ol> <li></li> </ol>

無序列表

<ul> <li></li> </ul>

自定義列表

<dl>
    <dt></dt> 標題
    <dd></dd> 選項
    <dd></dd>
    <dd></dd>
</dl>

七、表格

為什么使用表格

簡單通用
結構穩定

基本結構

單元格
行
列
跨行
跨列

<table border="1px" 邊框>表格標簽
    <tr>
        <td></td>列標簽
        <td></td>
        <td></td>
    </tr>行標簽 這代表一行
</table>

跨列：使用colspan="夸的列數" <td colspan="4">

跨行：使用rowspan="夸的行數" <td rowspan="4">

八、視頻和音頻

視頻元素

video
<video src="path" controls autoplay></video>
src:資源路徑
controls控制條
autoplay自動播放

音頻元素

audio
<audio src="" controls autoplay></audio>

九、頁面結構分析

元素名	描述
header	標題頭部區域的內容(用于頁面或頁面中的一塊區域)
footer	標記腳部區域的內容（用于整個頁面或頁面的一塊區域）
section	web頁面中的一塊獨立區域
atricle	獨立的文章內容
aside	相關內容或應用(常用于側邊欄)
nav	導航類輔助內容

十、iframe內聯框架

src必填
width
heigth
name標記
name的使用
<iframe src="" name="hello" frameborder="0" width="1000px" heigth="800px"></iframe>

<a href="path" target="hello"></a>
點擊超連接后，會在內聯框架里顯示這個頁面

十一、表單

表單：form

<form method="post|get" action="result.hetml">
    <input />
</form>

method 規定如何發送表單數據常用psot、get
action 表示向何處發送表單數據，把表單的數據發送給那個地方

get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效

post方式提交：比較安全，可以傳輸大文件

表單元素格式

屬性	說明
type	指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默認為text
name	指定表單元素的名稱必填，用來后臺讀取
value	元素的初試值。type為radio時必須指定一個值
size	指定元素的初始寬度。當type為text時或者password時，表單元素的大小以字符為單位。對于其他類型，寬度以像素為單位
maxlength	type為txet或password時，輸入的最大字符數
cheaked	type為radio或cheackbox時，指定按鈕是否被選中

單選框

input type="radio"
value 單選框的值
name ：表示組，name一樣一次只能選一個，name不一樣可以選多個
checked默認選中的

多選框

input type="checkbox"
value = "sleep"
name = "hooby"
checked默認選中的
<input type="checkbox" name="sleep" value="slppe" checked/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
多選框的結果是以數組的形式返回的

按鈕

<input type="button" name="btn1" value="點擊" />普通按鈕
<input type="image" src ="點擊跳轉的path"/>圖片按鈕
<input type="submit"/>提交按鈕
<input type="reset"/>重置按鈕

下拉框

<select name="列表名稱">
    <option value="選項的值" select>中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
</select>
提交的格式就是列表名稱和value

selected 默認選擇

文本域

<textarea name="name" cols="列數" rows="行數">文本內容</textarea>

文件域

<input type="file" name="files"/>
<input type="button" value="提交"/>

郵件驗證

<input type="email" name="youjian">

URL

<input type="url" name="url">

數字驗證

<input type="number" name="num" max="100" min="0" step="10">

滑塊

<input type="range" max="100" min="0">

搜索

<input type="search" name="search">

十二、表單的應用

隱藏域 hidden

<input type="text" id="mark" hidden>

只讀 readonly

<input type="text" id="mark" readonly>

禁用 disabled

<input type="text" id="mark" disabled>

增強鼠標可用性

<label for="mark">點擊</label>
<input type="text" id="mark">

十三、表單初級驗證

為什么要進行表單驗證：緩解服務器壓力、保證數據安全

提示信息

placeholder="提示信息" 在輸入框上

非空判斷

required

正則表達式驗證

pattern
<input type="text" name="mail" pattern="正則表達式">

高級驗證使用js

人人都是產品經理【起點學院】，BAT實戰派產品總監手把手系統帶你學產品、學運營。

產品設計時細節是產品經理最頭疼的問題，一個button，一個鏈接都要考慮太多的細節問題。作者整理了常見的一些功能設計問題，一篇文章看懂這些功能設計。來學習吧。

定義

鏈接也稱為超鏈接，所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后，鏈接目標將顯示在瀏覽器上，并且根據目標的類型來打開或運行。

樣式

鏈接可以是一個字或是一段字這樣的文本，也可以是一個按鈕，一張圖片，當你點擊后跳轉到另一個目標，當你把鼠標指針移到某個鏈接時會變成一個小手，當然在手機上沒有這一特點。

1. 文本樣式的鏈接

文本樣式的鏈接一般在搜索引擎的網站呈現藍色字樣，大多會在下面加上下劃線以便識別，不過現如今考慮到不影響文本的可讀性與用戶體驗，逐漸取消了下劃線。而在一些別的網站考慮到界面設計風格各方面的因素而不用藍色。

谷歌的文本鏈接是藍色，沒有下劃線

百度的文本鏈接也是藍色，關鍵詞是紅色，有下劃線

而京東的文本鏈接有灰色，有白色，有黑色

2. 按鈕樣式的鏈接

按鈕樣式的鏈接比文本樣式的更容易識別，每一個按鈕都是一樣鏈接。

按鈕樣式鏈接

3. 圖片樣式的鏈接

圖片樣式的鏈接可以是單獨的一張圖片，也可以是文字與按鈕一起組成一張圖片，只是鼠標指針掃過圖片的任何一個部位都會變成小手。

如桌面彈出這種游戲小窗口的圖片式鏈接

由文字/圖/按鈕樣式一起構成的一張圖片式按鈕，鼠標可以點擊圖中任何一部位

打開方式

鏈接打開的方式有三種：第一種是在當前頁面刷新跳轉，國外的網站大多是這樣的打開式；第二種是在新標簽頁面打開鏈接，國內大多采用這種；第三種是提示用APP打開。當然現在出現了一種新的打開方式，那就是二維碼掃描。

提示用美拍APP打開

類型

按照連接路徑的不同，網頁中超鏈接一般分為以下3種類型：內部鏈接，錨點鏈接和外部鏈接。

鏈接還可以分為動態鏈接和靜態鏈接。動態超鏈接指的是可以通過改變HTML代碼來實現動態變化的鏈接，例如我們可以實現將鼠標移動到某個文字鏈接上，文字就會象動畫一樣動起來或改變顏色的效果，也可以實現鼠標移到圖片上圖片就產生反色或朦朧等等的效果。而靜態鏈接，顧名思義，就是沒有動態效果的鏈接。

1. 內部鏈接

與外部鏈接（即反向鏈接）相反，內部鏈接是指同一網站域名下的內容頁面之間互相鏈接。如頻道、欄目、終極內容頁之間的鏈接，乃至站內關鍵詞之間的Tag鏈接都可以歸類為內部鏈接，因此內部鏈接我們也可以稱之為站內鏈接，對內部鏈接的優化其實就是對網站的站內鏈接的優化。

2. 錨點鏈接

HTML中的鏈接，正確的說法應該稱作"錨點"，它命名錨點鏈接（也叫書簽鏈接）常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，不僅讓我們能指向文檔，還能指向頁面里的特定段落，更能當作"精準鏈接"的便利工具，讓鏈接對象接近焦點。便于瀏覽者查看網頁內容。類似于我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時，標記錨點是最佳的方法。

3. 外部鏈接

外部鏈接，又常被稱為：“反向鏈接”或“導入鏈接”，是指通過其他網站鏈接到你的網站的鏈接。

外部鏈接指的是針對搜索引擎，與其它站點所做的友情鏈接。高質量的外部鏈接指：和你的網站建立鏈接的網站知名度高，訪問量大，同時相對的外部鏈接較少，有助于快速提升你的網站知名度和排名的其他網站的友情鏈接。

如果按照使用對象的不同，網頁中的鏈接又可以分為：文本超鏈接，圖像超鏈接，E-mail鏈接，錨點鏈接，多媒體文件鏈接，空鏈接等。

鏈接是一種對象，它以特殊編碼的文本或圖形的形式來實現鏈接，如果單擊該鏈接，則相當于指示瀏覽器移至同一網頁內的某個位置，或打開一個新的網頁，或打開某一個新的WWW網站中的網頁。

鏈接狀態

鏈接在交互上一般會呈現4種狀態，即默認狀態/懸停時狀態/點擊時狀態/點擊后狀態。比如谷哥網站的交互體驗。如下圖：

點擊前

懸停時，下面浮現半透明線條

點擊時，有波紋暈開的動態效果

點擊后，下面線條粗

有時候是3種狀態，比如百度網和知乎應用：

默認狀態

點擊時鏈接變紅

點擊后鏈接變成紫色

IOS系統知乎應用的3種狀態，而在Android系統沒有用力點擊這一狀態。

默認狀態

點擊狀態

用力點擊會彈出預覽小窗口

有些時候只有2種狀態，如下圖谷歌網：

默認和點擊后狀態一樣

鼠標懸停時出現下劃線

默認狀態

點擊時

而有時候比如在APP里有時候就一直只有一種狀態，也可以稱靜態鏈接，之前的可以稱之為動態鏈接。在不同的使用場景會因為當時的情況選擇最合適的交互體驗設計。有的情況下還會加上點擊的音效，使用戶體驗更暢快，這在移動端用的使用情況多一些。

總之鏈接是網頁不可缺少的構成部分，每一個鏈接的呈現都是經過深思熟慮的。

作者：潘瑤瓊（簡書作者）

本文由 @潘瑤瓊授權發布于人人都是產品經理，未經作者許可，禁止轉載。

在線咨詢

上一篇：Serverless 實戰：如何為你的頭像增加點裝飾？
下一篇：利用Canvas壓縮圖片并完成Base64編碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一個初級前端，面試的時候要求手寫js輪播效果，寫不出來正常嗎

、HTML基本信息

二、網頁基本標簽

三、圖像標簽

四、鏈接標簽

五、行內元素和塊元素

六、列表

七、表格

八、視頻和音頻

九、頁面結構分析

十、iframe內聯框架

十一、表單

十二、表單的應用

十三、表單初級驗證

定義

樣式

1. 文本樣式的鏈接

2. 按鈕樣式的鏈接

3. 圖片樣式的鏈接

打開方式

類型

1. 內部鏈接

2. 錨點鏈接

3. 外部鏈接

鏈接狀態

您的項目需求