用户每日签到主要在于实现点击-签到-显示即时时间
本次使用的是原生js实现签到功能,绑定签到按钮点击需要显示的内容,获取网络时间,获取年月日,再对文字进行拼接,最后再进行插入html中的展示内容
下面附上实现代码:
js部分
// 签到按钮
function sign() {
var signgo = '已完成';
document.getElementById('signs').innerHTML = signgo;
document.getElementById("signLogs").style.display = "block";
document.getElementById('signUsers').style.display = "block";
// 获取签到时间
var data = new Date();
var year = data.getFullYear(); //获取年份
var month = data.getMonth() + 1; //获取月份
var today = data.getDate(); //获取当日
var year = year.toString();
var month = month.toString();
var today = today.toString();
var nian = '年';
var yue = '月';
var ri = '日';
var o = '0';
var hours = data.getHours();
var min = data.getMinutes();
var mao = ':';
var signday = year + nian + o + month + yue + o + today + ri; //签到年月日拼接
var signmin = hours + mao + min; // 签到小时分钟
document.getElementById('todays').innerHTML = signday; //更新签到日期
document.getElementById('signMin').innerHTML = signmin; //更新签到时间
}
html部分
<!-- 每日签到 -->
<div class="sign-content">
<!-- 签到时间 -->
div class="sign-time"><span id="todays">请点击签到</span></div>
<!-- 签到按钮 -->
<div class="sign-button">
<div class="sign-button-big">
<button class="sign-button-small" onclick="sign()" id="signs">签到</button>
</div>
</div>
<!-- 签到记录 -->
<div class="sign-logs" style="display: none;" id="signLogs">
<span>已连续签到<span id="signTimes">1</span>次,<a href="../indexMenus/signlogs.html">我的签到记录</a></span>
</div>
<div class="sign-texts">今日签到</div>
<!-- 签到用户 -->
<div class="sign-users" style="display: none;" id="signUsers">
<span><img src="../user/img/userImgs.jpg"></span>
<span>李诗诗</span>
<span id="signMin"></span>
</div>
</div>
css部分
.sign-content {
width: 94vw;
height: 40vh;
margin-left: 3vw;
}
.sign-time {
width: 98%;
height: 8vh;
text-align: center;
line-height: 10vh;
font-size: 22px;
margin-left: 1%;
}
.sign-button {
width: 98%;
height: 15vh;
margin-left: 1%;
font-size: 22px;
text-align: center;
line-height: 11vh;
margin-top: 5%;
}
.sign-button-big {
width: 28%;
height: 73%;
margin: 0 auto;
border-radius: 50%;
background-color: #ffc1c1;
color: white;
padding: 3%;
}
.sign-button-small {
width: 100%;
height: 100%;
margin: 0 auto;
border-radius: 50%;
background-color: #dd514c;
color: white;
border: 0;
cursor: pointer;
}
.sign-button-small:hover {
color: black;
background-color: #ffffff;
}
.sign-logs {
width: 98%;
height: 8vh;
margin-left: 1%;
text-align: center;
font-size: 12px;
line-height: 6vh;
}
.sign-logs>span>a {
color: #436eee;
}
.sign-texts {
width: 98%;
height: 4vh;
margin-left: 1%;
text-align: center;
font-size: 16px;
color: red;
border-bottom: 2px solid #dd514c;
line-height: 4vh;
}
.sign-users {
width: 98%;
height: 7vh;
margin-left: 1%;
padding-top: 2%;
border-bottom: 1px solid #dddddd;
}
.sign-users>span:nth-child(1) {
width: 12vw;
float: left;
margin-left: 5%;
}
.sign-users>span:nth-child(2) {
float: left;
font-size: 16px;
line-height: 6vh;
margin-left: 3%;
}
.sign-users>span:nth-child(3) {
float: right;
font-size: 15px;
line-height: 6vh;
}
.sign-users>span>img {
width: 100%;
height: 100%;
border-radius: 5%;
}
.sign-load {
width: 98%;
height: 4vh;
margin-left: 1%;
margin-top: 8%;
float: left;
}
.sign-load>button {
width: 94%;
height: 100%;
margin-left: 3%;
outline: none;
border: 0;
background-color: #e6e6e6;
}
.sign-load>button:hover {
background-color: #d4d4d4;
}
然后就可以简单的实现了签到功能啦!
用户的签到年月日、签到时间、头像信息等都可以进行展示了。
功能实现展示: