作业形容：
乒乓球对战
粗体
规定
- 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>成果