项目功能要求：
点击页面红色块默认不计数；
点击开始按钮后再点击红色块则开始计数；
点击结束按钮后再点击红色块则不计数；
关闭页面并再次打开页面，界面会显示上次关闭页面时的计数值。
代码设计：
本项目结合了前端页面的设计和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和前端相关知识）