Document

HTML+CSS+JS实现简易打卡

2023-06-21
dfer
361
html css javascript

本人小白，今天刚学习js，自己摸索着做了一个很特别的打卡器，功能勉强实现，可能方法不是很好，代码也很乱，欢迎各位大佬指正。

每周按六天工作日进行计算，每打一次卡进度条就会涨一格，每过一周，V等级就会加一。

ps：点击打卡按钮之后按钮会显示已打卡，并且变色，再次点击会提示今天已经打卡，如果想继续打卡，可以点击头像，打卡按钮就会恢复初始样式，可以继续进行打卡。

效果图

HTML

<div style="margin: 100px;">
	<div class="border" onclick="tran()">
		<h1 id="gold">V1</h1>
	</div>
	<div class="box">
	    <h1>鬼知道娶什么名稚</h1>
	    <div class="greenBlock">
	        <div id="day1" style="display: block;"></div>
	        <div id="day2" style="display: none;"></div>
	        <div id="day3" style="display: none;"></div>
		    <div id="day4" style="display: none;"></div>
		    <div id="day5" style="display: none;"></div>
		    <div id="day6" style="display: none;"></div>
	    </div>
	    <span id="dayNum">7</span>
	</div>
	<button id="btn" onclick="level()">打卡</button>
</div>

CSS

<style>
	.border {
		border-radius: 50%;
		border: 1px solid black;
		width: 180px;
		height: 180px;
		float: left;
		background-image: url("img/6E18A9BCA12831AF1959198224E9C74D.jpg");
		background-size: 180px;
	}

	#gold {
		width: 50px;
		height: 50px;
		float: left;
		margin-left: 122px;
		margin-top: 128px;
		font-size: 44px;
		color: gold;
		text-shadow: 1px 1px 1px #A52A2A;
	}

	.greenBlock {
		width: 300px;
		height: 50px;
		background-color: darkgray;
		border: 1px solid black;
		float: left;
		margin-top: 1px;
		margin-left: 20px;
	}

	.greenBlock div {
		width: 50px;
		height: 50px;
		background-color: greenyellow;
		float: left;
	}

	#btn {
		width: 100px;
		height: 50px;
		margin: 70px;
		font-size: 20px;
		color: white;
		background-color: black;
	}
			
	#dayNum {
		margin-left: 5px;
		float: left;
		margin-top: 35px;
	}
			
	.box {
		float: left;
		width: 350px;
		height: 200px;
	}
			
	.box h1 {
		margin-top: 30px;
		margin-left: 15px;
		font-size: 40px;
	}
</style>

JS

<script>
	var day = 7;
	var num = 1;
	var flag = 0;
	const gold = document.getElementById("gold")
	const day1 = document.getElementById("day1")
	const day2 = document.getElementById("day2")
	const day3 = document.getElementById("day3")
	const day4 = document.getElementById("day4")
	const day5 = document.getElementById("day5")
	const day6 = document.getElementById("day6")
	const dayNum = document.getElementById("dayNum")
	const btn = document.getElementById("btn")

	// console.log(gold)
	// console.log(day1)

	function level() {
		if (flag == 0) {
	      	day++;
			// console.log(day)
			dayNum.innerHTML = day
			if (day % 6 == 0) {
				num++
				gold.innerHTML = "V" + num
			}
			if ((day - 2) % 6 == 0) {
				day2.style.display = "block"
			}
			if ((day - 3) % 6 == 0) {
				day3.style.display = "block"
			}
			if ((day - 4) % 6 == 0) {
				day4.style.display = "block"
			}
			if ((day - 5) % 6 == 0) {
				day5.style.display = "block"
			}
			if ((day - 6) % 6 == 0) {
				day6.style.display = "block"
			}
			if (day == num * 6 + 1) {
				day2.style.display = "none"
				day3.style.display = "none"
				day4.style.display = "none"
				day5.style.display = "none"
				day6.style.display = "none"
			}
			flag = 1;
			btn.style.backgroundColor = "#838B8B"
			btn.innerHTML = "已打卡"
		} else {
			alert("今天你已经打过卡了哦")
		}
	}

	function tran() {
		flag = 0;
		btn.style.backgroundColor = "black"
		btn.innerHTML = "打卡"
	}
</script>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<style>
			.border {
				border-radius: 50%;
				border: 1px solid black;
				width: 180px;
				height: 180px;
				float: left;
				background-image: url("img/6E18A9BCA12831AF1959198224E9C74D.jpg");
				background-size: 180px;
			}

			#gold {
				width: 50px;
				height: 50px;
				float: left;
				margin-left: 122px;
				margin-top: 128px;
				font-size: 44px;
				color: gold;
				text-shadow: 1px 1px 1px #A52A2A;
			}

			.greenBlock {
				width: 300px;
				height: 50px;
				background-color: darkgray;
				border: 1px solid black;
				float: left;
				margin-top: 1px;
				margin-left: 20px;
			}

			.greenBlock div {
				width: 50px;
				height: 50px;
				background-color: greenyellow;
				float: left;
			}

			#btn {
				width: 100px;
				height: 50px;
				margin: 70px;
				font-size: 20px;
				color: white;
				background-color: black;
			}
			
			#dayNum {
				margin-left: 5px;
				float: left;
				margin-top: 35px;
			}
			
			.box {
				float: left;
				width: 350px;
				height: 200px;
			}
			
			.box h1 {
				margin-top: 30px;
				margin-left: 15px;
				font-size: 40px;
			}
		</style>
		<div style="margin: 100px;">
			<div class="border" onclick="tran()">
				<h1 id="gold">
					V1
				</h1>
			</div>
			<div class="box">
				<h1>鬼知道娶什么名稚</h1>
				<div class="greenBlock">
					<div id="day1" style="display: block;"></div>
					<div id="day2" style="display: none;"></div>
					<div id="day3" style="display: none;"></div>
					<div id="day4" style="display: none;"></div>
					<div id="day5" style="display: none;"></div>
					<div id="day6" style="display: none;"></div>
				</div>
				<span id="dayNum">7</span>
			</div>
			<button id="btn" onclick="level()">打卡</button>
		</div>

		<script>
			var day = 7;
			var num = 1;
			var flag = 0;
			const gold = document.getElementById("gold")
			const day1 = document.getElementById("day1")
			const day2 = document.getElementById("day2")
			const day3 = document.getElementById("day3")
			const day4 = document.getElementById("day4")
			const day5 = document.getElementById("day5")
			const day6 = document.getElementById("day6")
			const dayNum = document.getElementById("dayNum")
			const btn = document.getElementById("btn")

			// console.log(gold)
			// console.log(day1)



			function level() {
				if (flag == 0) {
					day++;
					// console.log(day)
					dayNum.innerHTML = day
					if (day % 6 == 0) {
						num++
						gold.innerHTML = "V" + num
					}
					if ((day - 2) % 6 == 0) {
						day2.style.display = "block"
					}
					if ((day - 3) % 6 == 0) {
						day3.style.display = "block"
					}
					if ((day - 4) % 6 == 0) {
						day4.style.display = "block"
					}
					if ((day - 5) % 6 == 0) {
						day5.style.display = "block"
					}
					if ((day - 6) % 6 == 0) {
						day6.style.display = "block"
					}
					if (day == num * 6 + 1) {
						day2.style.display = "none"
						day3.style.display = "none"
						day4.style.display = "none"
						day5.style.display = "none"
						day6.style.display = "none"
					}
					flag = 1;
					btn.style.backgroundColor = "#838B8B"
					btn.innerHTML = "已打卡"
				} else {
					alert("今天你已经打过卡了哦")
				}
			}

			function tran() {
				flag = 0;
				btn.style.backgroundColor = "black"
				btn.innerHTML = "打卡"
			}
		</script>
	</body>
</html>

上一篇：盲盒源码h5|交友盲

下一篇： HTML与CSS