百万前端之html+css+JavaScript实现每日签到功能

 用户每日签到主要在于实现点击-签到-显示即时时间

本次使用的是原生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;
		}

然后就可以简单的实现了签到功能啦！

用户的签到年月日、签到时间、头像信息等都可以进行展示了。

功能实现展示：