CSS+HTML+JavaScript 自学入门（一）： 模拟乒乓球赛制

作业描述：
乒乓球对战
粗体
规则

A和B为两个按钮，代表两名运动员。初始比分0:0
进入页面后两人随机一人可以发球，按钮状态为可点击颜色红色，另一按钮失效。
发球，随机发球成果或者失败，失败对方得分并可发球；成功则自己按钮失效，对方按钮有效颜色黄色，可以点击接球
接球，点击按钮随机接中或者不接中，接中则按规则3继续；未接中则对方得分，对方重新发球。
先到6分直接获胜，弹出提示。
点击Reset重新开始比赛

要求

页面布局整齐美观
不使用第三方库

实现代码：

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8">
    <title>乒乓球比赛</title>
<style>
    body 
      {
        background:
            -webkit-linear-gradient(top, transparent 39px, #b5b5b9 40px),
            -webkit-linear-gradient(left, transparent 39px,#b5b5b9 40px)
            ;
        background-size: 40px 40px;
    }
    h1
    {  
        color: blue;
        background-color: red;
        border: 1px solid black;
        text-align: center;

    }
    h2
    {  
        color: blue;       
        text-align: center;

    }
    .btn
    {
        border-radius: 3%;
        color: black;
        width: 50px;
        height: 50px;

    }
    .resetbtn
    {
        border-radius: 3%;
        color: black;
        width: 100px;
        height: 50px;

    }
.divscore
{
width:700px;
height:70px;
border:2px solid gray;
font-family:"宋体";
font-size:20px;
font-style:normal;
font-weight:bold;
text-align:center;
vertical-align:middle
}
.divTable
{
width:334px;
height:400px;
border:4px solid gray;
font-family:"宋体";
font-size:20px;
font-style:normal;
font-weight:bold;
text-align:center;
vertical-align:middle
}
.main{
    text-align: center; /*让div内部文字居中*/
    
    width: 1900px;
    height: 1000px;
    margin: auto;
    position: absolute;
    top: 1000px;
    left: 0;
    right: 0;
    bottom: 0;
}

</style>
  </head>
  <body onload=sendballfirst()>
    <div></div>
    <h1 >世界冠军争霸赛</h1>
    <h2 >游戏规则：</h2>
   
    <button type="reset"class="resetbtn" style="display:block;margin:0 auto"onclick="newgame()">Reset</button>
    <div class="divscore" style="display:block;margin:0 auto">
        <span style="width: 1cm;" id="A1">0</span>
        <span id="A2">:</span>
        <span style="width: 1cm;" id="A3">0</span>
     </div>
     <div class="main">
        <button type="button"class="btn" id="player1"onclick="sendBall(this.id)" style="float: left;display:inline;
        width:10%; " >player1</button>
   
     <div class="divTable" id="tableLeft" style="float:left;    display:inline;     width:25%;">
         </div>
         <div class="divTable" id="tableRight" style="float:left;    display:inline;     width:25%;">
    </div>
      

<button type="button"class="btn" id="player2"onclick="sendBall(this.id)" style="float: left;display:inline;
width:10%; ">player2</button>
</div>

<script>
 var player1score=0;
 var player2score=0;
 var flagGetOrSend=0;



    function newgame()
    {
    document.getElementById("A1").innerHTML=0;
    document.getElementById("A3").innerHTML=0;
    }

    function sendballfirst()
    {
        var sendballFlag=Math.floor(Math.random() * 2);
        if(sendballFlag==0)
        {
         document.getElementById("player1").disabled=false;
         document.getElementById("player2").disabled=true;
         
        }
        else
        {
         document.getElementById("player2").disabled=false;
         document.getElementById("player1").disabled=true;
         
        }
    }

    function sendBall(clicked_id)
    {
     if(clicked_id=="player1")
     {
        if(flagGetOrSend==0)
       {
        document.getElementById("player1").disabled=true;      
        document.getElementById("player2").disabled=false; 
        flagGetOrSend=1;

       }
       else
       {
           getScore();
           flagGetOrSend=0;
       }
     }
      

     else
     { 
        if(flagGetOrSend==0)
       {
        document.getElementById("player1").disabled=false;      
        document.getElementById("player2").disabled=true; 
        flagGetOrSend=1;

       }
       else
       {
           getScore();
           flagGetOrSend=0;
       }

     }
     
     
    }

    function getScore()
    {
        var a=document.getElementById("A1").innerText;
       var b=document.getElementById("A3").innerText;  
       var score=Math.floor(Math.random() * 2);
        if(score==0)
        {
        var num1=++a; 
        document.getElementById('A1').innerHTML=num1;
        document.getElementById("player1").disabled=false;      
        document.getElementById("player2").disabled=true; 
        
     
        }        
    
       else
       {     
        var num2=++b;
        document.getElementById('A3').innerHTML=num2;
        document.getElementById("player1").disabled=true;
        document.getElementById("player2").disabled=false; 
       
        
        
       }       
       var tempnum1=document.getElementById("A1").innerText;
       var tempnum2=document.getElementById("A3").innerText;  

        if(tempnum1==6)
        {
            alert("player1获胜，恭喜player1！");  
           
        }

        if(tempnum2==6)
        {  
            
            alert("player2获胜，恭喜player2！");
            
        }

        


    }

    </script>

    


  </body>
</html>

效果

CSS+HTML+JavaScript 自学入门（一）：模拟乒乓球赛制

LanLan_Guo

引用和评论

纯JS集成报表系列教程7-样式自定义

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

CSS+HTML+JavaScript 自学入门（一）： 模拟乒乓球赛制

LanLan_Guo

引用和评论

纯JS集成报表系列教程7-样式自定义

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

CSS+HTML+JavaScript 自学入门（一）：模拟乒乓球赛制