HTML 篮球比赛计时记分器
效果图
程序较短，为方便使用，html，css，js，写在了一起，很多东西写着才添加
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>篮球计时计分器title>
<style>
#parent{
position: relative;
}
/* 计时 */
#parent div{
border: 1px solid black;
color: black;
display: inline-block;
text-align: center;
}
div:hover{
cursor: pointer;
}
#parent .big{
height: 500px;
width: 300px;
font-size: 240px;
line-height: 500px;
background-color: yellow;
}
#minute{
position: absolute;
top:50px;
left: 400px;
border-radius: 50px 0 0 0;
}
#second{
position: absolute;
top:50px;
left: 700px;
}
#parent .middle{
height: 250px;
width: 250px;
font-size: 200px;
line-height: 250px;
position: absolute;
top: 300px;
left: 1001px;
background-color: yellow;
}
#parent .small{
height: 95px;
width: 136.5px;
font-size: 27px;
line-height: 100px;
background-color: grey;
}
#parent .contain{
position: absolute;
top: 554px;
left: 400px;
}
#parent #start{
background-color: yellow;
}
/* 计分 */
.score{
width: 300px;
height: 560px;
border: 1px solid black;
position: absolute;
top: 100px;
overflow: hidden;
}
.team{
height: 100px;
overflow: hidden;
border: 1px solid black;
border-radius: 3px 3px 0 0;
}
.team input{
height: 100px;
width: 300px;
font-size: 50px;
text-align: center;
}
#score1{
left: 105px;
/* border-radius: 100px 0 0 0; */
}
#score2{
left: 1262px;
/* border-radius: 0 100px 0 0; */
}
.score11{
width: 300px;
height: 360px;
background-color: purple;
color: white;
font-size: 180px;
text-align: center;
line-height: 360px;
}
.add{
width: 53px;
height: 98px;
display: inline-block;
border: 1px solid black;
background-color: yellow;
color: black;
font-size: 25px;
text-align: center;
line-height: 98px;
}
.less{
background-color: grey;
}
#spare{
width: 247px;
height: 247px;
position: absolute;
left: 1011px;
top: 58px;
background-color: green;
border: 1px solid black;
border-radius: 0 50px 0 0;
font-size: 55px;
color: black;
text-align: center;
line-height: 247px;
}
style>
head>
<body>
<div id="spare">GOdiv>
<div id="score1" class="score">
<div class="team">
<input type="text" placeholder="输入客队名">
div>
<div class="score11">00div>
<div>
<div class="add">+3div>
<div class="add">+2div>
<div class="add">+1div>
<div class="add less">-1div>
<div class="add less">清零div>
div>
div>
<div id="score2" class="score">
<div class="team">
<input type="text" placeholder="输入主队名">
div>
<div class="score11">00div>
<div>
<div class="add">+3div>
<div class="add">+2div>
<div class="add">+1div>
<div class="add less">-1div>
<div class="add less">清零div>
div>
div>
<div id="parent">
<div id="minute" class="big">12div>
<div id="second" class="big">00div>
<div id="second24" class="middle">24div>
<div class="contain">
<div id="reset12" class="small">重置时间div>
<div id="start" class="small">开始div>
<div id="timeout" class="small">暂停div>
<div id="change" class="small">变更球权div>
<div id="reset24" class="small">重置24秒div>
<div id="reset14" class="small">重置14秒div>
div>
div>
<script>
var start=document.getElementById("start")
var timeout=document.getElementById("timeout")
var minute=document.getElementById("minute")
var second=document.getElementById("second")
var second24=document.getElementById("second24")
var reset12=document.getElementById("reset12")
var reset24=document.getElementById("reset24")
var reset14=document.getElementById("reset14")
var change=document.getElementById("change")
var spare=document.getElementById("spare")
var time_sum=720;
var time_24=24;
var go=true;
function cut(){
time_sum-=1;
var minutes=parseInt(time_sum/60);
var seconds=time_sum%60;
time_24-=1;
if(time_sum==0){
clearInterval(t)
go=true
time_24=24
start.innerHTML="继续"
reset12.style="background-color:yellow;"
reset24.style="background-color:grey;"
reset14.style="background-color:grey;"
start.style="background-color:grey;"
change.style=""
timeout.style=""
second24.style="background-color:red;"
minute.style="background-color:red;"
second.style="background-color:red;"
spare.style="background-color: red;"
spare.innerHTML="比赛结束"
}
if(time_24==0){
clearInterval(t)
go=true
time_24=24
start.innerHTML="继续"
reset12.style="background-color:yellow;"
reset24.style="background-color:yellow;"
reset14.style="background-color:yellow;"
start.style="background-color:yellow;"
change.style=""
timeout.style=""
second24.style="background-color:red;"
minute.style="background-color:red;"
second.style="background-color:red;"
spare.style="background-color: red;"
spare.innerHTML="24秒违例"
}
minute.innerHTML=minutes
second.innerHTML=seconds
if(time_24<=5){
second24.style.color="red"
}else{
second24.style.color="black"
}
second24.innerHTML=time_24
}
start.onclick=function(){
if(go){
if(time_sum<=0){
clearInterval(t)
}else{
t=setInterval(cut,1000) // 不能加var
go=false
start.innerHTML="开始"
start.style="background-color:grey;"
timeout.style="background-color:yellow;"
change.style="background-color:yellow;"
reset12.style=""
reset24.style=""
reset14.style=""
second24.style=""
minute.style=""
second.style=""
spare.style="background-color: green;"
spare.innerHTML="GO"
}
}
}
timeout.onclick=function(){
if(time_sum<=0){
// 空
}else{
clearInterval(t)
start.innerHTML="继续"
reset12.style="background-color:yellow;"
reset24.style="background-color:yellow;"
reset14.style="background-color:yellow;"
start.style="background-color:yellow;"
change.style="background-color:grey;"
timeout.style=""
if(!go){
spare.innerHTML="RELAX"
spare.style="background-color:yellow;"
}
go=true
}
}
change.onclick=function(){
if(!go){
if(time_sum<=24){
time_24=time_sum
}else{
time_24=24
}
go=false
}
}
reset12.onclick=function(){
if(go){
clearInterval(t)
time_sum=721
time_24=25
cut()
go=true
start.innerHTML="开始"
reset12.style=""
reset24.style=""
reset14.style=""
start.style="background-color:yellow;"
change.style=""
timeout.style=""
second.innerHTML="00"
minute.style=""
second.style=""
second24.style=""
spare.style=""
spare.innerHTML="GO"
}
}
reset24.onclick=function(){
if(go){
clearInterval(t)
if(time_sum<=24){
time_24=time_sum+1
}else{
time_24=25
}
time_sum+=1
cut()
go=true
start.innerHTML="继续"
}
}
reset14.onclick=function(){
if(go){
clearInterval(t)
if(time_sum<=14){
time_24=time_sum+1
}else{
time_24=15
}
time_sum+=1
cut()
go=true
start.innerHTML="继续"
}
}
script>
<script>
var score_a=0
var score_b=0
var score1=document.getElementById("score1").getElementsByClassName("score11")
var score2=document.getElementById("score2").getElementsByClassName("score11")
var add1=document.getElementById("score1").getElementsByClassName("add")
add1[0].onclick=function(){
score_a+=3
score1[0].innerHTML=score_a
}
add1[1].onclick=function(){
score_a+=2
score1[0].innerHTML=score_a
}
add1[2].onclick=function(){
score_a+=1
score1[0].innerHTML=score_a
}
add1[3].onclick=function(){
if(score_a>0){
score_a-=1
score1[0].innerHTML=score_a
if(score_a==0){
score1[0].innerHTML="00"
}
}
}
add1[4].onclick=function(){
score_a=0
score1[0].innerHTML="00"
}
var add2=document.getElementById("score2").getElementsByClassName("add")
add2[0].onclick=function(){
score_b+=3
score2[0].innerHTML=score_b
}
add2[1].onclick=function(){
score_b+=2
score2[0].innerHTML=score_b
}
add2[2].onclick=function(){
score_b+=1
score2[0].innerHTML=score_b
}
add2[3].onclick=function(){
if(score_b>0){
score_b-=1
score2[0].innerHTML=score_b
if(score_b==0){
score2[0].innerHTML="00"
}
}
}
add2[4].onclick=function(){
score_b=0
score2[0].innerHTML="00"
}
script>
body>
html>
阶段代码12/3/2020