整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇文章講到HTML炫酷的主流框架，今天小明就介紹一個HTML5功能的實現代碼
Introduce(介紹)
用戶簽到的H5例子（css+jquery，無圖片），由于網上找的的用戶簽到例子都不好，要不就是好多圖片組成的，要不就大量冗余代碼，所以特意做了個簽到界面（移動端）。
User sign sample page for mobile using h5 which only use css + jquery + html.
一些關鍵的地方
這個功能的編寫思路是，先構建日期和簽到相關數據，然后從服務端獲取數據，并對原有數據進行更改，最后進行渲染。
這樣子很好的擺脫了邏輯比較凌亂的問題，并且可以直接將這些數據用 vue.js 來掛載（本文沒有這樣做）。
生成日期數據
//生成日期數據
function buildData() {
var da = {
dates: [],//日期數據，從1號開始
current: '',//當前日期
monthFirst: 1,//獲取當月的1日等于星期幾
month: 0,//當前月份
days: 30,//當前月份共有多少天
day: 0,//今天幾號了
isSigned: false,//今天是否已經簽到
signLastDays:3,//連續簽到日子
signToday: function () {
this.isSigned = true;
this.dates[this.day].isSigned = true;
},
};
var ds = [];
//初始化日期數據
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();//獲取當前月的天數
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,//時間已過去
};
ds[i] = o;
}
da.dates = ds;
return da;
}
有了數據之后，就可以將數據轉換為界面了
//渲染數據
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;
}
//填充數字部分
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);
}
//計算是否需要添加最后一行
if ((st + da.days + 1) / 7 > rowcount)
root.appendChild(tr);
}
//構建日期數據
var da = buildData();
//渲染
renderData(da);
以上就是本篇文章的全內容了
學習從來不是一個人的事情，要有個相互監督的伙伴，想要學習或交流前端問題的小伙伴可以私信回復小明“學習” 獲取資料，一起學習！
簽到，是一種人類行為上的規束，常常被用于一些會議和活動的中，經常被用來作為獎懲的依據。今天我就針對UI設計中簽到頁面如何設計進行簡單的說明。
源|活動盒子-APP活動運營工具(huodonghezi.com)
很多APP運營人員在工作過程中，都會遇到如下兩個問題：
1.用戶來到一款新的APP中，僅體驗部分產品功能，就退出并卸載APP。
2.用戶留存率較低，用戶使用APP頻次不高。
最近，盒子菌在《增長黑客：如何低成本實現爆發式成長》找到了解決這兩大問題的方法，書中說到，只有當用戶發現產品的價值，即體驗到啊哈時刻，才會長久地留下來。所以，當產品已經具備了為用戶提供“啊哈體驗”的元素，運營人員需要做的事情就是更有效地引導人們發現它。
簽到這種活動，正是引導用戶發現產品價值的用戶激勵方式。
用戶完成簽到行為之后，即可獲得金幣、積分、成長值等其他獎勵。用戶為了會得到這些獎勵，會根據平臺的要求，做出簽到行為。
簽到的方式有兩種，一種是登錄，另外一種是需要用戶點擊簽到按鈕。
1.登錄=簽到，多見于游戲APP中，用戶打開APP，直接出現提示框，告知用戶已領取當日獎勵。
2.手動簽到：用戶點擊簽到按鈕簽到，這種簽到方式的使用范圍更廣。
簽到共有三種種類，每日簽到、累計簽到、連續簽到。
1.每日簽到：用戶完成平臺指定的簽到行為，即可獲得獎勵，門檻較低且無累計。
2.累計簽到：用戶在某一段時間內簽到總數，達到規定次數即認為簽到成功，可間斷。
3.連續簽到：用戶在一段時間內連續完成簽到，不可間斷。
以上三種簽到種類中，每日簽到門檻最低，其次是累計簽到，連續簽到門檻最高。在設計簽到活動時，門檻越高，獎品越豐厚，用戶為了得到更高價值的獎品，會根據系統設置的規則做出簽到行為。
一個有效的簽到活動，不僅與所選取的簽到種類有關，還與以下四大因素息息相關。
1. 方式選取
1)與產品功能相關
簽到方式與產品功能相關，可以提高相關功能的使用率。
Candy Crush在用戶首次進入界面的時候，彈出禮包領取框，禮包內存放著的是游戲道具，這些道具能夠幫助用戶通過游戲關卡，當然，這些道具是可以通過購買得到，但正是這種免費的獎勵刺激著用戶登錄。
用戶在口碑APP內完成簽到后，即可領取紅包。用戶使用口碑時，可以用對應的紅包抵消掉部分金額。
2)與產品功能無關
簽到功能與產品功能無關，可以提高APP的日活量。
APP為了提高用戶的活躍度，為APP添加了簽到入口，但用戶完成簽到行為后，可以領取對應的獎勵。
在網易云音樂內完成簽到，即可領取積分，這些積分與網易云音樂的功能無關，但是可以在積分商城兌換物品。積分商城所提供的商品多為網易云音樂這一品牌的定制款，用戶為了獲得這些定制商品，會完成簽到行為。
2. 獎勵設置
獎勵是用戶完成簽到行為的前提條件，值得注意的是，在選擇簽到獎勵時，必須為你的簽到活動制定指標。
推特在對用戶留存率做分析時，發現，一個月內訪問至少7次的人，會有90%--100%的用戶會留存到下一個月。如果要利用簽到來提高用戶在一個月內的訪問次數，可以將“7”這個數字作為活動的初級指標，當然，用戶在當月內訪問的次數越多越好。
制定完指標之后，根據指標的難易達成程度，設置獎品。
網易新聞APP在8月份的時候上線了「集雞兌壕禮」簽到活動，并設置了多種玩法。
①簽到即可獲得金幣。
②連續簽到第三天，所獲得的金幣數最高，為99，其余時間獲得金幣數為15個左右。
③簽到次數是7的倍數時，可獲得大禮包--網易新聞VIP的七天使用權。
④簽到15-28天，可獲得幸運蛋，每顆幸運蛋內都藏著大獎，用戶可通過打開幸運蛋，查詢自己是否中獎。
⑤累計簽到28天，小雞養成，可打開一個寶箱并領取一個新蛋。
「集雞兌壕禮」活動周期較長，使用了多種簽到方式。由于活動周期較長，該活動也提供了極其豐厚的獎品。獎品價值從幾十塊到上千不等，部分可使用金幣兌換，而iPhone7等特等獎只能通過打開幸運蛋獲得。
獎品的設置由簽到活動的難易程度決定，越難達成，越需要高價值或限量的獎品來支撐活動。
3. 文案的激勵
與登錄簽到相比，用戶對手動簽到行為的感知度會更高，這與簽到時的文案提示有關。
打開candy Crush后，顯示當日領取到了什么道具，并告知明日還可領取。但未告知用戶第二日的禮包里邊會有什么道具，至于用戶會不會在第二天進入領取獎勵，全憑興趣。
在京東APP內簽到后，會彈出提示框，告知用戶已領取到當天的京豆，并強調連續簽到3天的話，就可以獲得京豆大禮包。
在簽到文案上，一般會將最短期內能夠獲得的最大利益標識出來，以此激勵用戶達成該目標，當用戶完成短期目標后，又會繼續激勵用戶，以達到更大的目標。
4. 功能的輔助
人都是有惰性的，再大的獎勵，也抵不過用戶的惰性。因此，很多APP的做簽到功能的時候，都會設計簽到提醒功能。過多的消息提醒對用戶來說，其實是一種困擾，因此，簽到的消息提醒功能是可以由用戶自己決定是否開啟。
簽到提醒功能對用戶來說是一個輔助功能，對運營人員來說，則是一個監控活動受歡迎程度的功能，當該功能的使用率隨著簽到活動的玩法、獎品的改變而提升時，則說明該簽到活動受歡迎程度高。所以需要在簽到提醒功能處做好埋點。
看了這么多，不妨使用APP活動運營工具活動盒子，開始創建屬于自己的第一個簽到活動。
總結：簽到活動的存在，不僅能夠提高用戶活躍，還能夠刺激用戶完成指定行為，引導用戶體驗到APP的啊哈時刻，發現APP的價值，因而留在APP中，成為APP的忠實用戶。
作者：活動盒子運營社，APP活動運營工具，助力APP運營，提升用戶活躍、留存和轉化;
本文為活動盒子原創，商業轉載請聯系作者獲得授權，非商業轉載請注明出處：http://www.huodonghezi.com/news-1652.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
