292020-3

CSS樣式不起作用？史上最全解決方法匯總

在我們寫頁(yè)面時(shí)，

瀏覽器緩存問(wèn)題

有時(shí)會(huì)發(fā)現(xiàn)自己寫的css樣式無(wú)法生效，導(dǎo)致這種現(xiàn)象的原因有很多，下面列舉一些常見的原因希望可以幫到你，歡迎評(píng)論區(qū)補(bǔ)充。

如果你反復(fù)檢查認(rèn)為代碼沒有問(wèn)題，那么可能是瀏覽器緩存的問(wèn)題。在排查前先試一下清除瀏覽器緩存，重啟瀏覽器或者換個(gè)瀏覽器等手段，無(wú)效后再進(jìn)行進(jìn)一步排查。有可能自己什么都沒有做錯(cuò)，就是因?yàn)榫彺婊蛘邽g覽器的問(wèn)題導(dǎo)致，重置一下也許問(wèn)題就解決了。
瀏覽器的‘F12’元素審核，看看哪些樣式?jīng)]有應(yīng)用上。

細(xì)節(jié)問(wèn)題

寫錯(cuò)屬性名致使無(wú)法與html匹配，或?qū)傩灾挡环弦?guī)范；

html標(biāo)簽沒寫完整，漏了“<”或者”>”等；

，；｛｝看看這些符號(hào)是不是不小心使用了中文或者全角符號(hào)；

<span>設(shè)CSS樣式不起作用:例如：要定義span居中，必須先讓span成塊級(jí)元素顯示，也就是說(shuō)，要先定義span的display:block;屬性，然后再給span添加邊距屬性margin:0px auto;

css樣式中間沒有加分號(hào)；

為什么css樣式里有時(shí)候使用分號(hào)隔開有時(shí)候是用空格呢？

對(duì)同一個(gè)屬性進(jìn)行設(shè)置時(shí)是用空格隔開，比如border:1px solid red; 對(duì)不同的屬性進(jìn)行設(shè)置時(shí)是用分號(hào)隔開，比如width:300px;height:300px;

樣式表關(guān)聯(lián)問(wèn)題

如果你的樣式完全不生效，首先確認(rèn)關(guān)聯(lián)了樣式表沒有，或者關(guān)聯(lián)的樣式位置、名字是否正確；

<link rel="stylesheet" type="text/css" href="mycss.css"/>

看看自定義的CSS樣式引入標(biāo)簽是否放在bootstrap框架樣式引用之后，確保不會(huì)被在加載頁(yè)面時(shí)被框架的樣式覆蓋。

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="mycss.csvs"/>

選擇器問(wèn)題

后代子代選擇等，涉及多個(gè)標(biāo)簽，類名、id等，子選擇器的順序、名字等寫錯(cuò)了，均可能導(dǎo)致出錯(cuò)；

html里的標(biāo)簽忘記寫類名、id了，而選擇器用了這些漏寫的類名、id等，樣式自然不會(huì)生效。

后代選擇器忘了寫空格；

看看是不是有多余的空格比如： div.box{} 這類選擇器會(huì)不會(huì)寫成了 div .box{}；

編碼格式問(wèn)題

把CSS、HTML網(wǎng)頁(yè)文件都統(tǒng)一保存為UTF-8格式；即在頭標(biāo)簽中添加<meta charset="UTF-8">

因?yàn)?一般網(wǎng)頁(yè)里采用UTF-8的編碼格式，而外部的CSS文件默認(rèn)的是ANSI的編碼格式，一般情況下是不會(huì)有問(wèn)題。然而當(dāng)CSS文件中包含中文注釋，就可能會(huì)出現(xiàn)問(wèn)題。

樣式層疊問(wèn)題

看看你的css優(yōu)先級(jí)是否出現(xiàn)問(wèn)題，優(yōu)先級(jí)高的會(huì)把低的覆蓋掉導(dǎo)致無(wú)法看到樣式；
本身設(shè)置了樣式，則從父級(jí)繼承來(lái)的樣式就不生效了；
css樣式優(yōu)先級(jí)排序：!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性(同優(yōu)先級(jí)時(shí)，后面的層疊前面的樣式)；

排查順序：

評(píng)論(0) 瀏覽(3048)

282020-3

HTML基礎(chǔ)知識(shí)

前端達(dá)人

HTML基礎(chǔ)知識(shí)

HTML的歷史：HTML，XHTML
HTML的全局屬性：全局標(biāo)準(zhǔn)屬性，全局事件屬性
HTML的元素：

標(biāo)記語(yǔ)言，是一種將文本以及與文本相關(guān)的其他信息結(jié)合起來(lái)，展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理細(xì)節(jié)的電腦文字編碼。
HTML，為超文本標(biāo)記語(yǔ)言。
XHTML是可擴(kuò)展超文本標(biāo)記語(yǔ)言，是一種更純潔，更嚴(yán)格，更規(guī)范的html代碼。
html文件由文件頭和文件體兩部分組成。
標(biāo)簽的分類：雙標(biāo)簽，單標(biāo)簽。

HTML的全局標(biāo)準(zhǔn)屬性
在HTML中，規(guī)定了8個(gè)全局標(biāo)準(zhǔn)屬性。

class用于定義元素的類名。
id用于指定元素的唯一id。
style用于指定元素的行內(nèi)樣式。
title用于指定元素的額外信息。
accesskey用于指定激活某個(gè)元素的快捷鍵。
支持accesskey屬性的元素有<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>。

tabindex用于指定元素在tab鍵下的次序。
支持tabindex屬性的元素有<a>,<area>,<button>,<input>,<object>,<select>,<textarea>

dir用于指定元素中內(nèi)容的文本方向。
dir的屬性值只有l(wèi)tr和rtl兩種，分別是left to right和right to left。

lang用于指定元素內(nèi)容的語(yǔ)言。
HTML的全局事件屬性
Window窗口事件
onload，在頁(yè)面加載結(jié)束后觸發(fā)。
onunload，在用戶從頁(yè)面離開時(shí)觸發(fā)，如單擊跳轉(zhuǎn)，頁(yè)面重載，關(guān)閉瀏覽器窗口等。
Form表單事件
onblur，當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)。
onchange，在元素的元素值被改變時(shí)觸發(fā)。
onfocus，在元素獲得焦點(diǎn)時(shí)觸發(fā)。
onreset，當(dāng)表單中的重載按鈕被點(diǎn)擊時(shí)觸發(fā)。
onselect，在元素中文本被選中后觸發(fā)。
onsubmit，在提交表單時(shí)觸發(fā)。
Keyboard鍵盤事件
onkeydown，在用戶按下按鍵時(shí)觸發(fā)。
onkeypress，在用戶按下按鍵后，按著按鍵時(shí)觸發(fā)。
該屬性不會(huì)對(duì)所有按鍵生效，不生效按鍵如：alt，ctrl，shift，esc。

onkeyup，當(dāng)用戶釋放按鍵時(shí)觸發(fā)。
Mouse鼠標(biāo)事件
onclick，當(dāng)在元素上單擊鼠標(biāo)時(shí)觸發(fā)。
onblclick，當(dāng)在元素上雙擊鼠標(biāo)時(shí)觸發(fā)。
onmousedown，當(dāng)在元素上按下鼠標(biāo)按鈕時(shí)觸發(fā)。
onmousemove，當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)。
onmouseout，當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā)。
onmouseover，當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)。
onmouseup，當(dāng)在元素上釋放鼠標(biāo)按鈕時(shí)觸發(fā)。
Media媒體事件
onabort，當(dāng)退出媒體播放器時(shí)觸發(fā)。
onwaiting，當(dāng)媒體已停止播放但打算繼續(xù)播放時(shí)觸發(fā)。
HTML元素

<!DOCTYPE>，聲明文檔類型。
<html>，HTML元素真正的根元素。
<head>，定義html文檔的文檔頭。

head中包含的元素

title，定義HTML文檔的標(biāo)題
base，為頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址或者默認(rèn)目標(biāo)
link，用于定義文檔與外部資源之間的關(guān)系
meta，提供關(guān)于HTML的元數(shù)據(jù)
style，用于為HTML文檔定義樣式信息
script，用于定義客戶端腳本

body，定義html文檔的文檔體。
content-Type，用于設(shè)定網(wǎng)頁(yè)的字符集，便于瀏覽器解析與渲染頁(yè)面。

cache-control，用于告訴瀏覽器如何緩存某個(gè)響應(yīng)及緩存多長(zhǎng)時(shí)間。

參數(shù)：

no-cache，發(fā)送請(qǐng)求，與服務(wù)器確認(rèn)該資源是否被更改，如果沒有，則使用緩存

no-store，允許緩存，每次都要去服務(wù)器上下載完整的響應(yīng)

public，緩存所有響應(yīng)

private，只為單個(gè)用戶緩存

max-age，表示當(dāng)前請(qǐng)求開始，相應(yīng)響應(yīng)在多久內(nèi)能被緩存和重用，不去服務(wù)器重新請(qǐng)求，max-age=60表示響應(yīng)可以再緩存和重用60秒

<meta http-equiv=cache-control" content="no-cache">

1

expires，用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間，過(guò)期后重新到服務(wù)器上重新傳輸。

refresh，網(wǎng)頁(yè)將在設(shè)定的時(shí)間內(nèi)，自動(dòng)刷新并轉(zhuǎn)向設(shè)定的網(wǎng)址

Set-Cookie，用于設(shè)置網(wǎng)頁(yè)過(guò)期。

無(wú)語(yǔ)義元素：<span>,<div>，<span>是內(nèi)聯(lián)標(biāo)簽，用在一行文本中，<div>是塊級(jí)標(biāo)簽。

div用于存放需要顯示的數(shù)據(jù)，css用于指定如何顯示數(shù)據(jù)樣式，做到結(jié)構(gòu)與樣式相互分離。

查看div+css樣式HTML:點(diǎn)擊下方鏈接跳轉(zhuǎn)，可查看源碼：

div-css.html

格式化元素

普通文本

<b>，定義粗體文本

<big>，定義大號(hào)字

<em>，定義著重文字

<i>，定義斜體字

<small>，定義小號(hào)字

<strong>，定義加重語(yǔ)氣

<sub>，定義下標(biāo)字

<sup>，定義上標(biāo)字

<ins>，定義插入字

<del>，定義刪除字

計(jì)算機(jī)輸出

<code>，定義計(jì)算機(jī)代碼

<kbd>，定義鍵盤輸出樣式

<samp>，定義計(jì)算機(jī)代碼樣本

<tt>，定義打字機(jī)輸入樣式

<pre>，定義預(yù)格式文本

術(shù)語(yǔ)

<abbr>，定義縮寫

<acronym>，定義首字母縮寫

<address>，定義地址

<bdo>，定義文字方向

<blockquote>定義長(zhǎng)的引用

<q>，定義短的引用語(yǔ)

<cite>，定義引用，引證

<dfn>，定義一個(gè)概念，項(xiàng)目

圖像熱區(qū)鏈接

圖像熱區(qū)鏈接，是什么呢？當(dāng)你在看一些購(gòu)物網(wǎng)頁(yè)的時(shí)候，一張圖片上，可以在不同的地方鏈接到不同的目標(biāo)位置，點(diǎn)擊不同的地方可以跳轉(zhuǎn)到不同的網(wǎng)頁(yè)，這也是做商城項(xiàng)目一般要用到的技術(shù)。

這個(gè)時(shí)候不是<a>標(biāo)簽元素了，而是<area>元素。

<area>元素的屬性有兩個(gè)shape，cords屬性。

<area>的坐標(biāo)系，原點(diǎn)為圖片的左上角,x軸正方向向右，y軸正方向向下

我畫個(gè)圖哈，反映<area>的坐標(biāo)系：

圖像熱區(qū)鏈接的使用，<map>標(biāo)簽定義一個(gè)image-map，可以含一個(gè)以上的熱區(qū)<area>，每個(gè)熱區(qū)都有獨(dú)立的鏈接。

要為<map>標(biāo)簽賦予name屬性。

將<img>標(biāo)簽的usemap屬性與<map>標(biāo)簽的name屬性相關(guān)聯(lián)。

為了證明我學(xué)會(huì)了，我寫一個(gè)html頁(yè)面。

map -> name="image_link"

img -> usemap="#image_link"
1
點(diǎn)擊跳轉(zhuǎn)：imgmap.html

e-mail鏈接
e-mail鏈接主要是看到有很多官方網(wǎng)頁(yè)需要做的一個(gè)打開一封新的電子郵件。

點(diǎn)擊下方鏈接即可看到效果：

聯(lián)系我們

代碼：

<a href="mailto:xxxxxx@qq.com">聯(lián)系我們</a>

列表元素
整合列表html網(wǎng)頁(yè)，點(diǎn)擊跳轉(zhuǎn)：ul-ol.html

無(wú)序列表，<ul>定義無(wú)序列表，<li>定義列表項(xiàng)。
<ul>的type屬性值：disc點(diǎn)，square方塊，circle圓，none無(wú).

有序列表，<ol>定義有序列表，<li>定義列表項(xiàng)。
<ol>的type屬性值：數(shù)字，大寫字母，大寫羅馬數(shù)字，小寫字母，小寫羅馬數(shù)字。

start屬性定義序號(hào)的開始位置。

定義列表<dl>，定義列表內(nèi)部可以有多個(gè)列表項(xiàng)標(biāo)題，每個(gè)列表項(xiàng)標(biāo)題用<dt>標(biāo)簽定義，列表項(xiàng)標(biāo)題內(nèi)部又可以有多個(gè)列表項(xiàng)描述，用<dd>標(biāo)簽定義。
表格
整合表格html網(wǎng)頁(yè)，點(diǎn)擊跳轉(zhuǎn)：table.html

<table>定義表格
<caption>定義表格標(biāo)題
<tr>定義若干行
<td>定義若干單元格
<th>定義表頭
表格分頭部，主體，底部：<thead>,<tbody>,<tfoot>三個(gè)標(biāo)簽。

<td>的兩個(gè)屬性：colspan用于定義單元格跨行，rowspan用于定義單元格跨列
<tbody>,<thead>,<tfoot>標(biāo)簽通常用于對(duì)表格內(nèi)容進(jìn)行分組。
表單由<form>標(biāo)簽定義，action屬性定義了表單提交的地址，method屬性定義表單提交的方式。

<input type="text">

<input type="password">

<input type="radio">

<input type="checkbox">

<input type="submit">

<input type="reset">

<input type="button">

<input type="image">

<input type="file">

<input type="hidden">

<textarea>元素

<textarea>標(biāo)簽具有name,cols,rows3個(gè)屬性。

name用于提交參數(shù)
value用于輸入文本內(nèi)容
cols和rows分別用于文本框的列數(shù)和行數(shù)，寬度和高度。

效果：

自我評(píng)價(jià)：

代碼：

<form action="web" method="post">
 自我評(píng)價(jià)：<br/>
 <textarea rows="10" cols="50" name="introduce">
 </textarea>
 <br/>
 <input type="submit" id="" name="">
</form>

frameset

<frameset>定義一個(gè)框架集，用于組織多個(gè)窗口，每個(gè)框架存有獨(dú)立的html文檔
<frameset>不能與<body>共同使用，除非有<noframe>元素
<frame>用于定義<frameset>中一個(gè)特定的窗口。空元素<frame/>

：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>frameset</title>
    </head>
    <frameset cols="25%,50%,25%">
        <frame src="https://blog.csdn.net/qq_36232611" scrolling="no" noresize="noresize"></frame>
        <frame src="https://juejin.im/user/5e477d7ce51d4526c550a27d" ></frame>
        <frame src="https://www.jianshu.com/u/c785ece603d1" ></frame>
    </frameset>
    <noframes>
        <body>您的瀏覽器無(wú)法處理框架，請(qǐng)更換瀏覽器打開</body>
    </noframes>
</html>
1

顯示結(jié)果描述實(shí)體名稱實(shí)體編號(hào)
空格    
< 小于號(hào) < <
> 大于號(hào) > >
& 和號(hào) & &
" 引號(hào) " "
' 撇號(hào) ' (IE不支持) '
￠分（cent） ¢ ¢
￡鎊（pound） £ £
￥元（yen） ¥ ¥
€ 歐元（euro） € €
§ 小節(jié) § §
© 版權(quán)（copyright） © ©
® 注冊(cè)商標(biāo) ® ®
? 商標(biāo) ™ ™
× 乘號(hào) × ×
÷ 除號(hào) ÷ ÷
————————————————
版權(quán)聲明：本文為CSDN博主「達(dá)達(dá)前端」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_36232611/article/details/105109467

評(píng)論(0) 瀏覽(2616)

252020-3

視覺設(shè)計(jì)師與用戶體驗(yàn)地圖

前端達(dá)人

用戶體驗(yàn)地圖（Customer Journey Map）是什么？

用戶體驗(yàn)地圖是從用戶的視角出發(fā)，去理解用戶、產(chǎn)品或者服務(wù)交互的一個(gè)重要的設(shè)計(jì)工具。

也可以說(shuō)是以可視化的形式，來(lái)表現(xiàn)一個(gè)用戶使用產(chǎn)品或者接受服務(wù)的體驗(yàn)情況，從體驗(yàn)的過(guò)程中來(lái)發(fā)現(xiàn)用戶在整個(gè)體驗(yàn)過(guò)程中的問(wèn)題點(diǎn)與情緒點(diǎn)，以此來(lái)從中提取出產(chǎn)品的優(yōu)化點(diǎn)，方便對(duì)產(chǎn)品進(jìn)行迭代，從而保證良好的用戶體驗(yàn)。

經(jīng)典案例

Chris Risdon繪制的歐洲鐵路購(gòu)票的體驗(yàn)地圖

上圖中是歐洲鐵路公司整個(gè)體驗(yàn)地圖的一部分。歐洲鐵路公司是一家美國(guó)經(jīng)銷商，為北美旅客提供一個(gè)獨(dú)立預(yù)訂火車票去歐洲各地的平臺(tái)，而無(wú)需用戶去網(wǎng)站預(yù)定。他們已經(jīng)擁有了一個(gè)良好體驗(yàn)的網(wǎng)站和一個(gè)屢獲殊榮的咨詢中心，但他們希望通過(guò)所有接觸點(diǎn)來(lái)優(yōu)化用戶使用過(guò)程，這樣可以讓他們更全面地了解，他們應(yīng)該專注的投資，設(shè)計(jì)和技術(shù)資源。整體的“診斷”評(píng)價(jià)系統(tǒng)，包含一系列的重點(diǎn)舉措，體驗(yàn)地圖只是其中派生的一部分。體驗(yàn)地圖幫助建立同理心圖，來(lái)理解隨著時(shí)間和空間的推移，用戶與歐洲鐵路公司服務(wù)系統(tǒng)交互時(shí)接觸點(diǎn)的變化。

在這張?bào)w驗(yàn)地圖中采用了五個(gè)關(guān)鍵組成一個(gè)體驗(yàn)地圖，一個(gè)體驗(yàn)地圖可以直觀的表示用戶操作流、期望、特定的目標(biāo)、用戶情緒狀態(tài)和整體的體驗(yàn)點(diǎn)，做到整體把控和評(píng)估產(chǎn)品體驗(yàn)。

作用：

用戶體驗(yàn)地圖能幫助我們創(chuàng)造出一個(gè)有大局觀的用戶體驗(yàn)，更好的幫助我們理解用戶的痛點(diǎn)和需求，幫助Team達(dá)成共識(shí)，非常有利于跨團(tuán)隊(duì)合作。

用戶體驗(yàn)地圖包含的內(nèi)容：

其中包括，人群（產(chǎn)品的用戶是哪一類人）、用戶的需求（用戶想得到什么）、路徑（在某特定的場(chǎng)景下體驗(yàn)的整體過(guò)程）、接觸點(diǎn) （產(chǎn)品與人或人與服務(wù)接觸的關(guān)鍵點(diǎn)）、行為（用戶的行為是什么樣的？）、情緒（體驗(yàn)過(guò)程中的感受心情）、機(jī)會(huì)點(diǎn) （過(guò)程中可以突破的點(diǎn)，可以成為特色的地方）、解決方案（解決用戶在體驗(yàn)過(guò)程的痛點(diǎn)）、問(wèn)題（解決用戶在體驗(yàn)過(guò)程的痛點(diǎn)）。

用戶畫像：

在準(zhǔn)備開始繪制用戶體驗(yàn)地圖的時(shí)候，我們應(yīng)該要確立用戶群體 / 確定產(chǎn)品目標(biāo) / 了解用戶目標(biāo)，并作出用戶畫像。

視覺設(shè)計(jì)師怎么使用

舉例（一）：

那我們看看作為一名視覺設(shè)計(jì)師應(yīng)該關(guān)注哪部分的流程。

視覺設(shè)計(jì)師的用戶體驗(yàn)地圖：

我們的聚焦點(diǎn)應(yīng)在上圖的這幾個(gè)部分。

所以當(dāng)繪制完用戶體驗(yàn)地圖后，應(yīng)該再繪制一份視覺設(shè)計(jì)師看的版本，我們?cè)O(shè)計(jì)師主要關(guān)注的視覺的觸點(diǎn)。

定量方法（產(chǎn)品方向）：

我們?cè)谛袨楹颓榫w上一般會(huì)使用問(wèn)卷法、后臺(tái)數(shù)據(jù)分析法；而在需求和問(wèn)題上一般會(huì)使用焦點(diǎn)小組、訪談法、觀察法、日志法和田野調(diào)查，下面就為大家來(lái)解釋下這些方法。

焦點(diǎn)小組：是指從研究產(chǎn)品中所確定的全部用戶群(總體)中抽取一定數(shù)量的用戶來(lái)組成樣本,根據(jù)樣本信息推斷用戶群總體特征的一種調(diào)查方法。

訪談法：訪談，就是以口頭形式向用戶進(jìn)行詢問(wèn)，根據(jù)被詢用戶的答復(fù)搜集客觀的、不帶偏見的事實(shí)信息，以準(zhǔn)確地說(shuō)明樣本所要代表的總體的一種方式。

觀察法：觀察法是指研究者根據(jù)一定的研究目的、研究提綱或觀察表，用自己的感官和輔助工具去直接觀察用戶，從而獲得資料的一種方法。

日志法：是由用研人員按時(shí)間順序，詳細(xì)記錄自己在一段時(shí)間內(nèi)使用產(chǎn)品的過(guò)程，經(jīng)過(guò)歸納、分析，達(dá)到分析產(chǎn)品目的的一種工作分析方法。

田野調(diào)查：在日常生活中，在一個(gè)有一個(gè)嚴(yán)格定義的空間和時(shí)間的范圍內(nèi)，體驗(yàn)特定用戶群的日常生活與思想境界，通過(guò)記錄自己的生活的方方面面，來(lái)展示不同階段用戶群的基本需求。

注意事項(xiàng)（5要點(diǎn)）

1. 在制作地圖前，應(yīng)理清楚產(chǎn)品的前期規(guī)劃和需求，并且與同事達(dá)成共識(shí)。

2. 避免以自己的經(jīng)驗(yàn)或者認(rèn)知來(lái)確定用戶體驗(yàn)地圖中的接觸點(diǎn)，應(yīng)當(dāng)真正的從用戶的行為中去提取。

3. 不要將一些落后的信息加入到用戶體驗(yàn)地圖中。

4. 最好先在Team內(nèi)部腦暴一份地圖，再去與所制作的地圖進(jìn)行對(duì)比。

5. 用戶體驗(yàn)地圖不會(huì)涉及到實(shí)現(xiàn)方案和現(xiàn)實(shí)機(jī)制，只涉及用戶的體驗(yàn)。

團(tuán)隊(duì)人員的合理搭配：

將公司或者團(tuán)隊(duì)的PM、RD、運(yùn)營(yíng)、Leader等過(guò)來(lái)，詳細(xì)的描述這一份用戶體驗(yàn)地圖，聆聽他們的反饋。

在分析用戶問(wèn)題上：

分為四個(gè)等級(jí)：ABCD，在對(duì)優(yōu)先級(jí)進(jìn)行排列的同時(shí)應(yīng)該，考慮到產(chǎn)品在每個(gè)階段的側(cè)重點(diǎn)，根據(jù)不同的進(jìn)度和情況，來(lái)對(duì)優(yōu)先級(jí)進(jìn)行排列，幫助我們整理問(wèn)題和提煉最核心的一些體驗(yàn)問(wèn)題，區(qū)分問(wèn)題還能幫助我們更好的把握產(chǎn)品的優(yōu)化方向。

視覺設(shè)計(jì)師應(yīng)該關(guān)注的點(diǎn) ：

視覺設(shè)計(jì)師的任務(wù)是什么？是有效的傳達(dá)出產(chǎn)品的信息、簡(jiǎn)潔并且優(yōu)雅的傳達(dá)、通過(guò)視覺設(shè)計(jì)制造出愉悅的用戶體驗(yàn)。用戶在很多的場(chǎng)景下都可能接觸到企業(yè)的產(chǎn)品或者是服務(wù)，這個(gè)服務(wù)接觸帶給用戶的感受更多是偏向于視覺感知方面的。所以我們需要盡可能的列舉出企業(yè)的產(chǎn)品或者服務(wù)與用戶可能產(chǎn)生接觸的場(chǎng)景、服務(wù)觸點(diǎn)，再根據(jù)服務(wù)觸點(diǎn)延伸出相關(guān)的“視覺觸點(diǎn)”，用來(lái)梳理出我們需要輸出的視覺產(chǎn)物，做出相對(duì)應(yīng)的查漏補(bǔ)缺和優(yōu)化，輸出指導(dǎo)企業(yè)的品牌建設(shè)工作。而用戶體驗(yàn)地圖就很適合作為這樣的工具。

“體驗(yàn)地圖”對(duì)于優(yōu)化視覺體驗(yàn)的意義：

整體性：系統(tǒng)性地規(guī)劃品牌的視覺統(tǒng)一化工作，提升品牌建設(shè)工作的全面性和完整度。也可以避免未來(lái)工作中不同的品牌 / UI / 運(yùn)營(yíng)設(shè)計(jì)師對(duì)于品牌概念的理解不同而帶來(lái)的設(shè)計(jì)出入。

品牌設(shè)計(jì)，是用戶對(duì)于公司產(chǎn)品的直接印象，所以在品牌設(shè)計(jì)的要求就是：建立特征、保持特征、推廣特征、美化特征、對(duì)于以上的要求，來(lái)提供完整且匹配的設(shè)計(jì)方案。

運(yùn)營(yíng)設(shè)計(jì)，運(yùn)營(yíng)設(shè)計(jì)的目標(biāo)就是讓用戶盡可能的感知到產(chǎn)品的好，把產(chǎn)品的特點(diǎn)通過(guò)設(shè)計(jì)包裝傳遞給用戶，一個(gè)好的運(yùn)營(yíng)設(shè)計(jì)，應(yīng)該是在用戶看到你的設(shè)計(jì)作品后，會(huì)產(chǎn)生足夠好的興趣和好感，并愿意去關(guān)注你的產(chǎn)品。

UI設(shè)計(jì)，這是產(chǎn)品與用戶接觸過(guò)程中，頻率最高、最直觀的部分，目的是為了讓用戶認(rèn)識(shí)到產(chǎn)品的相貌和氣質(zhì)，UI設(shè)計(jì)需要注意界面視覺層次的強(qiáng)弱、信息劃分、用戶的視線軌跡、色彩的表達(dá)、質(zhì)感、舒適度等，來(lái)讓用戶覺得這個(gè)產(chǎn)品設(shè)計(jì)真好。

例如：

OFO，以年輕人為主的共享騎行產(chǎn)品，無(wú)論是在品牌/運(yùn)營(yíng)/UI的設(shè)計(jì)上，都能讓人感覺時(shí)尚、年輕、陽(yáng)光、且有親和力。

品牌設(shè)計(jì) :

UI設(shè)計(jì) :

運(yùn)營(yíng)設(shè)計(jì) ：

UI設(shè)計(jì) ：

運(yùn)營(yíng)設(shè)計(jì) ：

設(shè)計(jì)師的進(jìn)階：

在一開始的初級(jí)設(shè)計(jì)師階段（也就是1.0階段），我們需要從交互設(shè)計(jì)師手中接過(guò)交互設(shè)計(jì)稿，來(lái)對(duì)它進(jìn)行氣質(zhì)進(jìn)行改造，做出獨(dú)特的視覺設(shè)計(jì)，也就是將其翻譯為高保真稿，然后再與開發(fā)同學(xué)進(jìn)行對(duì)接，也要保持視覺走查，以防實(shí)際效果與預(yù)期效果的不符；在這個(gè)1.0階段我們的表現(xiàn)力和創(chuàng)造力，是最為主要的，如何去做出差異化？這是這個(gè)階段的設(shè)計(jì)師需要考慮的，在這個(gè)APP設(shè)計(jì)趨同的大浪潮下，你如果能夠做出不一樣的設(shè)計(jì)，那么你則可以一鳴驚人，從眾多水平相當(dāng)?shù)脑O(shè)計(jì)師中脫穎而出，這時(shí)你便可以考慮進(jìn)入下一個(gè)階段，也就是2.0。

在高級(jí)設(shè)計(jì)階段（即2.0階段），這時(shí)候你就需要擁有更好的產(chǎn)品思維和邏輯能力，不僅僅只是從交互設(shè)計(jì)師拿到交互設(shè)計(jì)稿，直接上手開做，在這之前，你需要開始了解產(chǎn)品的業(yè)務(wù)定位、用戶人群、產(chǎn)品目標(biāo)、當(dāng)前的問(wèn)題、未來(lái)的迭代等，需求方這時(shí)候就成你的主要對(duì)接對(duì)象，需要你具備拆解需求、采集用戶的需求、擴(kuò)展業(yè)務(wù)、能進(jìn)行設(shè)計(jì)驗(yàn)證的能力，能將產(chǎn)品的氣質(zhì)和品牌貫穿于整個(gè)產(chǎn)品(UI/運(yùn)營(yíng)/品牌)，設(shè)計(jì)是怎么推導(dǎo)的，現(xiàn)在就不是僅僅只在停留在好看的層面上了，畢竟設(shè)計(jì)師不是畫師，而是解決問(wèn)題的，我們?cè)谧隽四硞€(gè)設(shè)計(jì)后，就要去關(guān)注它的變化了，看看用戶的反饋、商業(yè)轉(zhuǎn)化率等等，這都是為你的下一次設(shè)計(jì)迭代做的參考。

從

站酷

分享到脈脈

轉(zhuǎn)自：脈脈

原文鏈接：https://maimai.cn/article/detail?fid=988630001&efid=N-uHKNnf7vXGBmaFd3lZHA&use_rn=1

評(píng)論(0) 瀏覽(2583)

242020-3

vue實(shí)現(xiàn)移動(dòng)端懸浮窗效果

前端達(dá)人

本文講述，在使用VUE的移動(dòng)端實(shí)現(xiàn)類似于iPhone的懸浮窗的效果。

相關(guān)知識(shí)點(diǎn)

touchstart 當(dāng)在屏幕上按下手指時(shí)觸發(fā)

touchmove 當(dāng)在屏幕上移動(dòng)手指時(shí)觸發(fā)

touchend 當(dāng)在屏幕上抬起手指時(shí)觸發(fā)
mousedown mousemove mouseup對(duì)應(yīng)的是PC端的事件

touchcancel 當(dāng)一些更高級(jí)別的事件發(fā)生的時(shí)候（如電話接入或者彈出信息）會(huì)取消當(dāng)前的touch操作，即觸發(fā)touchcancel。一般會(huì)在touchcancel時(shí)暫停游戲、存檔等操作。

效果圖

實(shí)現(xiàn)步驟

1.html

總結(jié)了一下評(píng)論，好像發(fā)現(xiàn)大家都碰到了滑動(dòng)的問(wèn)題。就在這里提醒一下吧?？蓪⒃搼腋?DIV 同你的 scroller web 同級(jí)。 —- (log: 2018-08-21)

html結(jié)構(gòu)： <template> <div>你的web頁(yè)面</div> <div>懸浮DIV</div> </template>

<template>
 <div id="webId">
 ...
 <div>你的web頁(yè)面</div>
 <!-- 如果碰到滑動(dòng)問(wèn)題，1.1 請(qǐng)檢查這里是否屬于同一點(diǎn)。 -->
 <!-- 懸浮的HTML -->
 <div v-if="!isShow" class="xuanfu" id="moveDiv"
  @mousedown="down" @touchstart="down"
  @mousemove="move" @touchmove="move"
  @mouseup="end" @touchend="end"
 >
  <div class="yuanqiu">
  {{pageInfo.totalPage}}
  </div>
 </div>
 ...
 </div>
</template>

2.JS

<script>
data() {
 return {
 flags: false,
 position: { x: 0, y: 0 },
 nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
 }
}

methods: {
 // 實(shí)現(xiàn)移動(dòng)端拖拽
 down(){
 this.flags = true;
 var touch;
 if(event.touches){
  touch = event.touches[0];
 }else {
  touch = event;
 }
 this.position.x = touch.clientX;
 this.position.y = touch.clientY;
 this.dx = moveDiv.offsetLeft;
 this.dy = moveDiv.offsetTop;
 },
 move(){
 if(this.flags){
  var touch ;
  if(event.touches){
   touch = event.touches[0];
  }else {
   touch = event;
  }
  this.nx = touch.clientX - this.position.x;
  this.ny = touch.clientY - this.position.y;
  this.xPum = this.dx+this.nx;
  this.yPum = this.dy+this.ny;
  moveDiv.style.left = this.xPum+"px";
  moveDiv.style.top = this.yPum +"px";
  //阻止頁(yè)面的滑動(dòng)默認(rèn)事件；如果碰到滑動(dòng)問(wèn)題，1.2 請(qǐng)注意是否獲取到 touchmove
  document.addEventListener("touchmove",function(){
   event.preventDefault();
  },false);
 }
 },
//鼠標(biāo)釋放時(shí)候的函數(shù)
 end(){
 this.flags = false;
 },
}
</script>

3.CSS

<style>
 .xuanfu {
 height: 4.5rem;
 width: 4.5rem;
 /* 如果碰到滑動(dòng)問(wèn)題，1.3 請(qǐng)檢查 z-index。z-index需比web大一級(jí)*/
 z-index: 999;
 position: fixed;
 top: 4.2rem;
 right: 3.2rem;
 border-radius: 0.8rem;
 background-color: rgba(0, 0, 0, 0.55);
 }
 .yuanqiu {
 height: 2.7rem;
 width: 2.7rem;
 border: 0.3rem solid rgba(140, 136, 136, 0.5);
 margin: 0.65rem auto;
 color: #000000;
 font-size: 1.6rem;
 line-height: 2.7rem;
 text-align: center;
 border-radius: 100%;
 background-color: #ffffff;
 }
</style>

實(shí)現(xiàn)好JS邏輯，基本上，問(wèn)題不大。

本文鏈接 http://www.luyixian.cn/javascript_show_166242.aspx

再加一點(diǎn)

css之display:inline-block布局

1.解釋一下display的幾個(gè)常用的屬性值，inline ， block， inline-block

inline（行內(nèi)元素）:
1. 使元素變成行內(nèi)元素，擁有行內(nèi)元素的特性，即可以與其他行內(nèi)元素共享一行，不會(huì)獨(dú)占一行.
2. 不能更改元素的height，width的值，大小由內(nèi)容撐開.
3. 可以使用padding上下左右都有效，margin只有l(wèi)eft和right產(chǎn)生邊距效果，但是top和bottom就不行.
block（塊級(jí)元素）:
1. 使元素變成塊級(jí)元素，獨(dú)占一行，在不設(shè)置自己的寬度的情況下，塊級(jí)元素會(huì)默認(rèn)填滿父級(jí)元素的寬度.
2. 能夠改變?cè)氐膆eight，width的值.
3. 可以設(shè)置padding，margin的各個(gè)屬性值，top，left，bottom，right都能夠產(chǎn)生邊距效果.
inline-block（融合行內(nèi)于塊級(jí)）:
1. 結(jié)合了inline與block的一些特點(diǎn)，結(jié)合了上述inline的第1個(gè)特點(diǎn)和block的第2,3個(gè)特點(diǎn).
2. 用通俗的話講，就是不獨(dú)占一行的塊級(jí)元素。如圖:

圖一:

圖二：

兩個(gè)圖可以看出，display：inline-block后塊級(jí)元素能夠在同一行顯示，有人這說(shuō)不就像浮動(dòng)一樣嗎。沒錯(cuò)，display：inline-block的效果幾乎和浮動(dòng)一樣，但也有不同，接下來(lái)講一下inline-block和浮動(dòng)的比較。

2.inline-block布局 vs 浮動(dòng)布局

a.不同之處：對(duì)元素設(shè)置display：inline-block ，元素不會(huì)脫離文本流，而float就會(huì)使得元素脫離文本流，且還有父元素高度坍塌的效果

b.相同之處：能在某程度上達(dá)到一樣的效果

我們先來(lái)看看這兩種布局：
圖一：display：inline-block

圖二：

對(duì)兩個(gè)孩子使用float：left，我在上一篇浮動(dòng)布局講過(guò)，這是父元素會(huì)高度坍塌，所以要閉合浮動(dòng)，對(duì)box使用overflow：hidden，效果如下：

>>乍一看兩個(gè)都能做到幾乎相同的效果，（仔細(xì)看看display：inline-block中有間隙問(wèn)題，這個(gè)留到下面再講）

c.浮動(dòng)布局不太好的地方：參差不齊的現(xiàn)象，我們看一個(gè)效果：
圖三：

圖四：

>>從圖3,4可以看出浮動(dòng)的局限性在于，若要元素排滿一行，換行后還要整齊排列，就要子元素的高度一致才行，不然就會(huì)出現(xiàn)圖三的效果，而inline-block就不會(huì)。

3.inline-block存在的小問(wèn)題：

a.上面可以看到用了display:inline-block后，存在間隙問(wèn)題，間隙為4像素，這個(gè)問(wèn)題產(chǎn)生的原因是換行引起的，因?yàn)槲覀儗憳?biāo)簽時(shí)通常會(huì)在標(biāo)簽結(jié)束符后順手打個(gè)回車，而回車會(huì)產(chǎn)生回車符，回車符相當(dāng)于空白符，通常情況下，多個(gè)連續(xù)的空白符會(huì)合并成一個(gè)空白符，而產(chǎn)生“空白間隙”的真正原因就是這個(gè)讓我們并不怎么注意的空白符。

b.去除空隙的方法：
1.對(duì)父元素添加，{font-size:0}，即將字體大小設(shè)為0，那么那個(gè)空白符也變成0px，從而消除空隙
現(xiàn)在這種方法已經(jīng)可以兼容各種瀏覽器，以前chrome瀏覽器是不兼容的
圖一：

c.瀏覽器兼容性：ie6/7是不兼容 display：inline-block的所以要額外處理一下：
在ie6/7下：
對(duì)于行內(nèi)元素直接使用{dislplay:inline-block;}
對(duì)于塊級(jí)元素：需添加{display:inline;zoom:1;}

4.總結(jié):

display：inline-block的布局方式和浮動(dòng)的布局方式，究竟使用哪個(gè)，我覺得應(yīng)該根據(jù)實(shí)際情況來(lái)決定的：
a.對(duì)于橫向排列東西來(lái)說(shuō)，我更傾向與使用inline-block來(lái)布局，因?yàn)檫@樣清晰，也不用再像浮動(dòng)那樣清除浮動(dòng)，害怕布局混亂等等。
b.對(duì)于浮動(dòng)布局就用于需要文字環(huán)繞的時(shí)候，畢竟這才是浮動(dòng)真正的用武之地，水平排列的是就交給inline-block了。

評(píng)論(0) 瀏覽(5235)

232020-3

教你用面向?qū)ο缶幊虒懸粋€(gè)煙花爆炸的

前端達(dá)人

想要學(xué)會(huì)這個(gè)漂亮的煙花嗎？快來(lái)跟著學(xué)習(xí)吧~

結(jié)構(gòu)

<div class="container"></div>

我們只需要一個(gè)盒子表示煙花爆炸范圍就可以了

樣式

fire是煙花注意添加絕對(duì)定位

 <style>
    .container{
        margin: 0 auto;
        height: 500px;
        width: 1200px;
        background: black;
        position: relative;
        overflow: hidden;
    }
    .fire{
        width: 10px;
        background: white;
        height: 10px;
        /* border-radius: 50%; */
        position: absolute;
        bottom: 0;
    }
    </style>

行為

編寫構(gòu)造函數(shù)Firework

需要用到一個(gè)鼠標(biāo)點(diǎn)擊的位置，一個(gè)div選擇器，一個(gè)爆炸樣式

 function Firework(x,y,selector,type){
        //此處獲取對(duì)象的方式為單例的思想，避免重復(fù)獲取相同的元素
        if(Firework.box && selector === Firework.box.selector){
            this.box =  Firework.box.ele;
        }else{
            Firework.box = {
                ele:document.querySelector(selector),
                selector:selector
            }
            this.box = Firework.box.ele;
        }
        this.type = type;
        this.init(x,y)
    }

封裝一個(gè)運(yùn)動(dòng)的方法

function animation(ele,attroptions,callback){
    for(var attr in attroptions){
        attroptions[attr] ={
            target:attroptions[attr],
            inow:parseInt(getComputedStyle(ele)[attr])
        } 
    }
    clearInterval(ele.timer);
    ele.timer = setInterval(function(){
        for(var attr in attroptions ){
            var item = attroptions[attr]
            var target = item.target;
            var inow = item.inow;
            var speed = (target - inow)/10;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            if(Math.abs(target - inow) <= Math.abs(speed)){
                ele.style[attr] = target+"px";
                delete attroptions[attr];
                for(var num  in attroptions){
                    return false;
                }
                clearTimeout(ele.timer);
                if(typeof callback === "function")callback();
            }else{
                attroptions[attr].inow += speed;
                ele.style[attr]  = attroptions[attr].inow+"px";
            }
        }
    },30)
}

編寫原型方法

Firework.prototype = {
        constructor:Firework,
        //初始化
        init:function(x,y){
            //創(chuàng)建一個(gè)煙花
            this.ele = this.createFirework();
            //xy為鼠標(biāo)落點(diǎn)
            this.x = x ;
            this.y = y;
            //maxXy為最大運(yùn)動(dòng)范圍
            this.maxX = this.box.offsetWidth - this.ele.offsetWidth;
            this.maxY = this.box.offsetHeight - this.ele.offsetHeight;
            //初始化結(jié)束后  煙花隨機(jī)顏色
            this.randomColor(this.ele);
            //煙花升空
            this.fireworkUp(this.ele);
        },
        //創(chuàng)造煙花
        createFirework:function(){
            var ele = document.createElement("div");
            ele.className = "fire";
            this.box.appendChild(ele);
            return ele;
        },
        //煙花升空
        fireworkUp:function(ele){
            ele.style.left = this.x + "px";
            //此處用到剛剛封裝的運(yùn)動(dòng)方法
            animation(ele,{top:this.y},function(){
                ele.remove();
                this.fireworkBlast()
            }.bind(this));
        },
        //煙花爆炸
        fireworkBlast:function(){
            for(var i = 0 ; i < 20; i++){
                var ele = document.createElement("div");
                ele.className = "fire";
                ele.style.left = this.x + "px";
                ele.style.top = this.y + "px";
                this.box.appendChild(ele);
                ele.style.borderRadius = "50%";
                this.randomColor(ele);
                //判定一下輸入的爆炸方式是原型煙花 還是散落煙花 由此更改獲取的煙花位置
                animation(ele,this.type === "circle"?this.circleBlast(i,20): this.randomPosition(),function(cale){
                    cale.remove();
                }.bind(this,ele))
            }
        },
        //圓形爆炸位置
        circleBlast:function(i,total){
            var r = 200;
            var reg = 360 / total *i;
            var deg = Math.PI / 180 *reg;
            return {
                left:r * Math.cos(deg) + this.x ,
                top:r * Math.sin(deg) + this.y 
            }
        },
        //隨機(jī)顏色
        randomPosition:function(){
            return {
                left : Math.random()*this.maxX,
                top : Math.random()*this.maxY
            }
        },
        randomColor:function(ele){
            var color =  "#" + parseInt(parseInt("ffffff",16)*Math.random()).toString(16).padStart(6,0);
            return ele.style.backgroundColor = color;
        }
    }

綁定事件

document.querySelector(".container").addEventListener("click",function(evt){
    var e = evt||event;
    new Firework(e.offsetX,e.offsetY,".container","circle")
    new Firework(e.offsetX,e.offsetY,".container")
})


    全部代碼


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .container{
        margin: 0 auto;
        height: 500px;
        width: 1200px;
        background: black;
        position: relative;
        overflow: hidden;
    }
    .fire{
        width: 10px;
        background: white;
        height: 10px;
        /* border-radius: 50%; */
        position: absolute;
        bottom: 0;
    }
    </style>
</head>
<body>
    <div class="container"></div>
    <script src="./utils.js"></script>
    <script>

    function animation(ele,attroptions,callback){
        for(var attr in attroptions){
            attroptions[attr] ={
                target:attroptions[attr],
                inow:parseInt(getComputedStyle(ele)[attr])
            } 
        }
        clearInterval(ele.timer);
        ele.timer = setInterval(function(){
            for(var attr in attroptions ){
                var item = attroptions[attr]
                var target = item.target;
                var inow = item.inow;
                var speed = (target - inow)/10;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                if(Math.abs(target - inow) <= Math.abs(speed)){
                    ele.style[attr] = target+"px";
                    delete attroptions[attr];
                    for(var num  in attroptions){
                        return false;
                    }
                    clearTimeout(ele.timer);
                    if(typeof callback === "function")callback();
                }else{
                    attroptions[attr].inow += speed;
                    ele.style[attr]  = attroptions[attr].inow+"px";
                }
            }
        },30)
    }  

        function Firework(x,y,selector,type){
            if(Firework.box && selector === Firework.box.selector){
                this.box =  Firework.box.ele;
            }else{
                Firework.box = {
                    ele:document.querySelector(selector),
                    selector:selector
                }
                this.box = Firework.box.ele;
            }
            this.type = type;
            this.init(x,y)
        }

        Firework.prototype = {
            constructor:Firework,
            //初始化
            init:function(x,y){
                this.ele = this.createFirework();
                this.x = x ;
                this.y = y;
                this.maxX = this.box.offsetWidth - this.ele.offsetWidth;
                this.maxY = this.box.offsetHeight - this.ele.offsetHeight;
                this.randomColor(this.ele);
                this.fireworkUp(this.ele);
            },
            //創(chuàng)造煙花
            createFirework:function(){
                var ele = document.createElement("div");
                ele.className = "fire";
                this.box.appendChild(ele);
                return ele;
            },
            fireworkUp:function(ele){
                ele.style.left = this.x + "px";
                animation(ele,{top:this.y},function(){
                    ele.remove();
                    this.fireworkBlast()
                }.bind(this));
            },
            //煙花爆炸
            fireworkBlast:function(){
                for(var i = 0 ; i < 20; i++){
                    var ele = document.createElement("div");
                    ele.className = "fire";
                    ele.style.left = this.x + "px";
                    ele.style.top = this.y + "px";
                    this.box.appendChild(ele);
                    ele.style.borderRadius = "50%";
                    this.randomColor(ele);
                    animation(ele,this.type === "circle"?this.circleBlast(i,20): this.randomPosition(),function(cale){
                        cale.remove();
                    }.bind(this,ele))
                }
            },
            circleBlast:function(i,total){
                var r = 200;
                var reg = 360 / total *i;
                var deg = Math.PI / 180 *reg;
                return {
                    left:r * Math.cos(deg) + this.x ,
                    top:r * Math.sin(deg) + this.y 
                }
            },
            randomPosition:function(){
                return {
                    left : Math.random()*this.maxX,
                    top : Math.random()*this.maxY
                }
            },
            randomColor:function(ele){
                var color =  "#" + parseInt(parseInt("ffffff",16)*Math.random()).toString(16).padStart(6,0);
                return ele.style.backgroundColor = color;
            }
        }

        document.querySelector(".container").addEventListener("click",function(evt){
            var e = evt||event;
            new Firework(e.offsetX,e.offsetY,".container","circle")
            new Firework(e.offsetX,e.offsetY,".container")
        })
    </script>
</body>
</html>

————————————————
版權(quán)聲明：本文為CSDN博主「SpongeBooob」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_41383900/article/details/105026768

評(píng)論(0) 瀏覽(2531)

222020-3

JSP的刨根問(wèn)底

前端達(dá)人

JSP的刨根問(wèn)底

一.概念
二.原理
三.腳本
四.內(nèi)置對(duì)象
五.注釋

六.編譯指令

作用
格式
分類

七.動(dòng)作指令

作用

分類

這篇文章從一個(gè)初學(xué)者的角度，復(fù)習(xí)一波JSP。

一.概念
Java Server Pages： java服務(wù)器端頁(yè)面

可以理解為：一個(gè)特殊的頁(yè)面，其中既可以指定定義html標(biāo)簽，又可以定義java代碼
用于簡(jiǎn)化書寫！?。?br /> 二.原理
本質(zhì)是一個(gè)Servlet

三.腳本
定義：Jsp定義java代碼的方式

<% 代碼 %>：定義的java代碼，在service方法中。service方法中可以定義什么，該腳本中就可以定義什么。
<%! 代碼 %>：定義的java代碼，在jsp轉(zhuǎn)換后的java類的成員位置。
<%= 代碼 %>：定義的java代碼，會(huì)輸出到頁(yè)面上。輸出語(yǔ)句中可以定義什么，該腳本中就可以定義什么。
四.內(nèi)置對(duì)象
對(duì)象名實(shí)現(xiàn)接口或繼承類作用
PageContext 當(dāng)前頁(yè)面共享數(shù)據(jù)，還可以獲取其他八個(gè)內(nèi)置對(duì)象
request HttpServletRequest 一次請(qǐng)求訪問(wèn)的多個(gè)資源(轉(zhuǎn)發(fā))
session HttpSession 一次會(huì)話的多個(gè)請(qǐng)求間
application ServletContext 所有用戶間共享數(shù)據(jù)
response HttpServletResponse 響應(yīng)對(duì)象
page Object 當(dāng)前頁(yè)面(Servlet)的對(duì)象 this
out JspWriter 輸出對(duì)象，數(shù)據(jù)輸出到頁(yè)面上
config ServletConfig Servlet的配置對(duì)象
expection Throwable 異常對(duì)象
五.注釋
1.html注釋
:只能注釋html代碼片段
2.jsp注釋
<%-- --%>：可以注釋所有

六.編譯指令
作用
用于配置JSP頁(yè)面，導(dǎo)入資源文件

格式
<%@ 指令名稱屬性名1=屬性值1 屬性名2=屬性值2 ... %>
分類
1.page
配置JSP頁(yè)面的
1. contentType：等同于response.setContentType()
*設(shè)置響應(yīng)體的mime類型以及字符集
* 設(shè)置當(dāng)前jsp頁(yè)面的編碼（只能是高級(jí)的IDE才能生效，如果使用低級(jí)工具，則需要設(shè)置pageEncoding屬性設(shè)置當(dāng)前頁(yè)面的字符集）
2.import：導(dǎo)包
3. errorPage：當(dāng)前頁(yè)面發(fā)生異常后，會(huì)自動(dòng)跳轉(zhuǎn)到指定的錯(cuò)誤頁(yè)面
4.isErrorPage：標(biāo)識(shí)當(dāng)前也是是否是錯(cuò)誤頁(yè)面。
* true：是，可以使用內(nèi)置對(duì)象exception
* false：否。默認(rèn)值。不可以使用內(nèi)置對(duì)象exception
2.include
頁(yè)面包含的。導(dǎo)入頁(yè)面的資源文件

<%@include file="top.jsp"%>
3.導(dǎo)入資源
導(dǎo)入資源

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
prefix：前綴，自定義的
1
七.動(dòng)作指令
作用
動(dòng)作指令與編譯指令不間，編譯指令是通知 Servlet 引擎的處理消息，而動(dòng)作指令只是運(yùn)行時(shí)的腳本動(dòng)作。編譯指令在將JSP 編譯成 Servlet 時(shí)起作用:處理指令通?？商鎿Q成 Java腳本，是 JSP腳本的標(biāo)準(zhǔn)化寫法。

分類
指令作用
jsp:forward 執(zhí)行頁(yè)面轉(zhuǎn)向，將請(qǐng)求的處理轉(zhuǎn)發(fā)到下一個(gè)頁(yè)面。
jsp:param 用于傳遞參數(shù)，必須與其他支持參數(shù)曲標(biāo)簽一起使用。
jsp:include 用于動(dòng)態(tài)引入一個(gè) JSP 頁(yè)面。
jsp:plugin 用于下載 JavaBean 或 Applet 到客戶端執(zhí)行。
jsp:useBean 使用 JavaBean。
jsp:setProperty 修改 JavaBean 實(shí)例的屬性值。
jsp:getProperty 獲取 JavaBean 實(shí)例的屬性值。
具體細(xì)節(jié)：
jsp:forward：
動(dòng)作把請(qǐng)求轉(zhuǎn)到另外的頁(yè)面?？梢赞D(zhuǎn)發(fā)靜態(tài)的HTML頁(yè)面，也可以轉(zhuǎn)發(fā)動(dòng)態(tài)的JSP頁(yè)面，或者轉(zhuǎn)發(fā)到容器中的servlet jsp:forward標(biāo)記只有一個(gè)屬性page。 page屬性包含的是一個(gè)相對(duì)URL。 page的值既可以直接給出，也可以在請(qǐng)求的時(shí)候動(dòng)態(tài)計(jì)算。

jsp:param
用于設(shè)定參數(shù)值，這個(gè)指令不能單獨(dú)使用可以與以下三個(gè)指令結(jié)合使用：
jsp:include :用于將參數(shù)值出入被導(dǎo)入頁(yè)面
jsp:forword ：用于將參數(shù)值傳入被轉(zhuǎn)向頁(yè)面
jsp:plugin ：用于將參數(shù)值傳入頁(yè)面中javaBean的實(shí)例

jsp:include
（拿目標(biāo)頁(yè)面插入原有頁(yè)面）該動(dòng)作是一個(gè)動(dòng)態(tài)的include指令，也用于帶入某個(gè)頁(yè)面，他不會(huì)導(dǎo)入被include頁(yè)面的編譯指令，僅僅導(dǎo)入頁(yè)面的body內(nèi)容插入到本頁(yè)面
該動(dòng)作把指定文件插入正在生成的頁(yè)面。其語(yǔ)法如下：　　 flush：用于指定輸出緩存是否轉(zhuǎn)移到被導(dǎo)入的文件中， true：包含在被導(dǎo)入的文件中 false：包含在源文件中
前面已經(jīng)介紹過(guò)include指令，它是在JSP文件被轉(zhuǎn)換成Servlet的時(shí)候引入文件，而這里的jsp:include動(dòng)作不同，插入文件的時(shí)間是在頁(yè)面被請(qǐng)求的時(shí)候。j
sp:include動(dòng)作的文件引入時(shí)間決定了它的效率要稍微差一點(diǎn)，而且被引用文件不能包含某些JSP代碼（例如不能設(shè)置HTTP頭），但它的靈活性卻要好得多。
jsp:plugin

用于下載服務(wù)器端的javaBean或applet到客戶端）
jsp:plugin動(dòng)作用來(lái)根據(jù)瀏覽器的類型，插入通過(guò)Java插件運(yùn)行Java Applet所必需的OBJECT或EMBED元素。

<jsp:plugin  
  type="bean | applet"   : 被執(zhí)行的java程序的類型
  code="classFileName" ：被執(zhí)行的文件名，必須以  .class 結(jié)尾
  codebase="classFileDirectoryName"   ：被執(zhí)行文件的所在目錄
  [ name="instanceName" ] :給程序起一個(gè)名字用來(lái)標(biāo)識(shí)該程序
  [ archive="URIToArchive, ..." ] ：指向一些要預(yù)先載入的將要使用到的類
  [ align="bottom | top | middle | left | right" ] ：
  [ height="displayPixels" ]
  [ width="displayPixels" ]
  [ hspace="leftRightPixels" ] 
  [ vspace="topBottomPixels" ]
  [ jreversion="JREVersionNumber | 1.1" ]   ：能正確運(yùn)行改程序必須的JRE的版本
  [ nsplug inurl="URLToPlugin" ]  
  [ iepluginurl="URLToPlugin" ] >
  [ <jsp:params>
  [ <jsp:param name="parameterName" value="{parameterValue | <%= expression %>}" /> ]+
  </jsp:params> ]
  [ <jsp:fallback> text message for user </jsp:fallback> ]  ：當(dāng)不能正確顯示該Applet時(shí)，顯示該指令中的文本提示
 <jsp:plugin>

jsp:useBean
useBean：用于在jsp頁(yè)面中初始化一個(gè)java實(shí)例（如果多個(gè)jsp中需要重復(fù)使用某段代碼，可以把這段代碼定義成java類在頁(yè)面中引用）
jsp:useBean動(dòng)作用來(lái)裝載一個(gè)將在JSP頁(yè)面中使用的JavaBean。這個(gè)功能非常有用，因?yàn)樗沟梦覀兗瓤梢园l(fā)揮Java組件重用的優(yōu)勢(shì)，同時(shí)也避免了損失JSP區(qū)別于Servlet的方便性。
jsp:useBean動(dòng)作最簡(jiǎn)單的語(yǔ)法為：<jsp:useBean id=“JavaBean的名稱” class=“package.class"包名.類名” scope=“有效范圍”/>

這行代碼的含義是：“創(chuàng)建一個(gè)由class屬性指定的類的實(shí)例，然后把它綁定到其名字由id屬性給出的變量上”。不過(guò)，就象我們接下來(lái)會(huì)看到的，定義一個(gè)scope屬性可以讓Bean關(guān)聯(lián)到更多的頁(yè)面，它可接受四個(gè)值：request、session、page、application。此時(shí)，jsp:useBean動(dòng)作只有在不存在同樣id和scope的Bean時(shí)才創(chuàng)建新的對(duì)象實(shí)例，同時(shí)，獲得現(xiàn)有Bean的引用就變得很有必要。
獲得Bean實(shí)例之后，要修改Bean的屬性既可以通過(guò)jsp:setProperty動(dòng)作進(jìn)行，也可以在Scriptlet中利用id屬性所命名的對(duì)象變量，通過(guò)調(diào)用該對(duì)象的方法顯式地修改其屬性。這使我們想起，當(dāng)我們說(shuō)“某個(gè)Bean有一個(gè)類型為X的屬性foo”時(shí)，就意味著“這個(gè)類有一個(gè)返回值類型為X的getFoo方法，還有一個(gè)setFoo方法以X類型的值為參數(shù)”?！　∮嘘P(guān)jsp:setProperty動(dòng)作的詳細(xì)情況在后面討論。但現(xiàn)在必須了解的是，我們既可以通過(guò)jsp:setProperty動(dòng)作的value屬性直接提供一個(gè)值，也可以通過(guò)param屬性聲明Bean的屬性值來(lái)自指定的請(qǐng)求參數(shù)，還可以列出Bean屬性表明它的值應(yīng)該來(lái)自請(qǐng)求參數(shù)中的同名變量。
在JSP表達(dá)式或Scriptlet中讀取Bean屬性通過(guò)調(diào)用相應(yīng)的getXXX方法實(shí)現(xiàn)，或者更一般地，使用jsp:getProperty動(dòng)作。
注意，包含Bean的類文件應(yīng)該放到服務(wù)器正式存放Java類的目錄下，而不是保留給修改后能夠自動(dòng)裝載的類的目錄。例如，對(duì)于Java Web
Server來(lái)說(shuō)，Bean和所有Bean用到的類都應(yīng)該放入classes目錄，或者封裝進(jìn)jar文件后放入lib目錄，但不應(yīng)該放到servlets下。
id:javaBean的實(shí)例名 class： javaBean的實(shí)現(xiàn)類 scope：指定javaBean實(shí)例的生存范圍
page：javaBean僅在該頁(yè)面有效 request：javaBean在本次請(qǐng)求中有效 session：
javaBean在本次session內(nèi)有效 application：
javaBean在本應(yīng)用內(nèi)一直有效　　下面是一個(gè)很簡(jiǎn)單的例子，它的功能是裝載一個(gè)Bean，然后設(shè)置/讀取它的message屬性。
關(guān)于jsp:useBean的進(jìn)一步說(shuō)明　　使用Bean最簡(jiǎn)單的方法是先用下面的代碼裝載Bean：　 <jsp:useBean id=“name” class=“package.class” />
然后通過(guò)jsp:setProperty和jsp:getProperty修改和提取Bean的屬性。不過(guò)有兩點(diǎn)必須注意。　　第一，我們還可以用下面這種格式實(shí)例化Bean： <jsp:useBean …> 　　Body 　　</jsp:useBean>
它的意思是，只有當(dāng)?shù)谝淮螌?shí)例化Bean時(shí)才執(zhí)行Body部分，如果是利用現(xiàn)有的Bean實(shí)例則不執(zhí)行Body部分。正如下面將要介紹的，jsp:useBean并非總是意味著創(chuàng)建一個(gè)新的Bean實(shí)例。
第二，除了id和class外，jsp:useBean還有其他三個(gè)屬性，即：scope、type、beanName。
id：命名引用該Bean的變量。如果能夠找到id和scope相同的Bean實(shí)例，jsp:useBean動(dòng)作將使用已有的Bean實(shí)例而不是創(chuàng)建新的實(shí)例。
class：指定Bean的完整包名。
scope：指定Bean在哪種上下文內(nèi)可用，可以取下面的四個(gè)值之一：page、request、session和application?！　∧J(rèn)值是page，表示該Bean只在當(dāng)前頁(yè)面內(nèi)可用（保存在當(dāng)前頁(yè)面的PageContext內(nèi)）。
request表示該Bean在當(dāng)前的客戶請(qǐng)求內(nèi)有效（保存在ServletRequest對(duì)象內(nèi)）。
session表示該Bean對(duì)當(dāng)前HttpSession內(nèi)的所有頁(yè)面都有效。
最后，如果取值application，則表示該Bean對(duì)所有具有相同ServletContext的頁(yè)面都有效。
scope之所以很重要，是因?yàn)閖sp:useBean只有在不存在具有相同id和scope的對(duì)象時(shí)才會(huì)實(shí)例化新的對(duì)象；
如果已有id和scope都相同的對(duì)象則直接使用已有的對(duì)象，此時(shí)jsp:useBean開始標(biāo)記和結(jié)束標(biāo)記之間的任何內(nèi)容都將被忽略。
type：指定引用該對(duì)象的變量的類型，它必須是Bean類的名字、超類名字、該類所實(shí)現(xiàn)的接口名字之一。請(qǐng)記住變量的名字是由id屬性指定的。
beanName：指定Bean的名字。如果提供了type屬性和beanName屬性，允許省略class屬性。

jsp:setProperty
jsp:setProperty用來(lái)設(shè)置已經(jīng)實(shí)例化的Bean對(duì)象的屬性，有兩種用法。
首先，你可以在jsp:useBean元素的外面（后面）使用jsp:setProperty，　　　　…

第二種用法是把jsp:setProperty放入jsp:useBean元素的內(nèi)部，　…

jsp:setProperty動(dòng)作有下面四個(gè)屬性：name：表示要設(shè)置屬性的是哪個(gè)Bean?！　roperty：表示要設(shè)置哪個(gè)屬性。有一個(gè)特殊用法：如果property的值是""，表示所有名字和Bean屬性名字匹配的請(qǐng)求參數(shù)都將被傳遞給相應(yīng)的屬性set方法?！　alue：value屬性是可選的。該屬性用來(lái)指定Bean屬性的值。字符串?dāng)?shù)據(jù)會(huì)在目標(biāo)類中通過(guò)標(biāo)準(zhǔn)的valueOf方法自動(dòng)轉(zhuǎn)換成數(shù)字、boolean、Boolean、byte、Byte、char、Character。例如，boolean和Boolean類型的屬性值（比如“true”）通過(guò)Boolean.valueOf轉(zhuǎn)換，int和Integer類型的屬性值（比如"42"）通過(guò)Integer.valueOf轉(zhuǎn)換?！　alue和param不能同時(shí)使用，但可以使用其中任意一個(gè)?！　aram：param是可選的。它指定用哪個(gè)請(qǐng)求參數(shù)作為Bean屬性的值。如果當(dāng)前請(qǐng)求沒有參數(shù)，則什么事情也不做，系統(tǒng)不會(huì)把null傳遞給Bean屬性的set方法。因此，你可以讓Bean自己提供默認(rèn)屬性值，只有當(dāng)請(qǐng)求參數(shù)明確指定了新值時(shí)才修改默認(rèn)屬性值?！　±?，下面的代碼片斷表示：如果存在numItems請(qǐng)求參數(shù)的話，把numberOfItems屬性的值設(shè)置為請(qǐng)求參數(shù)numItems的值；否則什么也不做。　　　　如果同時(shí)省略value和param，其效果相當(dāng)于提供一個(gè)param且其值等于property的值。進(jìn)一步利用這種借助請(qǐng)求參數(shù)和屬性名字相同進(jìn)行自動(dòng)賦值的思想，你還可以在property（Bean屬性的名字）中指定“”，然后省略value和param。此時(shí)，服務(wù)器會(huì)查看所有的Bean屬性和請(qǐng)求參數(shù)，如果兩者名字相同則自動(dòng)賦值。　　下面是一個(gè)利用JavaBean計(jì)算素?cái)?shù)的例子。如果請(qǐng)求中有一個(gè)numDigits參數(shù)，則該值被傳遞給Bean的numDigits屬性；numPrimes也類似?！　spPrimes.jsp

jsp:getProperty
jsp:getProperty動(dòng)作提取指定Bean屬性的值，轉(zhuǎn)換成字符串，然后輸出。
jsp:getProperty有兩個(gè)必需的屬性，即：name，表示Bean的名字；property，表示要提取哪個(gè)屬性的值。

END！??！有什么意見可以提出來(lái)！
長(zhǎng)路漫漫，JAVA為伴?。。?br /> ————————————————
版權(quán)聲明：本文為CSDN博主「福爾摩東」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_43688587/article/details/105017469

評(píng)論(0) 瀏覽(7079)

222020-3

label和span標(biāo)簽設(shè)置寬度width無(wú)效的解決辦法

前端達(dá)人

如何用CSS使label標(biāo)簽等寬？

<div><label>密碼</label><input type="password" /></div>
<div><label>確認(rèn)密碼</label><input type="password" /></div>
如何對(duì)齊呢？加空格的方法不好哦。（因?yàn)閘abel中的字?jǐn)?shù)不一樣，所以頁(yè)面顯示效果不對(duì)齊）

問(wèn)題原因及解決辦法：

label默認(rèn)為內(nèi)聯(lián)元素，元素前后沒有換行符，并且不可以設(shè)置寬度。

如果要為label設(shè)置寬度，則需要改變label的display屬性，使其變?yōu)橐粋€(gè)塊級(jí)元素。

方法如下：

1.增加inline-block屬性值，將label標(biāo)簽變?yōu)樾袃?nèi)塊元素（css2.1新增）

{display:inline-block;}

2.增加width屬性，如將寬度設(shè)置為100px

label{width:100px;display:inline-block;}

3.添加好后頁(yè)面上所有的label標(biāo)簽會(huì)變?yōu)?00pxv

`JavaScript中的混淆器`

隨著 AJAX 和富界面技術(shù)的發(fā)展，Javascript 在 Web 應(yīng)用上的重要性越來(lái)越高，Javascript 代碼的復(fù)雜性、功能和技術(shù)含量也越來(lái)越高，對(duì)Javascript 代碼保護(hù)的需要也越來(lái)越迫切。壓縮 compress：去掉空格，換行，注釋等，格式緊湊，節(jié)約存儲(chǔ)空間。混淆 obfuscate/garble：替換變量名或方法名，讓js不容易看懂。也做到了壓縮的效果。加密 encrypt：一般用eval方法加密，效果與混淆相似。也做到了壓縮的效果。

我們可以通過(guò)工具進(jìn)行混淆，通過(guò)工具也是目前最好的方式。推薦一個(gè)很好的混淆工具： JSObfuscator By Unest

———————————————— 版權(quán)聲明：本文為CSDN博主「劉亦楓」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。原文鏈接：https://blog.csdn.net/liuyifeng0000/article/details/105004732

評(píng)論(0) 瀏覽(4922)

202020-3

淘寶、拼多多為什么要讓你玩游戲？

前端達(dá)人

從支付寶螞蟻森林開始，游戲化產(chǎn)品開始回歸移動(dòng)互聯(lián)網(wǎng)領(lǐng)域。拼多多上線“多多果園”后，通過(guò)玩游戲免費(fèi)領(lǐng)水果的玩法，引發(fā)了電商游戲化產(chǎn)品的風(fēng)潮。淘寶、天貓、京東、蘇寧等互聯(lián)網(wǎng)平臺(tái)紛紛推出了自己的游戲產(chǎn)品。那么游戲化到底能夠?yàn)楫a(chǎn)品帶來(lái)什么呢？

一、什么是游戲化
游戲化（Gamification）是指將游戲元素和游戲設(shè)計(jì)技術(shù)應(yīng)用于非游戲場(chǎng)景，用游戲化機(jī)制創(chuàng)造樂(lè)趣來(lái)更好地實(shí)現(xiàn)目標(biāo)。也就是說(shuō)，通過(guò)游戲的方式，為非游戲化的場(chǎng)景或產(chǎn)品賦能，讓用戶在使用產(chǎn)品過(guò)程中獲得更多的樂(lè)趣，創(chuàng)造更大的產(chǎn)品價(jià)值。

隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，人口紅利逐漸消失，電商領(lǐng)域開始從增量市場(chǎng)進(jìn)入存量市場(chǎng)。當(dāng)用戶數(shù)量無(wú)法持續(xù)有效增長(zhǎng)時(shí)，就需要深挖存量用戶的價(jià)值，通過(guò)精細(xì)化運(yùn)營(yíng)，提高DAU（用戶日活）來(lái)獲取更大的用戶價(jià)值。

2016年8月27日，支付寶上線螞蟻森林。2017年數(shù)據(jù)顯示，由于螞蟻森林擁有遠(yuǎn)超平常應(yīng)用的用戶黏性，產(chǎn)品已擁有超過(guò)2億用戶，帶來(lái)的日活不可小覷。

2017年8月6日，支付寶又上線了螞蟻莊園。2019年11月20日，螞蟻莊園官方微博對(duì)外發(fā)布了運(yùn)營(yíng)大數(shù)據(jù)。該數(shù)據(jù)顯示，螞蟻莊園上線至今，全國(guó)約4億網(wǎng)友捐了150億個(gè)雞蛋。

這兩款游戲化產(chǎn)品引爆了用戶的熱情，為傳統(tǒng)的支付工具添加了游戲化屬性，開創(chuàng)了移動(dòng)互聯(lián)網(wǎng)時(shí)代“種樹養(yǎng)雞”的娛樂(lè)化模式。

隨后，2018年4月，拼多多上線了“多多果園”，在電商領(lǐng)域率先開啟了游戲化模式。于是游戲化產(chǎn)品在電商平臺(tái)上開始生根發(fā)芽。

2018年11月，京東上線了“種豆得豆”；

2019年1月，淘寶上線了“金幣莊園”；

2019年5月，蘇寧易購(gòu)上線了“云鉆魔法獅”；

據(jù)不完全統(tǒng)計(jì)，主流電商都推出了多款游戲化產(chǎn)品。清單如下：

二、游戲化產(chǎn)品的價(jià)值

目前在電商領(lǐng)域，游戲化產(chǎn)品主要是作為流量產(chǎn)品存在的，核心目標(biāo)是為了增強(qiáng)平臺(tái)的用戶粘性，盤活現(xiàn)有的存量用戶，提高用戶活躍度。

在游戲化產(chǎn)品未出現(xiàn)前，各大電商基本采用的是“簽到”送獎(jiǎng)勵(lì)的形式，提升用戶活躍度。從短期效果上，簽到同樣可以帶給用戶強(qiáng)烈的激勵(lì)。然而虛擬幣在購(gòu)物過(guò)程中才能形成價(jià)值感知，所以單純虛擬幣總量的積累無(wú)法形成持續(xù)性的激勵(lì)，用戶容易產(chǎn)生厭倦心理。

同時(shí)為了平衡商業(yè)價(jià)值，虛擬幣必然帶有一定的使用門檻，因此簽到價(jià)值與用戶的購(gòu)買鏈路無(wú)法即時(shí)匹配。用戶在購(gòu)物過(guò)程中，無(wú)法使用虛擬幣時(shí)，必然會(huì)產(chǎn)生一定的負(fù)面情緒。

為了彌補(bǔ)簽到行為中情感體驗(yàn)的缺失，電商平臺(tái)開始通過(guò)游戲化對(duì)“簽到”產(chǎn)品進(jìn)行了包裝升級(jí)。相比較傳統(tǒng)的簽到產(chǎn)品，游戲化產(chǎn)品的優(yōu)勢(shì)在哪里呢？

我認(rèn)為有以下幾個(gè)方面：

1、形成內(nèi)部觸發(fā)

根據(jù)上癮模型理論，用戶上癮需要有一個(gè)“觸發(fā)”。而內(nèi)部觸發(fā)是產(chǎn)品在用戶內(nèi)心、情感層面上建立的一種潛意識(shí)的認(rèn)知，是產(chǎn)品和用戶之間最有力的紐帶。

基于游戲“八角行為激勵(lì)模型”，在產(chǎn)品設(shè)計(jì)中，可以通過(guò)多種手段不斷激勵(lì)用戶參與到游戲中（具體內(nèi)容參見下一篇文章）。用戶進(jìn)入了游戲后，無(wú)論是激勵(lì)體系、游戲玩法，還是視覺設(shè)計(jì)，都可以更好的觸發(fā)用戶的情感體驗(yàn)點(diǎn)。

同時(shí)成長(zhǎng)體系、成就體系、好友排名等激勵(lì)，為用戶設(shè)定了更加豐富和明確目標(biāo)，讓用戶更持久的投入到游戲的玩法中，并逐步在用戶意識(shí)中形成內(nèi)部觸發(fā)，讓產(chǎn)品具有更高的用戶粘性。

例如螞蟻森林對(duì)于用戶不僅僅是每日7點(diǎn)左右收取能量，更多的是在拿起手機(jī)不由自主的打開支付寶，查看有沒有能量可以收取。

2、深度激活用戶

傳統(tǒng)的簽到為每日活動(dòng)，用戶更傾向于完成即走，用戶鏈路短，無(wú)法挖掘用戶的潛在價(jià)值。

而游戲玩法豐富，增強(qiáng)了用戶鏈路，同時(shí)將玩法細(xì)化到小時(shí)級(jí)的顆粒度，激活用戶的活躍度。例如在金幣莊園中植物在4個(gè)小時(shí)內(nèi)即可成熟采摘，促使用戶多次打開產(chǎn)品收取果實(shí)。

游戲的任務(wù)也更加靈活，通過(guò)頻次可以滿足不同的用戶的需要。深度玩家可以反復(fù)多次完成任務(wù)，普通玩家可以靈活參與，因此對(duì)用戶的覆蓋更廣，也有利于普通用戶升級(jí)為深度玩家。多次和定時(shí)的任務(wù)，用戶需要頻繁的進(jìn)出游戲來(lái)獲取獎(jiǎng)勵(lì)，從而極大的提高了用戶的活躍度，逐漸培養(yǎng)用戶玩游戲的習(xí)慣。

3、增加用戶停留、提高用戶轉(zhuǎn)化

用戶的停留時(shí)長(zhǎng)其實(shí)是一種零和博弈，面對(duì)激烈的市場(chǎng)競(jìng)爭(zhēng)，用戶在一個(gè)平臺(tái)的停留時(shí)長(zhǎng)增加，必然會(huì)導(dǎo)致另一個(gè)平臺(tái)停留時(shí)長(zhǎng)的下降。因此各大電商在關(guān)注用戶活躍度的同時(shí)，也開始爭(zhēng)奪用戶停留時(shí)長(zhǎng)。

游戲化產(chǎn)品擁有更加細(xì)化的游戲玩法和任務(wù)，無(wú)形之中增加了用戶的停留時(shí)長(zhǎng)。同時(shí)也為產(chǎn)品提供了更多的機(jī)會(huì)，埋下各種用戶轉(zhuǎn)化觸點(diǎn)，提高用戶的轉(zhuǎn)化率。例如在游戲任務(wù)中，用戶需要瀏覽店鋪和商品獲得收益?；蛘咴谟螒蜻^(guò)程中會(huì)推送各種優(yōu)惠券，激勵(lì)用戶轉(zhuǎn)化。

那么游戲鏈路和玩法復(fù)雜后，會(huì)帶給用戶壓力和困擾嗎？答案是肯定的。但是由于人們普遍都是“逐利”心理，當(dāng)面對(duì)利益時(shí)，用戶很容易忽視時(shí)間成本和操作成本。

因此游戲中的各種任務(wù)多而繁雜，頻繁出現(xiàn)的彈窗帶來(lái)了不好的用戶體驗(yàn)。但是對(duì)于用戶而言，細(xì)化的任務(wù)體系和營(yíng)銷彈窗更多的是收益，因此用戶不會(huì)產(chǎn)生大的心理壓力和操作負(fù)擔(dān)，反而樂(lè)于接受，完成率也更高。于是用戶在無(wú)意識(shí)中會(huì)頻繁的接觸店鋪和商品，讓轉(zhuǎn)化也變得更加的流暢和自然。

4、減少用戶流失

一旦參與到游戲中，用戶不僅僅收獲了各種虛擬幣，還投入了自己的時(shí)間和情感，這就是用戶的沉沒成本。隨著時(shí)間增加，產(chǎn)品的粘性越強(qiáng)，用戶流失幾率也就越低。

三、游戲化產(chǎn)品分類

根據(jù)電商平臺(tái)現(xiàn)有的游戲化產(chǎn)品，我們從游戲模式上大致可以分為4大類。

1、購(gòu)物抵現(xiàn)類

仿照線下的代金券，電商推出了平臺(tái)內(nèi)的代金幣。一方面可以吸引用戶參加各種運(yùn)營(yíng)活動(dòng)，同時(shí)也可以占領(lǐng)用戶心智。當(dāng)出現(xiàn)購(gòu)物需求時(shí)，用戶會(huì)優(yōu)先考慮消費(fèi)代金幣完成交易。

淘寶“金幣莊園”、京東“種豆得豆”、蘇寧“云鉆魔法獅”都是這類產(chǎn)品。而深諳游戲玩法的拼多多，則是直接推出了“現(xiàn)金簽到”的方式，現(xiàn)金的認(rèn)知相對(duì)于代金幣更加強(qiáng)烈，消費(fèi)方式也更加靈活，可以提現(xiàn)或購(gòu)物，增強(qiáng)了玩法的價(jià)值感和吸引力。

2、實(shí)物領(lǐng)取類

這類游戲以拼多多“多多果園”最為典型，用戶只要給選擇的果樹澆水和施肥，長(zhǎng)成后即可獲得一份實(shí)物水果。

相對(duì)于代金幣的購(gòu)物抵現(xiàn)金。實(shí)物兌換的目標(biāo)性更強(qiáng)，而且擺脫了購(gòu)買交易的概念，讓用戶感覺自己沒有付出任何成本，卻得到了一份水果，用戶的獲得感更強(qiáng)；

3、商品兌換類

用戶通過(guò)游戲獲得獎(jiǎng)勵(lì)，可以兌換相應(yīng)的商品。例如拼多多“多多賺大錢”、“多多牧場(chǎng)”等。商品兌換模式，跟實(shí)物領(lǐng)取方式類似，給用戶樹立了更加明確的目標(biāo)，讓用戶持續(xù)的投入精力。而成功兌換后，會(huì)帶給用戶更強(qiáng)的獲得感，激勵(lì)用戶繼續(xù)玩下去。

4、公益捐獻(xiàn)類

以螞蟻森林和螞蟻莊園為典型代表，而淘寶里的“野生小伙伴”、天貓里的“童話鎮(zhèn)”也是此類題材。這類游戲更多是通過(guò)公益捐獻(xiàn)的形式賦予用戶更多的使命感，吸引用戶參與，但是帶來(lái)的用戶商業(yè)價(jià)值不高。目前“野生小伙伴”已經(jīng)下架，“童話鎮(zhèn)”在天貓平臺(tái)的露出并不明顯，用戶的感知較弱。

四、總結(jié)

愛玩是人類的天性。因此游戲以及游戲化的產(chǎn)品，天然具有高用戶粘度和用戶活躍度的特質(zhì)。但是市場(chǎng)上有無(wú)數(shù)的游戲化產(chǎn)品，為什么有的異?；鸨?，有的無(wú)人問(wèn)津呢？

在產(chǎn)品設(shè)計(jì)時(shí)需要注意以下幾點(diǎn)：

1、游戲化產(chǎn)品之所以受到用戶的喜愛，利益點(diǎn)僅僅是表層驅(qū)動(dòng)，游戲的玩法才是產(chǎn)品真正的核心。因此需要通過(guò)建立完善的游戲化體系，提升產(chǎn)品的競(jìng)爭(zhēng)力；

2、游戲化產(chǎn)品競(jìng)爭(zhēng)激烈，需要不斷的進(jìn)行玩法創(chuàng)新，才能帶給用戶差異化體驗(yàn)。例如拼多多系列產(chǎn)品，通過(guò)實(shí)物領(lǐng)取和兌換，帶給了用戶全新的體驗(yàn)感受，對(duì)用戶的吸引力也更強(qiáng)；

3、游戲化產(chǎn)品需要賦能商業(yè)目標(biāo)，在實(shí)現(xiàn)了用戶活躍的基礎(chǔ)上，還需要提升用戶轉(zhuǎn)化；

作者：子牧先生

轉(zhuǎn)自：子牧設(shè)計(jì)筆談

評(píng)論(0) 瀏覽(2571)

192020-3

js_判斷瀏覽器內(nèi)核與修改元素樣式

前端達(dá)人

/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);

<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
//以下進(jìn)行測(cè)試
if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);
</script>

PC端只有Chrome有Safari字段嗎？為什么不需要判斷其他瀏覽器？
其實(shí)360，QQ等瀏覽器的userAgent字段也會(huì)帶有Safari字段，但是由于他們基于Chrome二次開發(fā)的，所有也會(huì)攜帶有Chrome字段。
所以「匹配規(guī)則：擁有Safari字段，并且沒有Chrome字段」就可以了。

接下來(lái)是修改元素樣式

<html>
<head>
    <style>
     #a{
        width:700px;
        height:300px;
        font-size:50px;
        color:red;
        background-color:grey;
        z-index:2;
        position:absolute;
        top:1300px;
        left:200px;
        display:none;
    } 
    </style>
</head>
<body>
    <div id="a"></div>
</body>
<script type="text/javascript">
    //假設(shè)想修改display為block
    function modify(){
        //1.原生Js法
        var a= document.getElementById("a");
        a.style.display="block";
        //2.用JQuery的css方法
        var a =$("#a");
        a.css("display","block");
        //3.用JQuery的attr方法
        var a =$("#a");
        a.attr("style","display:block");
    }
</script>
</html>

這樣就可以根據(jù)不同瀏覽器寫出不同的樣式適配啦

評(píng)論(0) 瀏覽(2524)

182020-3

密碼驗(yàn)證 : 密碼強(qiáng)度驗(yàn)證

前端達(dá)人

密碼強(qiáng)度驗(yàn)證

需求

首先我們需要知道需求是什么？這很重要！

要知道我們寫的一切邏輯都是建立在需求之上

當(dāng)輸入框聚焦時(shí)提示密碼要求

當(dāng)密碼符合要求時(shí) 隱藏提示并給予反饋

密碼等級(jí)低時(shí) 提示密碼等級(jí)為低

密碼等級(jí)一般時(shí) 提示密碼等級(jí)為中

密碼等級(jí)高時(shí) 提示密碼等級(jí)為高

當(dāng)密碼不符合要求時(shí) 重新打開提示

思考如何構(gòu)建函數(shù)
通過(guò)上面的需求你能想到的函數(shù)時(shí)什么？你能想到的邏輯又是什么？

首先提示的顯示隱藏我們可以用事件綁定或者事件監(jiān)聽來(lái)做

其次我們需要利用正則來(lái)判斷密碼等級(jí)

當(dāng)密碼等級(jí)為低時(shí) 顯示紅色

當(dāng)密碼等級(jí)為中時(shí) 顯示黃色

當(dāng)密碼等級(jí)為高時(shí) 顯示綠色

最后根據(jù)密碼等級(jí)來(lái)渲染頁(yè)面也就是反饋給用戶的樣式

建議 :

在這里盡量把每個(gè)函數(shù)的功能區(qū)分好構(gòu)思好

不僅要讓自己能看懂還要讓別人能看懂

這樣的代碼才是好的代碼可讀性更好可維護(hù)性更高

實(shí)現(xiàn)功能實(shí)現(xiàn)需求

HTML結(jié)構(gòu)

在提示盒子的內(nèi)部寫3個(gè)div 不同等級(jí)給予不同顏色不同數(shù)量的提示

 密碼 : <input type="text" id="ipt">
    <p id="p">請(qǐng)輸入6-20位的帶有數(shù)字字母或者特殊符號(hào)的密碼</p>
    <div class="box">
        <span></span>
        <div></div>
        <div></div>
        <div></div>
    </div>

不管樣式行為再怎么花里胡哨也一定要先把結(jié)構(gòu)里要出現(xiàn)的元素寫出來(lái)

CSS樣式

由于考慮到等級(jí)分為三種所以給提示盒子分3中不同的class類名

每一個(gè)類名對(duì)應(yīng)的子元素的樣式也不同

到j(luò)s部分我們只需要操作class類名就可以了

   <style>
        *{
            margin : 0 ;
            padding : 0 ;
        }
        //提示盒子
        .box{
            position : absolute;
            top : 2px;
            left : 200px;
        }
        .box div,
        .box span{
            margin-right : 5px;
            width : 20px;
            height : 20px;
            float : left;
        }
        //低等級(jí)
        .box.low :nth-child(2){
            background : red;
        }
        //中等級(jí)
        .box.middle div{
            background : yellow;
        }
        .box.middle :last-child{
            background: #fff;
        }
        //高等級(jí)
        .box.high div{
            background : green;
        }
        //提示文字默認(rèn)隱藏
        p{
            display : none;
        }
    </style>

JS行為

 <script>
        //獲取需要操作的元素
        let ipt = document.getElementById('ipt');
        let p = document.getElementById('p');
        let div = document.getElementsByClassName('box')[0];
        var tip = false; //聚焦顯示提示的開關(guān)
        //添加聚焦事件
        ipt.addEventListener('focus' , () => {
            //由于存在用戶輸入正確的密碼失焦再操作的可能 所以需要驗(yàn)證開關(guān)
            if(!tip) {
                p.style.display = 'block';
            }
            //默認(rèn)選中文字 提升用戶體驗(yàn)
            ipt.select();
        })
        //添加輸入時(shí)的事件
        ipt.addEventListener('input' , () => {
            //拿到用戶輸入的密碼字符串
            let str = ipt.value;
            //當(dāng)密碼不符合要求時(shí) 要及時(shí)給予反饋 及時(shí)清除樣式
            if(str.length < 6 ||str.length > 20 || /[^(\da-zA-Z\_\#\@\$\^\%\*\&\!\~\+\-)]/.test(str) || str === "") {
                p.style.display = 'block';
                removeClass(div);
                div.children[0].innerHTML = "";
                tip = true;
                //如果不符合要求 就沒必要判斷等級(jí)了 直接結(jié)束判斷
                return false;
            }else{
                p.style.display = 'none';
            }
            //判斷密碼等級(jí)
            let res = level(str);
            //根據(jù)等級(jí)添加樣式
            randerLevel(res);
        })
        //判斷密碼等級(jí)函數(shù)
        function level (str) {
            let level = 0;
            //當(dāng)用戶輸入的字符串符合一定規(guī)則 讓等級(jí)+1
            if(/\d+/.test(str)) {
                level ++;
            }
            if(/[a-zA-Z]+/.test(str)) {
                level ++;
            }
            if(/[\_\#\@\$\^\%\*\&\!\~\+\-]+/.test(str)) {
                level ++;
            }
            return level;
        }
        //添加樣式函數(shù)
        function randerLevel (level) {
            //在添加樣式前先清空樣式
            removeClass(div);
            div.children[0].innerHTML = "";
            //根據(jù)等級(jí)添加對(duì)應(yīng)的類名
            switch (level) {
                case 1 :
                    div.children[0].innerHTML = '低';
                    //元素存在不止一個(gè)類名 用 += 更好
                    div.className += ' low';
                    break;
                case 2 :
                    div.children[0].innerHTML = '中';
                    div.className += ' middle';
                    break;
                case 3 :
                    div.children[0].innerHTML = '高';
                    div.className += ' high';
                    break;
            }
        }
        //去等級(jí)類名函數(shù)
        function removeClass(ele){
            let reg = /low|middle|high/g;
            if(reg.test(ele.className)) {
                //不要忘記把值賦回去 replace返回的是新字符串
                ele.className = ele.className.replace(reg , "");
            }
        }
    </script>

當(dāng)密碼等級(jí)為低時(shí) 給予紅色反饋

當(dāng)密碼等級(jí)為中時(shí) 給予黃色反饋
當(dāng)密碼等級(jí)為高時(shí) 給予綠色反饋
當(dāng)密碼長(zhǎng)度太短或太長(zhǎng)時(shí) 不給予顏色反饋給予文字反饋

————————————————
版權(quán)聲明：本文為CSDN博主「豆?jié){不好喝」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_45178648/article/details/104885417

評(píng)論(0) 瀏覽(3241)

首頁(yè)

目錄

瀏覽器緩存問(wèn)題

細(xì)節(jié)問(wèn)題

樣式表關(guān)聯(lián)問(wèn)題

選擇器問(wèn)題

編碼格式問(wèn)題

樣式層疊問(wèn)題

HTML基礎(chǔ)知識(shí)

frameset

結(jié)構(gòu)

樣式

行為

編寫構(gòu)造函數(shù)Firework

封裝一個(gè)運(yùn)動(dòng)的方法

編寫原型方法

綁定事件

全部代碼

JSP的刨根問(wèn)底

如何用CSS使label標(biāo)簽等寬？

JavaScript中的混淆器

實(shí)現(xiàn)功能 實(shí)現(xiàn)需求

HTML結(jié)構(gòu)

CSS樣式

JS行為

分類

日歷

鏈接

個(gè)人資料

存檔

如何用CSS使label標(biāo)簽等寬？

`JavaScript中的混淆器`

實(shí)現(xiàn)功能實(shí)現(xiàn)需求