本文主要是介绍基于layui实现简单的计分板页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
使用Layui、HTML、CSS练手做了个简单的计分板页面（虽然HTML和CSS学的很烂，而且页面尺寸变化时对齐还有问题）。布局采用的Layui的栅格系统，同时使用Layui的按钮、弹出层模块设置样式及获取用户输入，同时调用jQuery相关功能获取或设置元素值。主要实现的功能如下：
1）点击主队、客队的文字区域弹出输入框修改文字内容；
2）点击比分区域、局分区域，当前数值自动加1；
3）点击重置得分将比分清零；
4）点击重置比赛将局分、比分清零。
页面截图及全部代码如下所示。后续准备再拿万智牌生命计数器练练手。
<!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.jqueryvar 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>
参考文献：
[1]https://www.layui1.com/doc/index.html
[2]https://jquery.com/
[3]https://www.w3school.com.cn/css/index.asp
这篇关于基于layui实现简单的计分板页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
