签到界面设计：Html+Css+JS

1、效果图

html

<div class="riqi"><div class="yd">2020年6月</div><ul id='rili'>     </ul><div class="days">   <p>您已累计签到{$sign.signday}天</p><p><a href="{:U('signlist')}">签到记录</a></p>       </div></div>

.body_main2 .body .riqi{width: 92%;margin: 0 4%;height: 23rem;background: #f3f3ed;margin-bottom: 10px;border-radius:16px;
}
.body_main2 .body .riqi .yd{width: 92%;padding-left: 4%;padding-top: 15px;font-size:18px;height: 2rem;
}
.body_main2 .body .riqi ul{margin:0 auto;width:100%;height:16.7rem;overflow:hidden}
.body_main2 .body .riqi ul li{display:flex;justify-content:center;align-items:center;float:left;position:relative;width:14%;height:03.4rem;line-height:0.85rem;text-align:center;font-size:0.28rem;color:#000}
.body_main2 .body .riqi ul li p{width:2.24rem;height:2.24rem;line-height:2.24rem;text-align:center;border-radius:100%}
.body_main2 .body .riqi ul li p i{position:absolute;top:0.34rem;left:-.145rem;background:rgb(255,255,255);width:1.68rem;height:0.72rem;right:unset}
.body_main2 .body .riqi ul li p.succe{background:rgba(248,190,69,1);color:#fff}
.body_main2 .body .riqi ul li p.succe i{position:absolute;top:1.46rem;right:-0.8rem;background:rgba(248,190,69,1);width:1.6rem;height:0.48rem;left:unset}
.body_main2 .body .riqi ul li p.failed:after{content:"";color:red;position:absolute;top:-.2rem;right:0;font-weight:bold}
.body_main2 .body .riqi .days{margin: 10px 15px;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;
}
.body_main2 .body .riqi .days p{font-size: 16px;color: red;
}
.body_main2 .body .riqi .days p a{font-size: 16px;color: blue;
}.body_main2 .body .sign{width: 92%;margin: 0 4%;border:1px solid #a1a1a1;height: 40px;border-radius:25px;background: #458dde;text-align: center;font-size: 20px;line-height: 40px;color: white;
}

<script>// 显示日历function isLeap(year) {return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;}a();function a(){//获取当前时间var nowYear = 2020; <?php echo $stry1 ?>;var nowMonth = 6 ;// <?php echo $strm1 ?>// var nowDay = 31;// var nowweekDay = 2;// console.log(nowYear);  //30 var signDate = [1,2,3,4,6,7,8,9,15];//从后台获取签到日期// var signDate =<?php echo $signDate ?>;console.log(signDate);var days_per_month = new Array(31, 28 + isLeap(nowYear), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //每个月的天数// console.log(days_per_month);// var dateHtml = "<li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li>日</li>";var dateHtml = "<li></li>";// var blank = nowweekDay - (nowDay % 7)+1;// var dateHtmlp = "";// if(blank<0) blank = 7 + blank; // for(var i = 0; i < blank; i++) {//     dateHtml += "<li></li>";// }for(var j = 0; j < days_per_month[nowMonth - 1]; j++) { if(signDate.length>=1){ //有签到历史for(var n = 0; n < signDate.length; n++) {if(j == (signDate[n]-1)) {dateHtmlp = "<p class='succe'>" + (j+1) + "</p>";break} else {if(j < signDate[signDate.length - 1]) {dateHtmlp = "<p class='failed'>" + (j+1) + "</p>";} else {dateHtmlp = "<p>" + (j+1) + "</p>";}}}}else{dateHtmlp = "<p class='failed'>" + (j+1) + "</p>";   // 本月每天都没有签到       }        dateHtml += "<li>" + dateHtmlp + "</li>";}// console.log(dateHtml);$('#rili').html(dateHtml);}
</script>

签到界面设计：Html+Css+JS相关推荐

韩顺平轻松搞定网页设计(html+css+js),韩顺平轻松搞定网页设计方案(html+css+js)之javascript现场授课笔记(完整版).doc...
2011韩顺平轻松搞定网页设计(html+css+js)之 javascript现场授课笔记(完整版) 视频18整和19的前半部分不用看 Javascript的基本介绍 JS是用于WEB开发的脚本语言 ...
个人主页设计(HTML+CSS+JS)
个人主页设计(HTML+CSS+JS) github链接:点此跳转(https://github.com/Chien-W/Personal-home-page) CSDN下载链接:点此跳转样例跳转: ...
html百度首页制作视频,韩顺平轻松搞定网页设计 html+css+js
韩顺平老师的教程影响着一代又一代的学子们,他的视频教程确实做的很经典,不论是java.php还是网页设计,都有出彩的地方.这里,小编给大家分享韩顺平老师的轻松搞定网页设计教程,绝对完整,全部存于百度网 ...
网页前端大作业主界面（Html+CSS+JS+Axios）
介绍一下本代码块实现的效果,本代码快只实现了仿照游戏平台设计的一个网页,导航栏中的跳转页面以及物品购物车的增删查改均有实现,需要的话可私聊 .表单验证区域未添加具体JS代码,单独增加了登录验证界面,喜 ...
流程图设计(html+css+js)
流程图设计demo,不依赖任何插件,纯css+html+js编写,可随意增加条件和流程.效果如图所示下载资源:https://download.csdn.net/download/qq_377428 ...
html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
Web前端期末大作业--响应式健身会所网页设计(HTML+CSS+JS）实现
临近期末, 你还在为HTML网页设计结课作业,HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在专栏
大学生游戏静态HTML网页设计 (HTML+CSS+JS仿英雄联盟网站15页)
如何制作web期末网页设计 HTML+CSS+JS茶叶文化网站制作

签到界面设计：Html+Css+JS

签到界面设计：Html+Css+JS相关推荐

最新文章

热门文章