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 >请点击签到
	    
	    
	    
	    签到
    



    已连续签到1次，我的签到记录

今日签到


        
        李诗诗
        
	

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;
		}

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

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

功能实现展示：