JS点击计数存储案例

最新推荐文章于 2023-02-27 16:37:15 发布

Crazy ProMonkey

最新推荐文章于 2023-02-27 16:37:15 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签： javascript html css

本文链接：https://blog.csdn.net/Fleehom/article/details/120070744

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

项目功能要求：

点击页面红色块默认不计数；

点击开始按钮后再点击红色块则开始计数；

点击结束按钮后再点击红色块则不计数；

关闭页面并再次打开页面，界面会显示上次关闭页面时的计数值。

代码设计：

本项目结合了前端页面的设计和JS的使用。具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点击计数</title>
		<style type="text/css">
			*{
				margin: 0 auto;
				padding: 0;
			}
			.d1{
				width: 1000px;
				height: 500px;
				border: 2px solid #000000;
				border-radius: 15px;
				margin: 100px auto;
			}
			.d2{
				display: block;
				height: 100px;
				width: 100%;
				border-bottom: #999999 solid 1px;
			}
			.d3{
				height: 400px;
				width: 100%;
			}
			.d4,.d5{
				display: inline-block;
				height: 100px;
				width: 200px;
			}
			.d6{
				display: inline-block;
				height: 100px;
				width: 590px;
			}
			button{
				display: block;
				margin: 20px auto;
				padding: 0;
				height: 60px;
				width: 120px;
				border: 2px solid #FF0000;
				line-height: 60px;
				text-align: center;
				border-radius: 15px;
			}
			.d9{
				margin: 20px auto;
				padding: 0;
				height: 60px;
				width: 300px;
				line-height: 60px;
				border: 2px solid #FF0000;
				text-align: center;
				border-radius: 15px;
			}
			.d10{
				display: block;
				margin: 60px auto;
				padding: 0;
				height: 200px;
				width: 500px;
				border: 2px solid #4E6EF2;
				border-radius: 15px;
				background-color: #FF0000;
			}
			span{
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class="d1">
			<div class="d2">
				<div class="d4">
					<button type="button" class="d7">开始</button>
				</div>
				<div class="d5">
					<button type="button" class="d8">停止</button>
				</div>
				<div class="d6">
					<span>当前点击次数:</span><span></span>
				</div>
			</div>
			<div class="d3">
				<button type="button" class="d10"></button>
			</div>
		</div>
		<script type="text/javascript">
			let btn = document.getElementsByTagName('button');
			let firstBtn = btn[0];
			let lastBtn = btn[1];
			let sum = btn[2];
			let span = document.getElementsByTagName('span')[1];
			let num=parseInt(localStorage.getItem('num')||0);
			span.innerText = num;
			console.log('当前点击次数:', num);
			firstBtn.onclick = function(){
				console.log('计数开始');
				sum.onclick = function(){
					num++;
					span.innerText = num;
					console.log('当前点击次数:', num);
					localStorage.setItem('num',num)
				}
			}
			lastBtn.onclick = function(){
				console.log('计数结束');
				sum.onclick = function(){
					console.log('当前点击次数:', num);
				}
			}
		</script>
	</body>
</html>

项目结果展示：

第一次运行项目前，此时默认计数为0，且直接点击红色块不会计数：

第一次运行，点击开始按钮后，点击红色块，则会随着点击次数不断加值：

第一次运行结束，点击停止按钮，再点击红色块，则不会增加次数值：

关闭页面，再次运行项目，则还是显示次数7，因为系统存储了项目次数信息：

希望此次分享能给大家带来一些前端网页以及JS知识上的帮助（喜欢小编的关注、点赞走一波呦，后期会不定期分享更多Python、JS和前端相关知识）

Crazy ProMonkey

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS点击计数存储案例

项目功能要求：点击页面红色块默认不计数；点击开始按钮后再点击红色块则开始计数；点击结束按钮后再点击红色块则不计数；关闭页面并再次打开页面，界面会显示上次关闭页面时的计数值。代码设计：本项目结合了前端页面的设计和JS的使用。具体代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>点击计数</title> <sty
复制链接

扫一扫