HTML 篮球比赛计时记分器

效果图

程序较短，为方便使用，html，css，js，写在了一起，很多东西写着才添加

<!DOCTYPE html>
<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">GO</div><div id="score1" class="score"><div class="team"><input type="text" placeholder="输入客队名"></div><div class="score11">00</div><div><div class="add">+3</div><div class="add">+2</div><div class="add">+1</div><div class="add less">-1</div><div class="add less">清零</div></div></div><div id="score2" class="score"><div class="team"><input type="text" placeholder="输入主队名"></div><div class="score11">00</div><div><div class="add">+3</div><div class="add">+2</div><div class="add">+1</div><div class="add less">-1</div><div class="add less">清零</div></div></div><div id="parent"><div id="minute" class="big">12</div><div id="second" class="big">00</div><div id="second24" class="middle">24</div><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=truetime_24=24start.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=truetime_24=24start.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=minutessecond.innerHTML=secondsif(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)   // 不能加vargo=falsestart.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=721time_24=25cut()go=truestart.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+=1cut()go=truestart.innerHTML="继续"}}reset14.onclick=function(){if(go){clearInterval(t)if(time_sum<=14){time_24=time_sum+1}else{time_24=15}time_sum+=1cut()go=truestart.innerHTML="继续"}}</script><script>var score_a=0var score_b=0var 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+=3score1[0].innerHTML=score_a}add1[1].onclick=function(){score_a+=2score1[0].innerHTML=score_a}add1[2].onclick=function(){score_a+=1score1[0].innerHTML=score_a}add1[3].onclick=function(){if(score_a>0){score_a-=1score1[0].innerHTML=score_aif(score_a==0){score1[0].innerHTML="00"}}}add1[4].onclick=function(){score_a=0score1[0].innerHTML="00"}var add2=document.getElementById("score2").getElementsByClassName("add")add2[0].onclick=function(){score_b+=3score2[0].innerHTML=score_b}add2[1].onclick=function(){score_b+=2score2[0].innerHTML=score_b}add2[2].onclick=function(){score_b+=1score2[0].innerHTML=score_b}add2[3].onclick=function(){if(score_b>0){score_b-=1score2[0].innerHTML=score_bif(score_b==0){score2[0].innerHTML="00"}}}add2[4].onclick=function(){score_b=0score2[0].innerHTML="00"}</script>
</body>
</html>

阶段代码12/3/2020

HTML 篮球比赛计时记分器相关推荐

篮球比赛计时记分电路Proteus仿真说明
如图所示为篮球比赛计时记分电路的Proteus仿真图.该仿真使用ATmega128作为控制核心.LGM12864作为计时记分器的显示装置.矩阵键盘作为输入设备实现篮球比赛的计时记分功能. ATmega ...
计算机控制篮球,【精品课程设计】计算机控制技术弱电课程之篮球比赛计时计分器doc.doc...
[精品课程设计]计算机控制技术弱电课程之篮球比赛计时计分器doc.doc 课程设计题目篮球赛计时计分器二级学院电子信息与自动化专业电气工程及其自动化班级学生姓名学号指导教师考 ...
滑雪计时设备|滑雪比赛记分系统|滑雪比赛计时记分
滑雪计时设备|滑雪比赛记分系统|滑雪比赛计时记分 Microgate滑雪赛事计时系统经过了近三十年的研发和经验积累,已形成一套完整的专业滑雪计时系统.在全世界各大国际赛场上广泛使用,一直为国际雪联FI ...
基于STM32单片机的篮球计时记分器proteus仿真原理图PCB
功能: 0.本系统采用STC89C52作为单片机 1.LCD1602液晶实时显示比赛剩余时间,球队分数 2.默认计时器为4节,每节10分钟,每节比赛结束,蜂鸣器报警 3.按键功能介绍: '1'键--加 ...
基于STM32单片机的篮球计时记分器仿真设计
硬件设计 (末尾附文件) 代码设计主程序: #define __MAIN_C #include "main.h" #include "stm32f10x.h" ...
单片机c语言篮球比分_基于单片机的篮球比赛计时计分器的设计
摘要:本系统是采用单片机AT89C51作为本设计的核心原件.利用7段共阴LED作为显示器件.在此设计中共接入了2个7段共阴LED显示器,用于记录得分和比赛时间,显示范围可以达到0到99分,基本满足赛 ...
基于51单片机控制的篮球比赛计时、计分系统设计与仿真(含设计图和C语言程序源码)
1. 设计任务: 2. 设计说明 2.1 需求分析 2.1.1 计分系统: 2.1.2 计时系统: 2.2 原理分析 2.3 总体设计 2.4 软硬件设计 2.4.1 硬件设计 2.4.2 软件设计 ...
单片机c语言篮球比分_单片机篮球比赛计分器设计方案与程序详解
摘要本系统是采用单片机AT89C51作为本设计的核心元件.利用7段共阳LED作为显示器件.在此设计中共接入了2个7段共阳LED显示器,用于记录该队的分数, 2个LED显示器显示范围可达到0~99分 ...
基于51单片机的篮球比赛计时器
目录基于51单片机的篮球比赛计时器 1.PCB原理图 2.仿真图 3.毕设要求: 4.总体方案设计 5.程序源码 6.资源下载基于51单片机的篮球比赛计时器注:本毕设资源可在微信公众号:&quo ...

HTML 篮球比赛计时记分器

效果图

程序较短，为方便使用，html，css，js，写在了一起，很多东西写着才添加

HTML 篮球比赛计时记分器相关推荐

最新文章

热门文章