js--手机端签到日历

效果展示：

html代码

<div class="sign-bg"> <!-- header --><div class="header"><div class="row"><div class="col-xs-2 addre"><a class="down-tb" onclick="javascript:history.back(-1)"><img src="data:images/jiantou@w.png" alt="返回" /></a></div><div class="col-xs-8 tittext">签到</div><div class="col-xs-2 othmore"></div></div></div><div class="sign-btn"><div class="sig-bt" data-state="0"><img src="data:images/weiqiandao@2x.png" alt=""></div><p>总积分730名内可领取20积分</p></div>
</div>
<div class="rili"><div class="rltit"><span class="dian"></span>本月签到记录<span class="dian rt"></span></div><div class="rl-main"><div class="week"><span>日</span><span>一</span><span>二</span><span>三</span><span class="active">四</span><span>五</span><span>六</span></div></div><div class="rltit"><span class="dian"></span>签到规则<span class="dian rt"></span></div><div class="rl-main gz"><div class="item-list"><div class="item">签到一天得5积分</div><div class="item">从第八天开始签到给5积分</div><div class="item">每周日签到得10积分</div><div class="item">如果中间间断则按正常10积分</div><div class="item">每月第一周签到7天</div></div></div>
</div>

js代码

<script type="text/javascript">
$(function(){var nowdate = new Date();  //当前日期var days = new Date(nowdate.getFullYear(), (nowdate.getMonth() + 1), 0).getDate();  //本月天数var deforedays = new Date(nowdate.getFullYear(), (nowdate.getMonth()), 0).getDate();  //上月天数var month = nowdate.getMonth() + 1,date = nowdate.getDate(),week = nowdate.getDay();var firstday = new Date();    //本月第一天的日期firstday.setDate(1);var firstdayweek = firstday.getDay();  //本月第一天星期几console.log('今天是' + month + '月' + date + '日，星期' + week);console.log(firstdayweek)//判断星期$('.rl-main .week span').each(function(index,item){if(index == week){$('.rl-main .week span').removeClass('active');$(this).addClass('active');}});//生成日历var dayinfo = '',num = 0,numaft = 0;for(var i = 1; i <= 6; i ++){dayinfo += '<div class="day">'for(var j = 1; j <= 7; j++){if(i == 1 && j == 1){for(var beforeday = firstdayweek-1; beforeday >=0; beforeday --){dayinfo += '<span class="before">';dayinfo += Number(deforedays - beforeday);dayinfo += '</span>'}}else if(i == 1 && j > firstdayweek){if(num == date-1){dayinfo += '<span class="active" id="nowday">' + (++ num) + '</span>'}else {dayinfo += '<span>' + (++ num) + '</span>'}}else if(i > 1 ) {if(num == days){dayinfo += '<span class="before">' + (++ numaft) + '</span>'}else {if(num == date-1){dayinfo += '<span class="active" id="nowday">' + (++ num) + '</span>'}else {dayinfo += '<span>' + (++ num) + '</span>'}}}}dayinfo += '</div>'}$('.rl-main .week').after(dayinfo)console.log(dayinfo);//签到功能$('.sign-bg .sign-btn .sig-bt').click(function(){var state = $(this).attr('data-state');if(state == 0){$(this).attr('data-state','1');$(this).addClass('rotate');$(this).children('img').attr('src','images/yiqiandao@2x.png');setTimeout(function(){$('#nowday').addClass('yqd');alert("恭喜您，签到成功");},500);     }else {alert('亲，您已经签过到了！')}});
});
</script>

下载完整源代码：点击这里

js--手机端签到日历相关推荐

JS手机端移动端长按longtap事件
JS手机端移动端长按longtap事件移动端并没有所谓的longtap事件,即长按事件.但是,有时候会用到,只能借助touchstart.touchmove.touchend三个事件以及延迟setTi ...
zepto.js手机端开宝箱动画js特效
下载地址 zepto.js实现的手机端开宝箱动画特效 dd:
JS 手机端摇一摇苹果IOS13.3高版本处理
苹果IOS13.3高版本需要动作与方向授权以后才能进行摇一摇,授权过程必须有点击才能授权.在进入需要摇一摇的页面的时候可以进行授权,在进行提示点击我用的是手机端swal插件进行提示点击授权. 拒绝授 ...
手机端自定义日历组件（vue）
文章目录一.HTML 二.JS 三.CSS 4.最终效果可复制查看效果.该代码为完整代码,同时,里面返回的字段可根据自己的业务需求进行更改. 关键字段:dataList是后台传过来需要显示在日历上 ...
js手机端时间区间_js 时间区间
对于页面加载时间的测试,简单的需求(仅仅是看看请求时间消耗分布)可以通过开发者工具或者Http Watch了解,但如果是想对页面加载进行优化,进行深入了解的(例如:渲染过程中的CPU开销.网络传输时间 ...
js 手机端网站底部悬浮html广告代码
首先底部悬浮html 代码如下,这里因为我自己的需求,所以改成了轮播底部悬浮代码  <style> @media screen and (max- ...
js手机端时间区间_js根据时间范围生成时间刻度数据
前言: 使用d3绘制时间轴图表,不可避免的涉及到动态变动时间刻度,根据业务需求需要调整查看不同的时间粒度数据.如果后台数据非连续数据,需要前端自己处理的话,就得自己根据时间范围创建时间刻度数据. 一. ...
js手机端下拉刷新效果demo效果示例（整理）
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
js 手机端触发事事件、javascript手机端/移动端触发事件
处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

js--手机端签到日历

效果展示：

html代码

js代码

js--手机端签到日历相关推荐

最新文章

热门文章