使用Layui、HTML、CSS练手做了个简单的计分板页面（虽然HTML和CSS学的很烂，而且页面尺寸变化时对齐还有问题）。布局采用的Layui的栅格系统，同时使用Layui的按钮、弹出层模块设置样式及获取用户输入，同时调用jQuery相关功能获取或设置元素值。主要实现的功能如下：
1）点击主队、客队的文字区域弹出输入框修改文字内容；
2）点击比分区域、局分区域，当前数值自动加1；
3）点击重置得分将比分清零；
4）点击重置比赛将局分、比分清零。
页面截图及全部代码如下所示。后续准备再拿万智牌生命计数器练练手。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电子记分牌</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js"></script>
<style>
.score{
height: 200px;
width: 200px;
background-color:lightskyblue;
color: red;
border-radius:20px;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
font-size: 150px;
text-align: center;
cursor: pointer;
}
.score-left{
margin-left: auto;
}
.score-right{
margin-right: auto;
}
.match{
width: 50px;
background-color:lightgreen;
margin-top: 50px;
font-weight: bold;
font-size: 30px;
text-align: center;
cursor: pointer;
}
.match-left{
left: 0px;
}
.match-right{
margin-left: auto;
}
.player{
font-size: 20px;
cursor: pointer;
}
.player-left{
margin-left: 60%;
}
.player-right{
margin-left: 40%;
}
</style>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-xs6">
<div class="layui-row">
<div class="player player-left">主队</div>
</div>
<div class="layui-row">
<div class="layui-col-xs9">
<div class="score score-left">0</div>
</div>
<div class="layui-col-xs1">
<div class="match match-left">0</div>
</div>
</div>
</div>
<div class="layui-col-xs6">
<div class="layui-row">
<div class="player player-right">客队</div>
</div>
<div class="layui-row">
<div class="layui-col-xs3">
<div class="match match-right">0</div>
</div>
<div class="layui-col-xs9">
<div class="score score-right">0</div>
</div>
</div>
</div>
</div>
<div class="layui-row" style="margin-left: 40%;">
<div class="layui-btn-container">
<button class="reset-point layui-btn">重置局分</button>
<button class="reset-game layui-btn">重置比赛</button>
</div>
</div>
<div class="layui-row" style="text-align: center;">
鼠标左键单击比分区域增加分数
</div>
</div>
<script>
layui.use('layer', function(){
var $ = layui.jquery
var layer = layui.layer;
$('.player-left').on('click', function(){
layer.prompt({title: '输入主队名称'}, function(pass, index){
layer.close(index);
$('.player-left').html(pass)
});
});
$('.player-right').on('click', function(){
layer.prompt({title: '输入客队名称'}, function(pass, index){
layer.close(index);
$('.player-right').html(pass)
});
});
$('.score-left').on('click', function(){
$('.score-left').html(parseInt($('.score-left').html())+1)
});
$('.score-right').on('click', function(){
$('.score-right').html(parseInt($('.score-right').html())+1)
});
$('.match-left').on('click', function(){
$('.match-left').html(parseInt($('.match-left').html())+1)
});
$('.match-right').on('click', function(){
$('.match-right').html(parseInt($('.match-right').html())+1)
});
$('.reset-point').on('click', function(){
$('.score-left').html(0)
$('.score-right').html(0)
});
$('.reset-game').on('click', function(){
$('.score-left').html(0)
$('.score-right').html(0)
$('.match-left').html(0)
$('.match-right').html(0)
});
}
)
</script>
</body>
</html>参考文献：