html5实现打卡签到,签到功能如何实现

　　Introduce(介绍)

　　用户签到的H5例子(css jquery，无图片)，因为网上找到的用户签到的例子都不好，或者是由很多图片或者是很多冗余代码组成的，所以专门做了一个签到界面(移动端)。

　　用户使用h5签署移动示例页面，该页面仅使用css jquery html。

　　演示

　　https://fallstar0.github.io/SignSample/

　　镜头(截图)

　　一些关键的地方

　　写这个函数的思路是先构造日期和签到相关数据，然后从服务器获取数据，改变原始数据，最后渲染。

　　这是摆脱逻辑凌乱问题的好方法，可以直接用vue.js挂载这些数据(本文没有这么做)。

　　生成日期数据

　　//生成日期数据functionbuilddata(){ var da={ dates:[]，//日期数据，从1号开始当前：，//当前日期monthFirst: 1，//获取当前月份的1号等于星期几，月份：0，//当前月份天数：30，//当前月份有多少天？day: 0，//今天是几号？isSigned: false，//今天入住了吗？3，//连续入住天数今日签：function () {this。Issigned=true这一天。isSigned=true}, };var ds=[]；//初始化日期数据var dt=new Date()；电流=dt。ToString(yyyy年M月D日)；da.monthFirst=新日期(dt.getFullYear()，dt.getMonth()，1)。getDay()；da . month=dt . getmonth()1；da.days=新日期(dt.getFullYear()，parseInt(da.month)，0)。getDate()；//获取当月天数da . day=dt . getdate()；for(var I=1；I da . days 1；I) {var o={issued: false，//是否已签到num: i，//日期是Today: i==da.day，//今天是否是Pass: i da.day，//时间已过}；ds[I]=o；} da.dates=ds返回da；}

　　一旦有了数据，就可以把它转换成一个接口。

　　//渲染数据函数渲染数据(da){ var符号天数=文档。getelementbyid( sp标志天数)；签署日期。innertext=da。签署最后几天；var root=文档。getelementbyid(“sign table”)；根。innerhtml=var tr，TD；var ST=da . monthfirstvar dates=da . dates var行计数=0；//最多6行for(var I=0；i 42i ) { if (i % 7==0) { //如果没有日期了，中断如果(I(第一天))破；tr=文件。createelement( tr )；深色的；根。appendchild(tr)；rowcount} //前面或后面的空白如果(i st ！日期[I-ST 1]){ TD=文档。createelement(“TD”)；TD。innerhtml= div class= sign-blank span/span/div ；tr。appendchild(TD)；继续；} //填充数字部分var d=dates[I-ST 1]；TD=文件。createelement(“TD”)；var TD CSS=if(d . isto day)TD CSS= sign-today ；else if(d . ispass)TD CSS= sign-pass ；else TD CSS= sign-future ；if(d .已签名){ TD CSS= sign-signed TD CSS；TD。innerhtml= div class= TD CSS 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，00，35 //SVG/div ；} else { TD CSS= sign-unsign TD CSS；TD。innerhtml= div class= TD CSS span d . num /span/div ；} tr。appendchild(TD)；} //计算是否需要添加最后一行如果((ST大。days 1)/7 rowcount)根。appendchild(tr)；} //构建日期数据var da=build data()；//渲染渲染数据(da)；

　　版权

　　作者fallstar0@qq.com

　　https://github.com/FallStar0/SignSample

　　https://gitee.com/fallstar/SignSample

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读