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

news2024/9/23 15:21:44

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