基于layui实现简单的计分板页面

使用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>

参考文献:

1\]https://www.layui1.com/doc/index.html \[2\]https://jquery.com/ \[3\]https://www.w3school.com.cn/css/index.asp

相关推荐
武昌库里写JAVA14 天前
SpringCloud与微服务
vue.js·spring boot·sql·layui·课程设计
城南皮卡丘14 天前
基于YOLO8+flask+layui的行人跌倒行为检测系统【源码+模型+数据集】
python·flask·layui
清木Moyu16 天前
layui tree组件回显bug问题,父级元素选中导致子集全部选中
前端·bug·layui
樱花落海洋11116 天前
layui 表格行级 upload 上传操作
前端·javascript·layui
武昌库里写JAVA1 个月前
Java设计模式中的几种常用设计模式
vue.js·spring boot·sql·layui·课程设计
yzmy1 个月前
layui table行级刷新
layui
wangbing11252 个月前
界面规范的其他框架实现-列表-layui实现
前端·javascript·layui
武昌库里写JAVA2 个月前
「mysql」Mac osx彻底删除mysql
vue.js·spring boot·毕业设计·layui·课程设计
武昌库里写JAVA2 个月前
iView Table组件二次封装
vue.js·spring boot·毕业设计·layui·课程设计
NPCZ3 个月前
netframe4.5 的mvc 框架 layui 组件的引用
前端·javascript·layui