前端 : 用HTML ,CSS ,JS 做一个点名器
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: <body><div id "content"><div id"top"><div id "name">XAiot2302班点名器</div></div><div id "center"><div id "word">你准备好了吗?</di…...
css:button实现el-radio效果
先看最终效果: 思路: 一、 首先准备好按钮内容:const a [one,two,three] 将按钮循环展示出来,并设置一些样式,将按钮背景透明: <button v-for"(item,index) in a" :key"in…...
算法工程师-机器学习-数据科学家面试准备4-ML系统设计
https://github.com/LongxingTan/Machine-learning-interview 算法工程师-机器学习-数据科学家面试准备1- 概述 外企和国外公司、春招、秋招算法工程师-机器学习-数据科学家面试准备2- Leetcode 300算法工程师-机器学习-数据科学家面试准备3-系统设计算法工程师-机器学习-数据…...
git重装后如何连接以前项目
git重装后如何连接以前项目 1、配置秘钥 点击 Git Bash Here,进入命令操作窗口 生成本地git仓库秘钥: 1、填写自己邮箱 2、一直回车 ssh-keygen -t rsa -C “xxxxxqq.com”3、使用cat查看生成的秘钥,粘贴并设置到gitee上 cat ~/.ssh/id_r…...
【java学习—十】TreeSet集合(5)
文章目录 1. TreeSet1.1. 自然排序1.2. 定制排序 1. TreeSet TreeSet 是 SortedSet 接口的实现类, TreeSet 可以确保集合元素处于排序状态。 TreeSet 支持两种排序方法:自然排序和定制排序。默认情况下, TreeSet 采用自然排序。 1.1.…...
JMeter的使用,傻瓜式学习【上】
目录 前言 1、JMeter元件及基本使用作用域(简述) 1.1、基本元件 1.2、作用域的原则 1.3、元件执行顺序 3、JMeter三个重要组件 3.1、线程组 案例: 3.2、HTTP请求 3.3、查看结果树 响应体中,中文乱码解决方案࿱…...
主定理(一般式)
主定理(Master Theorem)是用于分析递归算法时间复杂度的一个重要工具。它适用于形式化定义的一类递归关系,通常采用分治策略解决问题的情况。 目录 主定理简化版的局限主定理一般形式情况1: n l o g b a n^{log_{b}{a}} nlogba …...
WLAN的组网架构和工作原理
目录 WLAN的组网架构 FAT AP架构 AC FIT AP架构 敏捷分布式AP 下一代园区网络:智简园区(大中型园区网络) WLAN工作原理 WLAN工作流程 1.AP上线 (1)AP获取IP地址; (2)AP发…...
使用OBS Browser+访问华为云OBS存储【Windows】
背景 项目中使用华为云 S3 存储,java 代码中通过华为云 OBS 提供的esdk-obs-java 来访问文件。 但是,通过 JAVA SDK 方式不太方便运维,所以我们需要一款可视化的客户端软件。 华为云 OBS 自身也提供了一款客户端软件,名为 OBS Browser+。 OBS Browser+简介 OBS Browse…...
C++总结(3):类的动态内存分配、异常、类型转换运算符
文章目录 1 类的动态内存分配1.1 C动态内存分配1.2 拷贝构造函数1.3 赋值运算符(operator)重载 2 异常3 类型转换运算符 1 类的动态内存分配 1.1 C动态内存分配 在C/C中都可以使用malloc/free来分配内存,但C还有一种更好的方法:new和delete。下面以动态…...
折半搜索(meet in the middle)
介绍 折半搜索,又称 meet in the middle \text{meet in the middle} meet in the middle,指将整个搜索过程分为两部分,并对两部分分别进行搜索,最后得到两个答案序列,将这两个答案序列进行合并,即可得到最…...
【机器学习】loss损失讨论
大纲 验证集loss上升,准确率也上升(即将overfitting?)训练集loss一定为要为0吗 Q1. 验证集loss上升,准确率也上升 随着置信度的增加,一小部分点的预测结果是错误的(log lik 给出了指数级的惩…...
LeetCode 779. 第K个语法符号【递归,找规律,位运算】中等
本文属于「征服LeetCode」系列文章之一,这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁,本系列将至少持续到刷完所有无锁题之日为止;由于LeetCode还在不断地创建新题,本系列的终止日期可能是永远。在这一系列刷题文章…...
java try throw exception finally 遇上 return break continue造成异常丢失
如下所示,是一个java笔试题,考察的是抛出异常之后,程序运行结果,但是这里抛出异常,并没有捕获异常,而是通过finally来进行了流程控制处理。 package com.xxx.test;public class ExceptionFlow {public sta…...
设计模式——装饰器模式(Decorator Pattern)+ Spring相关源码
文章目录 一、装饰器模式的定义二、个人理解举个抽象的例(可能并不是很贴切) 三、例子1、菜鸟教程例子1.1、定义对象1.2、定义装饰器 3、JDK源码 ——包装类4、JDK源码 —— IO、OutputStreamWriter5、Spring源码 —— BeanWrapperImpl5、SpringMVC源码 …...
MATLAB R2018b详细安装教程(附资源)
云盘链接: pan.baidu.com/s/1SsfNtlG96umfXdhaEOPT1g 提取码:1024 大小:11.77GB 安装环境:Win10/Win8/Win7 安装步骤: 1.鼠标右击【R2018b(64bit)】压缩包选择【解压到 R2018b(64bit)】 2.打开解压后的文件夹中的…...
GEE错误——影像加载过程中出现的图层无法展示的解决方案
问题: // 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…...
读图数据库实战笔记03_遍历
1. Gremlin Server只将数据存储在内存中 1.1. 如果停止Gremlin Server,将丢失数据库里的所有数据 2. 概念 2.1. 遍历(动词) 2.1.1. 当在图数据库中导航时,从顶点到边或从边到顶点的移动过程 2.1.2. 类似于在关系数据库中的查…...
QT如何检测当前系统是是Windows还是Uninx或Mac?以及是哪个版本?
简介 通过Qt获取当前系统及版本号,需要用到QSysInfo。 QSysInfo类提供有关系统的信息。 WordSize指定了应用程序编译所在的平台的指针大小。 ByteOrder指定了平台是大端序还是小端序。 某些常量仅在特定的平台上定义。您可以使用预处理器符号Q_OS_WIN和Q_OS_MACOS来…...
Maven配置阿里云中央仓库settings.xml
Maven配置阿里云settings.xml 前言一、阿里云settings.xml二、使用步骤1.任意目录创建settings.xml2.使用阿里云仓库 总结 前言 国内网络从maven中央仓库下载文件通常是比较慢的,所以建议配置阿里云代理镜像以提高jar包下载速度,IDEA中我们需要配置自己…...
基于LLM与OpenClaw的智能自动化:构建自然语言驱动的桌面脚本生成器
1. 项目概述:连接两个世界的桥梁最近在折腾一个挺有意思的项目,叫hermes-openclaw-bridge。光看这个名字,可能有点摸不着头脑,但如果你同时关注过大型语言模型(LLM)和自动化脚本工具,大概就能猜…...
2025届学术党必备的五大AI学术助手实测分析
Ai论文网站排名(开题报告、文献综述、降aigc率、降重综合对比) TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek AI论文工具在当代学术领域,已然成为了极为关键的辅助支撑力量,它可全…...
Verse MCP:基于MCP协议为AI智能体构建安全工具箱的实践指南
1. 项目概述:Verse MCP,一个为AI智能体赋能的“工具箱”连接器最近在折腾AI智能体开发的朋友,估计都绕不开一个词:MCP。全称是Model Context Protocol,你可以把它理解为一套标准化的“插座”和“插头”规范。它要解决的…...
最优化方法和理论一轮复习
最优化方法与理论一句话本质:在一堆可选方案里,按照某个评价标准,找到最好的那个。数学形式通常写成:: 在变量x的所有可能取值中,找到让目标函数 f(x) 最小的那个 x。一、最优化到底在研究什么?…...
高效AI教材写作指南:借助AI工具,低查重完成40万字教材编写!
教材编写中的原创性与合规性问题及 AI 工具解决方案 在教材编写的过程中,如何平衡原创性与合规性是一个不可忽视的重要问题。在借鉴优秀教材中的内容时,创作者不可避免地会担心作品的查重率过高;而在尝试自行创作知识点时,又可能…...
HuggingClaw:用开源模型模拟Claude API的本地开发与测试方案
1. 项目概述:当HuggingFace遇上Claude,一个AI模型管理新思路最近在GitHub上看到一个挺有意思的项目,叫“HuggingClaw”。光看名字,你大概就能猜到它想干什么——把HuggingFace和Claude这两个在AI领域响当当的名字结合到一起。作为…...
5个7+ Taskbar Tweaker深度诊断技巧:彻底解决Windows任务栏定制难题
5个7 Taskbar Tweaker深度诊断技巧:彻底解决Windows任务栏定制难题 【免费下载链接】7-Taskbar-Tweaker A Windows taskbar customization tool for Windows 7, Windows 8, and Windows 10 项目地址: https://gitcode.com/gh_mirrors/7t/7-Taskbar-Tweaker 7…...
1.8.2 掌握Scala类与对象 - 单例对象与伴生对象
本次实战通过三个案例深入解析了 Scala 中 object 的核心机制,展示了其如何替代 Java 的 static 关键字。首先,通过 MathUtils 定义了存放常量与工具方法的独立单例对象;其次,利用 Person 类与其同名对象演示了“伴生对象”特性&a…...
086、Python数据压缩与归档:zipfile与tarfile实战笔记
086、Python数据压缩与归档:zipfile与tarfile实战笔记 一、从线上故障说起 上周排查一个生产环境问题:某服务每天生成的日志文件把磁盘撑满了。 查看代码发现,开发同事用 open().write() 直接写文本,一年下来积累了上千个文件。 其实这类场景最适合用压缩归档——既节省空…...
RevokeMsgPatcher:微信/QQ/TIM防撤回补丁工具完全指南
RevokeMsgPatcher:微信/QQ/TIM防撤回补丁工具完全指南 【免费下载链接】RevokeMsgPatcher :trollface: A hex editor for WeChat/QQ/TIM - PC版微信/QQ/TIM防撤回补丁(我已经看到了,撤回也没用了) 项目地址: https://gitcode.co…...
