当前位置： 首页 > news >正文

前端 ： 用HTML ，CSS ,JS 做一个点名器

news 2026/3/28 9:03:23

1.HTML：

<body><div id = "content"><div id="top"><div id = "name">XAiot2302班点名器</div></div><div id = "center"><div id = "word">你准备好了吗?</div></div><div id = "bottom"><div id="btn_start">开始</div><div id="btn_stop">停止</div><div id = "btn_reset">重置</div></div></div></body>

2.CSS     

<script src="jquery-3.6.0.js"></script><style>*{margin: 0;padding: 0;}html,body{width:100%;height: 100%;}#content{width: 100%;height: 100%;position: relative;}#top{width:100%;height: 100px;/* background-color: aqua; */position: relative;	}#name{font-size: 50px;font-weight: 800;color:brown;position: absolute;top: 50%;margin-top: -25px;left: 40%;top: 100px;}#center{width:100%;height: 100px;/* background-color: blue; */position: relative;	top: 100px;	}#word{font-size: 40px;color: red;position: absolute;top: 50%;margin-top: -25px;left: 50%;margin-left: -50px;}#bottom{width:100%;height: 400px;/* background-color: blue; */position: relative;	top: 130px;	}#btn_start{font-size: 40px;color: white;position: absolute;top: 20%;margin-top: -20px;left: 50%;background-color: red;border-radius: 10px;}#btn_stop{font-size: 40px;color: white;position: absolute;top: 40%;margin-top: -20px;left: 50%;background-color: yellow;border-radius: 10px;}#btn_reset{font-size: 40px;color: white;position: absolute;top: 60%;margin-top: -20px;left: 50%;background-color: skyblue;border-radius: 10px;}</style>

    3.JS

<script type="text/javascript">var nums=["乔凯晨","张晋若","张立","焦鹏祥","郭鑫","景清雷","徐绍平","代卫能","曹科","郭力玮","张彪","刘卓锦"];function suiji(){var num = Math.random()*nums.length;var num = Math.floor(num);var i = nums[num];$("#word").html(i);}var id = 0;$("#btn_start").click(function(){id = setInterval(suiji,80);});$("#btn_stop").click(function(){clearInterval(id);});$("#btn_reset").click(function(){// location.reload();$("#btn_start").html("开始");$("#word").html("你准备好了吗？")});
</script>

效果展示：

相关文章：

前端 ： 用HTML ，CSS ,JS 做一个点名器

1.HTML&#xff1a; <body><div id "content"><div id"top"><div id "name">XAiot2302班点名器</div></div><div id "center"><div id "word">你准备好了吗?</di…...

编程日记 2023/10/30 10:32:38

css：button实现el-radio效果

先看最终效果&#xff1a; ​​​ 思路&#xff1a; 一、 首先准备好按钮内容&#xff1a;const a [one,two,three] 将按钮循环展示出来&#xff0c;并设置一些样式&#xff0c;将按钮背景透明&#xff1a; <button v-for"(item,index) in a" :key"in…...

编程日记 2023/10/30 10:31:30

算法工程师-机器学习-数据科学家面试准备4-ML系统设计

https://github.com/LongxingTan/Machine-learning-interview 算法工程师-机器学习-数据科学家面试准备1- 概述 外企和国外公司、春招、秋招算法工程师-机器学习-数据科学家面试准备2- Leetcode 300算法工程师-机器学习-数据科学家面试准备3-系统设计算法工程师-机器学习-数据…...

编程日记 2023/10/30 10:30:29

git重装后如何连接以前项目

git重装后如何连接以前项目 1、配置秘钥 点击 Git Bash Here&#xff0c;进入命令操作窗口 生成本地git仓库秘钥&#xff1a; 1、填写自己邮箱 2、一直回车 ssh-keygen -t rsa -C “xxxxxqq.com”3、使用cat查看生成的秘钥&#xff0c;粘贴并设置到gitee上 cat ~/.ssh/id_r…...

编程日记 2023/10/30 10:29:27

【java学习—十】TreeSet集合（5）

文章目录 1. TreeSet1.1. 自然排序1.2. 定制排序 1. TreeSet TreeSet 是 SortedSet 接口的实现类&#xff0c; TreeSet 可以确保集合元素处于排序状态。     TreeSet 支持两种排序方法&#xff1a;自然排序和定制排序。默认情况下&#xff0c; TreeSet 采用自然排序。 1.1.…...

编程日记 2023/10/30 10:28:25

JMeter的使用，傻瓜式学习【上】

目录 前言 1、JMeter元件及基本使用作用域&#xff08;简述&#xff09; 1.1、基本元件 1.2、作用域的原则 1.3、元件执行顺序 3、JMeter三个重要组件 3.1、线程组 案例&#xff1a; 3.2、HTTP请求 3.3、查看结果树 响应体中&#xff0c;中文乱码解决方案&#xff1…...

编程日记 2023/10/30 10:27:24

主定理（一般式）

主定理&#xff08;Master Theorem&#xff09;是用于分析递归算法时间复杂度的一个重要工具。它适用于形式化定义的一类递归关系&#xff0c;通常采用分治策略解决问题的情况。 目录 主定理简化版的局限主定理一般形式情况1&#xff1a; n l o g b a n^{log_{b}{a}} nlogb​a …...

编程日记 2023/10/30 10:26:23

WLAN的组网架构和工作原理

目录 WLAN的组网架构 FAT AP架构 AC FIT AP架构 敏捷分布式AP 下一代园区网络&#xff1a;智简园区&#xff08;大中型园区网络&#xff09; WLAN工作原理 WLAN工作流程 1.AP上线 &#xff08;1&#xff09;AP获取IP地址&#xff1b; &#xff08;2&#xff09;AP发…...

编程日记 2023/10/30 10:25:22

使用OBS Browser+访问华为云OBS存储【Windows】

背景 项目中使用华为云 S3 存储，java 代码中通过华为云 OBS 提供的esdk-obs-java 来访问文件。 但是，通过 JAVA SDK 方式不太方便运维，所以我们需要一款可视化的客户端软件。 华为云 OBS 自身也提供了一款客户端软件，名为 OBS Browser+。 OBS Browser+简介 OBS Browse…...

编程日记 2023/10/30 10:24:22

C++总结(3)：类的动态内存分配、异常、类型转换运算符

文章目录 1 类的动态内存分配1.1 C动态内存分配1.2 拷贝构造函数1.3 赋值运算符(operator)重载 2 异常3 类型转换运算符 1 类的动态内存分配 1.1 C动态内存分配 在C/C中都可以使用malloc/free来分配内存&#xff0c;但C还有一种更好的方法&#xff1a;new和delete。下面以动态…...

编程日记 2023/10/30 10:23:21

折半搜索（meet in the middle）

介绍 折半搜索&#xff0c;又称 meet in the middle \text{meet in the middle} meet in the middle&#xff0c;指将整个搜索过程分为两部分&#xff0c;并对两部分分别进行搜索&#xff0c;最后得到两个答案序列&#xff0c;将这两个答案序列进行合并&#xff0c;即可得到最…...

编程日记 2023/10/30 10:22:10

【机器学习】loss损失讨论

大纲 验证集loss上升&#xff0c;准确率也上升&#xff08;即将overfitting&#xff1f;&#xff09;训练集loss一定为要为0吗 Q1. 验证集loss上升&#xff0c;准确率也上升 随着置信度的增加&#xff0c;一小部分点的预测结果是错误的&#xff08;log lik 给出了指数级的惩…...

编程日记 2023/10/30 10:21:09

LeetCode 779. 第K个语法符号【递归,找规律,位运算】中等

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…...

编程日记 2023/10/30 10:20:08

java try throw exception finally 遇上 return break continue造成异常丢失

如下所示&#xff0c;是一个java笔试题&#xff0c;考察的是抛出异常之后&#xff0c;程序运行结果&#xff0c;但是这里抛出异常&#xff0c;并没有捕获异常&#xff0c;而是通过finally来进行了流程控制处理。 package com.xxx.test;public class ExceptionFlow {public sta…...

编程日记 2023/10/30 10:19:07

设计模式——装饰器模式（Decorator Pattern）+ Spring相关源码

文章目录 一、装饰器模式的定义二、个人理解举个抽象的例&#xff08;可能并不是很贴切&#xff09; 三、例子1、菜鸟教程例子1.1、定义对象1.2、定义装饰器 3、JDK源码 ——包装类4、JDK源码 —— IO、OutputStreamWriter5、Spring源码 —— BeanWrapperImpl5、SpringMVC源码 …...

编程日记 2023/10/30 10:18:06

MATLAB R2018b详细安装教程（附资源）

云盘链接&#xff1a; pan.baidu.com/s/1SsfNtlG96umfXdhaEOPT1g 提取码&#xff1a;1024 大小&#xff1a;11.77GB 安装环境&#xff1a;Win10/Win8/Win7 安装步骤&#xff1a; 1.鼠标右击【R2018b(64bit)】压缩包选择【解压到 R2018b(64bit)】 2.打开解压后的文件夹中的…...

编程日记 2023/10/30 10:17:04

GEE错误——影像加载过程中出现的图层无法展示的解决方案

问题&#xff1a; // I dont know if some standard value exists for the radius, in the same, I will assume that some software would prefer to use square shape, but circle makes more sense to me. // pixels is noice if you want to zoom in and out to visualize…...

编程日记 2023/10/30 10:14:46

读图数据库实战笔记03_遍历

1. Gremlin Server只将数据存储在内存中 1.1. 如果停止Gremlin Server&#xff0c;将丢失数据库里的所有数据 2. 概念 2.1. 遍历&#xff08;动词&#xff09; 2.1.1. 当在图数据库中导航时&#xff0c;从顶点到边或从边到顶点的移动过程 2.1.2. 类似于在关系数据库中的查…...

编程日记 2023/10/30 10:13:45

QT如何检测当前系统是是Windows还是Uninx或Mac？以及是哪个版本？

简介 通过Qt获取当前系统及版本号&#xff0c;需要用到QSysInfo。 QSysInfo类提供有关系统的信息。 WordSize指定了应用程序编译所在的平台的指针大小。 ByteOrder指定了平台是大端序还是小端序。 某些常量仅在特定的平台上定义。您可以使用预处理器符号Q_OS_WIN和Q_OS_MACOS来…...

编程日记 2023/10/30 10:10:43

Maven配置阿里云中央仓库settings.xml

Maven配置阿里云settings.xml 前言一、阿里云settings.xml二、使用步骤1.任意目录创建settings.xml2.使用阿里云仓库 总结 前言 国内网络从maven中央仓库下载文件通常是比较慢的&#xff0c;所以建议配置阿里云代理镜像以提高jar包下载速度&#xff0c;IDEA中我们需要配置自己…...

编程日记 2023/10/30 10:08:39

全网薅羊毛新地图”：华莱士套餐实测13.9元起，连锁巨头麦当劳紧随其后！

近期&#xff0c;随着经济压力的加大&#xff0c;餐饮市场的竞争愈发激烈。在原本以低价策略闻名的麦当劳“穷鬼套餐”开始面临严峻挑战之际&#xff0c;一家曾被网友戏称为“穷鬼旗舰”的连锁快餐品牌——华莱士&#xff0c;悄然推出了更具性价比的“超值套餐”&#xff0c;在…...

编程新知 2026/3/28 8:53:58

nli-distilroberta-base算法优化：利用LSTM思想增强序列上下文建模

nli-distilroberta-base算法优化&#xff1a;利用LSTM思想增强序列上下文建模 1. 效果展示背景 在自然语言推理任务中&#xff0c;nli-distilroberta-base作为轻量级Transformer模型表现出色&#xff0c;但在处理长文本序列时仍面临挑战。传统Transformer架构的自注意力机制虽…...

编程新知 2026/3/28 8:17:45

SDMatte在老旧照片修复流程中的关键作用：人物与背景分离

SDMatte在老旧照片修复流程中的关键作用&#xff1a;人物与背景分离 1. 老照片修复的挑战与解决方案 老照片承载着珍贵的记忆&#xff0c;但时间往往会在这些影像上留下痕迹——褪色、划痕、污渍甚至物理破损。传统修复方法需要专业设计师耗费大量时间手动处理&#xff0c;而…...

编程新知 2026/3/28 8:01:33

Cisco Packet Tracer新手必看：5分钟搞定路由器静态路由配置（附避坑指南）

Cisco Packet Tracer静态路由配置实战&#xff1a;从零到精通的完整指南 刚接触网络工程的朋友们&#xff0c;第一次在Cisco Packet Tracer中配置静态路由时&#xff0c;是不是经常遇到"网络不通"的困扰&#xff1f;作为网络通信的基础技能&#xff0c;静态路由配置看…...

编程新知 2026/3/28 7:02:54

2023最新版Prometheus+Grafana监控系统搭建指南（含Docker-compose部署）

2023云原生监控实战&#xff1a;基于Docker-compose的PrometheusGrafana全栈部署指南 在云原生技术席卷各行各业的今天&#xff0c;监控系统已成为保障业务稳定性的神经中枢。传统监控方案在面对容器化、微服务架构时往往力不从心&#xff0c;而Prometheus作为CNCF毕业项目&…...

编程新知 2026/3/28 6:10:29

UE5.3与Colosseum集成配置指南及常见问题解析

1. 环境准备&#xff1a;Windows系统下的基础配置 在开始Colosseum与UE5.3的集成之前&#xff0c;我们需要确保开发环境满足基本要求。我最近在Windows 11系统上完成了一次完整配置&#xff0c;实测下来这几个关键组件版本组合最稳定&#xff1a; 操作系统&#xff1a;Windows …...

编程新知 2026/3/28 5:58:23

Squeezer安全最佳实践：保护区块链dApp的10个关键点

Squeezer安全最佳实践&#xff1a;保护区块链dApp的10个关键点 【免费下载链接】squeezer Squeezer Framework - Build serverless dApps 项目地址: https://gitcode.com/gh_mirrors/sq/squeezer Squeezer Framework作为构建无服务器区块链去中心化应用&#xff08;dApp…...

编程新知 2026/3/28 5:40:06

知识点总结--day09(Mybatis及Mybatis-Plus)

目录 1、系统架构流程? 2结果集映射? 3mapper传参? 4、xml常用配置 5、缓存机制 6、分页插件 7、Mybatis-Plus常用API 末尾页 1、系统架构流程? 执行过程&#xff1a; mybatis配置 mybatis-config.xml&#xff0c;名称可变&#xff0c;此文件作为mybatis的全局配置…...

编程新知 2026/3/28 5:36:05

Ice：macOS菜单栏管理终极指南，彻底告别杂乱无章

Ice&#xff1a;macOS菜单栏管理终极指南&#xff0c;彻底告别杂乱无章 【免费下载链接】Ice Powerful menu bar manager for macOS 项目地址: https://gitcode.com/GitHub_Trending/ice/Ice 想要彻底掌控macOS菜单栏&#xff0c;告别杂乱无章的图标堆积吗&#xff1f;I…...

编程新知 2026/3/28 5:14:01

Qwen3-Embedding国产化部署

从单一型人才到AI带领下的复合型人才 1.1 传统职能的终结 传统软件公司怎么干的&#xff1f; 销售、售前、交付、研发、市场、运维——各司其职&#xff0c;职能清晰。看起来很专业&#xff0c;但实际上是什么&#xff1f;一堆冗余的角色在等活干。 这不是高效&#xff0c;这是…...

编程新知 2026/3/28 4:28:00