js、bootstrap、jq实现酷炫赛道风格的多功能辩论赛计时器

2024-06-02 09:17:40

先简单一下这个计时器背景

大学时期打了几年的辩论赛。一直有这个情怀在。看到那些孩子们孩子用很多年前的计时软件。就考虑闲暇时做一个新的计时器。但首先存在一个问题。实现多功能的方法要不做成微信小程序。或者是做成web项目上传云服务器。但是考虑成本和维护。就先做一个不带数据库和后台的页面。赛制和环节通过点击之页面上的button组合需要的赛制环节模式。

需要说明的是

首先这不是我的原生开发。这是我在gitee上拿到一个开源的项目进行加工。优化了一下页面效果和逻辑。添加了一些逻辑。本来想用vue再加工一下。但是还要上班工作量大了点。下次周末再来优化。

先上几张截图

这里感谢下原作者

首先作者是一名高中学生。这一点我真的佩服。虽然原作者只是用了jq 原生js 和bootstrap 。没用框架。但是作为一名还未读大学的孩子。确实能写到这种程度还是很佩服的。（我高中那会就会C语言的if和for）。当然这也不是这个孩子的原生开发。还有之前的作者MrAMS。一个github上的做作者。

还需要改进的地方

那确实太多了，比如计时的动画提示，还有赛制信息没做。准备加个后台存数据。之前原来版本用了perl更新数据。我觉得麻烦了点，改成了本地存储。但未来还是要用到数据库和后台的。等有空用vue改写一下。然后价格后台啥的，之前看到一个自带ai评分的一个项目。准备拿来一起试试。既然是为了情怀改写的代码，那当然有空要继续做下去

源码地址

有空会一直更新代码的也欢迎曾经是辩手的程序员们一起加入进来。为了热爱也为了情怀
gitee源码地址，可以直接克隆下载
或者复制该地址：https://gitee.com/beck0514001/my-demo-project/tree/debateTimer/

js、bootstrap、jq实现酷炫赛道风格的多功能辩论赛计时器相关推荐

php 鼠标经过图片,jq实现酷炫的鼠标经过图片翻滚效果_jquery
短短的十多行代码就实现了一个酷炫的图片翻滚代码,要实现这个效果并不难,只要思路对了,一切都好办,不多说了,直接上代码看效果! html结构: *{ margin:0; padding:0;} .lis ...
java实现3D动态效果_js实现3D粒子酷炫动态旋转特效
js实现3D粒子酷炫动态旋转特效(效果比较酷炫,中途不仅有形态的变换,还有颜色的变化,希望大家能够喜欢) 代码实现过程中的静态截图 New Document html,body{ margin:0px ...
让你的SpringBoot更有个性, 定制酷炫Banner
前言在进行SpringCloud进行开发的时候,不知道朋友们有没有注意到你的SpringBoot微服务启动的时候的日志里会出现启动画面: 如下图所示特别的酷炫有风格: 这个方式可以非常简单的通过S ...
Vue.js 打造酷炫的可视化数据大屏
可视化技术与 Vue 介绍实验介绍在本节实验中,将对可视化技术的应用场景.发展历程进行介绍,让大家对可视化技术有一个基础的概念.随后将介绍如今流行的可视化框架与其之间的优缺点对比.最后介绍 Vue ...
ztext - 简单几行代码创建酷炫 3D 特效文字的开源 JS 库
把网页上的文字变成酷炫的 3D 风格,还能制作旋转动效,有了 ztext.js,只需要几行代码. ztext 能做什么 ztext.js 是一个能把常规的平面文字变成 3D 样式的前端开源代码库,让开 ...
js实现酷炫倒计时动画效果
前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公众号H5有个活动开始的倒计时的动画效果,于是想了下实现思路. <!DOCTYPE html> <html> < ...
酷炫一款动态背景（HTML +js canvas）
一款酷炫的前端动态页面废话不多说 ,分享一款酷炫的页面动态背景效果见下图. 查看 demo 背景图效果: 实例效果点击效果: 背景css *{margin: 0;padding: 0;}#ca ...
短视频app源码出售swiper.js制作酷炫轮播图
html <html lang="en"><head><meta charset="utf-8"><title> ...
用Three.js打造酷炫3D个人网站（含源码）
引言个人网站是程序员的第二张简历.如果你有酷炫的个人网页,面试官对你的好感度会蹭蹭蹭往上涨. 在疫情隔离期间,我用Three.js和Ammo.js制作了一个可交互的3D个人网页. 在线预览地址: w ...
JS、JQ Bootstrap基本样式（一）
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Bo ...

最新文章

热门文章