篇文章講到HTML炫酷的主流框架，今天小明就介紹一個HTML5功能的實(shí)現(xiàn)代碼

Introduce(介紹)

用戶簽到的H5例子（css+jquery，無圖片），由于網(wǎng)上找的的用戶簽到例子都不好，要不就是好多圖片組成的，要不就大量冗余代碼，所以特意做了個簽到界面（移動端）。

User sign sample page for mobile using h5 which only use css + jquery + html.

一些關(guān)鍵的地方

這個功能的編寫思路是，先構(gòu)建日期和簽到相關(guān)數(shù)據(jù)，然后從服務(wù)端獲取數(shù)據(jù)，并對原有數(shù)據(jù)進(jìn)行更改，最后進(jìn)行渲染。

這樣子很好的擺脫了邏輯比較凌亂的問題，并且可以直接將這些數(shù)據(jù)用 vue.js 來掛載（本文沒有這樣做）。

生成日期數(shù)據(jù)

//生成日期數(shù)據(jù)
 function buildData() {
 var da = {
 dates: [],//日期數(shù)據(jù)，從1號開始
 current: '',//當(dāng)前日期
 monthFirst: 1,//獲取當(dāng)月的1日等于星期幾
 month: 0,//當(dāng)前月份
 days: 30,//當(dāng)前月份共有多少天
 day: 0,//今天幾號了
 isSigned: false,//今天是否已經(jīng)簽到
 signLastDays:3,//連續(xù)簽到日子
 signToday: function () {
 this.isSigned = true;
 this.dates[this.day].isSigned = true;
 },
 };
 var ds = [];
 //初始化日期數(shù)據(jù)
 var dt = new Date();
 da.current = dt.ToString('yyyy年M月d日');
 da.monthFirst = new Date(dt.getFullYear(), dt.getMonth(), 1).getDay();
 da.month = dt.getMonth() + 1;
 da.days = new Date(dt.getFullYear(), parseInt(da.month), 0).getDate();//獲取當(dāng)前月的天數(shù)
 da.day = dt.getDate();
 for (var i = 1; i < da.days + 1; i++) {
 var o = {
 isSigned: false,//是否簽到了
 num: i,//日期
 isToday: i == da.day,//是否今天
 isPass: i < da.day,//時(shí)間已過去
 };
 ds[i] = o;
 }
 da.dates = ds;
 return da;
 }

有了數(shù)據(jù)之后，就可以將數(shù)據(jù)轉(zhuǎn)換為界面了

//渲染數(shù)據(jù)
 function renderData(da) {
 var signDays = document.getElementById('spSignDays');
 signDays.innerText = da.signLastDays;
 var root = document.getElementById("signTable");
 root.innerHTML = '';
 var tr, td;
 var st = da.monthFirst;
 var dates = da.dates;
 var rowcount = 0;
 //最多6行
 for (var i = 0; i < 42; i++) {
 if (i % 7 == 0) {
 //如果沒有日期了，中斷
 if (i > (st + da.days))
 break;
 tr = document.createElement('tr');
 tr.className = 'darkcolor trb';
 root.appendChild(tr);
 rowcount++;
 }
 //前面或后面的空白
 if (i < st || !dates[i - st + 1]) {
 td = document.createElement('td');
 td.innerHTML = '<div class="sign-blank"><span></span></div>';
 tr.appendChild(td);
 continue;
 }
 //填充數(shù)字部分
 var d = dates[i - st + 1];
 td = document.createElement('td');
 var tdcss = '';
 if (d.isToday)
 tdcss = 'sign-today';
 else if (d.isPass)
 tdcss = 'sign-pass';
 else
 tdcss = 'sign-future';
 if (d.isSigned) {
 tdcss = 'sign-signed ' + tdcss;
 td.innerHTML = '<div class="' + tdcss + '"><span>' + d.num + '</span><svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="sign-pin svg-triangle "><polygon points="0,0 35,0 0,35" /></svg></div>';
 } else {
 tdcss = 'sign-unsign ' + tdcss;
 td.innerHTML = '<div class="' + tdcss + '"><span>' + d.num + '</span></div>';
 }
 tr.appendChild(td);
 }
 //計(jì)算是否需要添加最后一行
 if ((st + da.days + 1) / 7 > rowcount)
 root.appendChild(tr);
 }
 //構(gòu)建日期數(shù)據(jù)
 var da = buildData();
 //渲染
 renderData(da);

以上就是本篇文章的全內(nèi)容了

學(xué)習(xí)從來不是一個人的事情，要有個相互監(jiān)督的伙伴，想要學(xué)習(xí)或交流前端問題的小伙伴可以私信回復(fù)小明“學(xué)習(xí)” 獲取資料，一起學(xué)習(xí)！

源|活動盒子-APP活動運(yùn)營工具(huodonghezi.com)

很多APP運(yùn)營人員在工作過程中，都會遇到如下兩個問題：

1.用戶來到一款新的APP中，僅體驗(yàn)部分產(chǎn)品功能，就退出并卸載APP。

2.用戶留存率較低，用戶使用APP頻次不高。

最近，盒子菌在《增長黑客：如何低成本實(shí)現(xiàn)爆發(fā)式成長》找到了解決這兩大問題的方法，書中說到，只有當(dāng)用戶發(fā)現(xiàn)產(chǎn)品的價(jià)值，即體驗(yàn)到啊哈時(shí)刻，才會長久地留下來。所以，當(dāng)產(chǎn)品已經(jīng)具備了為用戶提供“啊哈體驗(yàn)”的元素，運(yùn)營人員需要做的事情就是更有效地引導(dǎo)人們發(fā)現(xiàn)它。

簽到這種活動，正是引導(dǎo)用戶發(fā)現(xiàn)產(chǎn)品價(jià)值的用戶激勵方式。

一.簽到的方式與種類

用戶完成簽到行為之后，即可獲得金幣、積分、成長值等其他獎勵。用戶為了會得到這些獎勵，會根據(jù)平臺的要求，做出簽到行為。

簽到的方式有兩種，一種是登錄，另外一種是需要用戶點(diǎn)擊簽到按鈕。

1.登錄=簽到，多見于游戲APP中，用戶打開APP，直接出現(xiàn)提示框，告知用戶已領(lǐng)取當(dāng)日獎勵。

2.手動簽到：用戶點(diǎn)擊簽到按鈕簽到，這種簽到方式的使用范圍更廣。

簽到共有三種種類，每日簽到、累計(jì)簽到、連續(xù)簽到。

1.每日簽到：用戶完成平臺指定的簽到行為，即可獲得獎勵，門檻較低且無累計(jì)。

2.累計(jì)簽到：用戶在某一段時(shí)間內(nèi)簽到總數(shù)，達(dá)到規(guī)定次數(shù)即認(rèn)為簽到成功，可間斷。

3.連續(xù)簽到：用戶在一段時(shí)間內(nèi)連續(xù)完成簽到，不可間斷。

以上三種簽到種類中，每日簽到門檻最低，其次是累計(jì)簽到，連續(xù)簽到門檻最高。在設(shè)計(jì)簽到活動時(shí)，門檻越高，獎品越豐厚，用戶為了得到更高價(jià)值的獎品，會根據(jù)系統(tǒng)設(shè)置的規(guī)則做出簽到行為。

二.簽到活動設(shè)計(jì)

一個有效的簽到活動，不僅與所選取的簽到種類有關(guān)，還與以下四大因素息息相關(guān)。

1. 方式選取

1)與產(chǎn)品功能相關(guān)

簽到方式與產(chǎn)品功能相關(guān)，可以提高相關(guān)功能的使用率。

Candy Crush在用戶首次進(jìn)入界面的時(shí)候，彈出禮包領(lǐng)取框，禮包內(nèi)存放著的是游戲道具，這些道具能夠幫助用戶通過游戲關(guān)卡，當(dāng)然，這些道具是可以通過購買得到，但正是這種免費(fèi)的獎勵刺激著用戶登錄。

用戶在口碑APP內(nèi)完成簽到后，即可領(lǐng)取紅包。用戶使用口碑時(shí)，可以用對應(yīng)的紅包抵消掉部分金額。

2)與產(chǎn)品功能無關(guān)

簽到功能與產(chǎn)品功能無關(guān)，可以提高APP的日活量。

APP為了提高用戶的活躍度，為APP添加了簽到入口，但用戶完成簽到行為后，可以領(lǐng)取對應(yīng)的獎勵。

在網(wǎng)易云音樂內(nèi)完成簽到，即可領(lǐng)取積分，這些積分與網(wǎng)易云音樂的功能無關(guān)，但是可以在積分商城兌換物品。積分商城所提供的商品多為網(wǎng)易云音樂這一品牌的定制款，用戶為了獲得這些定制商品，會完成簽到行為。

2. 獎勵設(shè)置

獎勵是用戶完成簽到行為的前提條件，值得注意的是，在選擇簽到獎勵時(shí)，必須為你的簽到活動制定指標(biāo)。

推特在對用戶留存率做分析時(shí)，發(fā)現(xiàn)，一個月內(nèi)訪問至少7次的人，會有90%--100%的用戶會留存到下一個月。如果要利用簽到來提高用戶在一個月內(nèi)的訪問次數(shù)，可以將“7”這個數(shù)字作為活動的初級指標(biāo)，當(dāng)然，用戶在當(dāng)月內(nèi)訪問的次數(shù)越多越好。

制定完指標(biāo)之后，根據(jù)指標(biāo)的難易達(dá)成程度，設(shè)置獎品。

網(wǎng)易新聞APP在8月份的時(shí)候上線了「集雞兌壕禮」簽到活動，并設(shè)置了多種玩法。

①簽到即可獲得金幣。

②連續(xù)簽到第三天，所獲得的金幣數(shù)最高，為99，其余時(shí)間獲得金幣數(shù)為15個左右。

③簽到次數(shù)是7的倍數(shù)時(shí)，可獲得大禮包--網(wǎng)易新聞VIP的七天使用權(quán)。

④簽到15-28天，可獲得幸運(yùn)蛋，每顆幸運(yùn)蛋內(nèi)都藏著大獎，用戶可通過打開幸運(yùn)蛋，查詢自己是否中獎。

⑤累計(jì)簽到28天，小雞養(yǎng)成，可打開一個寶箱并領(lǐng)取一個新蛋。

「集雞兌壕禮」活動周期較長，使用了多種簽到方式。由于活動周期較長，該活動也提供了極其豐厚的獎品。獎品價(jià)值從幾十塊到上千不等，部分可使用金幣兌換，而iPhone7等特等獎只能通過打開幸運(yùn)蛋獲得。

獎品的設(shè)置由簽到活動的難易程度決定，越難達(dá)成，越需要高價(jià)值或限量的獎品來支撐活動。

3. 文案的激勵

與登錄簽到相比，用戶對手動簽到行為的感知度會更高，這與簽到時(shí)的文案提示有關(guān)。

打開candy Crush后，顯示當(dāng)日領(lǐng)取到了什么道具，并告知明日還可領(lǐng)取。但未告知用戶第二日的禮包里邊會有什么道具，至于用戶會不會在第二天進(jìn)入領(lǐng)取獎勵，全憑興趣。

在京東APP內(nèi)簽到后，會彈出提示框，告知用戶已領(lǐng)取到當(dāng)天的京豆，并強(qiáng)調(diào)連續(xù)簽到3天的話，就可以獲得京豆大禮包。

在簽到文案上，一般會將最短期內(nèi)能夠獲得的最大利益標(biāo)識出來，以此激勵用戶達(dá)成該目標(biāo)，當(dāng)用戶完成短期目標(biāo)后，又會繼續(xù)激勵用戶，以達(dá)到更大的目標(biāo)。

4. 功能的輔助

人都是有惰性的，再大的獎勵，也抵不過用戶的惰性。因此，很多APP的做簽到功能的時(shí)候，都會設(shè)計(jì)簽到提醒功能。過多的消息提醒對用戶來說，其實(shí)是一種困擾，因此，簽到的消息提醒功能是可以由用戶自己決定是否開啟。

簽到提醒功能對用戶來說是一個輔助功能，對運(yùn)營人員來說，則是一個監(jiān)控活動受歡迎程度的功能，當(dāng)該功能的使用率隨著簽到活動的玩法、獎品的改變而提升時(shí)，則說明該簽到活動受歡迎程度高。所以需要在簽到提醒功能處做好埋點(diǎn)。

看了這么多，不妨使用APP活動運(yùn)營工具活動盒子，開始創(chuàng)建屬于自己的第一個簽到活動。

總結(jié)：簽到活動的存在，不僅能夠提高用戶活躍，還能夠刺激用戶完成指定行為，引導(dǎo)用戶體驗(yàn)到APP的啊哈時(shí)刻，發(fā)現(xiàn)APP的價(jià)值，因而留在APP中，成為APP的忠實(shí)用戶。

作者：活動盒子運(yùn)營社，APP活動運(yùn)營工具，助力APP運(yùn)營，提升用戶活躍、留存和轉(zhuǎn)化;

本文為活動盒子原創(chuàng)，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處：http://www.huodonghezi.com/news-1652.html