web前端练习三

一.随机点名程序

1.点击点名按钮,名字界面随机显示,按钮文字由点名变为停止
2.再次点击点名按钮,显示当前被点名学生姓名,按钮文字由停止变为点名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>随机点名</title><style>.container{width: 800px;height: 540px;border: 1px solid black;text-align: center;position: absolute;left: 50%;margin-left: -400px;line-height: 100px;background-color: bisque;}.box,.box2{width: 400px;height: 400px;background-color: rgb(176, 243, 204);border-radius: 50%;margin: auto;margin-top: 50px;line-height: 400px;}.box2{background-color: rgb(124, 172, 218);}#start{width: 100px;height: 40px;background-color: pink;color: black;}#show{font-size: 40px;font-weight: bold;}</style>
</head>
<body><div class="container"><div class="box" id="box"><span id="show">崩铁2021班</span></div><button id="start" onclick="A()">开始</button></div>
</body>
</html>
<script>var flag = falsevar awards = ["镜流","卡夫卡","希儿","布洛妮娅","黑天鹅","霍霍","克拉拉","真理医生","白露","砂金","瓦瓦卡夏","知更鸟"]var box = document.getElementById("box")var show = document.getElementById("show")var start = document.getElementById("start")var timerfunction A(){if(!flag){flag = truestart.innerHTML="停止"timer = setInterval(function(){let index = Math.floor(Math.random()*awards.length)    show.innerHTML = awards[index]box.setAttribute("class","box2") },10)}else{flag = falsestart.innerHTML="点名"clearInterval(timer)box.setAttribute("class","box")}}
</script>

二.秒表计时器

1.界面为一个显示计时面板和三个按钮分别为:开始,暂停,重置
2.点击开始,面板开始计时
3.点击暂停,面板停止
4.点击重置,计时面板重新为0提示:采用定时器及定义计数器变量完成,定时器间隔为1s

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>秒表计时器</title><style>body {  display: flex;  justify-content: center;  align-items: center;  height: 100vh;  background-color: #f5f5f5;  font-family: Arial, sans-serif;  }  .timer-panel {  text-align: center;  }  button {  margin: 10px;  padding: 10px 20px;  font-size: 16px;  }</style>
</head>
<body>  <div class="timer-panel">  <h1 id="timer">00:00</h1>  <button id="startBtn">开始</button>  <button id="pauseBtn">暂停</button>  <button id="resetBtn">重置</button>  </div>  
</body>  
</html>
<script>let timerId = null; // 用于存储定时器的ID  let counter = 0; // 计数器变量  let isRunning = false; // 计时器是否正在运行  const timerElement = document.getElementById('timer');  const startBtn = document.getElementById('startBtn');  const pauseBtn = document.getElementById('pauseBtn');  const resetBtn = document.getElementById('resetBtn');  function updateTimerDisplay() {  const minutes = Math.floor(counter / 60);  const seconds = counter % 60;  timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;  }  function startTimer() {  if (!isRunning) {  isRunning = true;  timerId = setInterval(() => {  counter++;  updateTimerDisplay();  }, 1000);  }  }  function pauseTimer() {  if (isRunning) {  isRunning = false;  clearInterval(timerId);  }  }  function resetTimer() {  counter = 0;  updateTimerDisplay();  if (isRunning) {  pauseTimer();  }  }  startBtn.addEventListener('click', startTimer);  pauseBtn.addEventListener('click', pauseTimer);  resetBtn.addEventListener('click', resetTimer);
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/3393.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java集成结巴中文分词器、Springboot项目整合jieba分词,实现语句最精确的切分、自定义拆词

文章目录 一、jieba介绍二、集成三、原理四、自定义拆词4.1、方式一&#xff1a;在源码的dict.txt中修改然后重新打包(推荐)4.2、新建文件自定义拆词 五、其他问题 一、jieba介绍 jieba是一个分词器&#xff0c;可以实现智能拆词&#xff0c;最早是提供了python包&#xff0c;…

迪拜之行回顾:CESS 的 DePIN 创新之旅

迪拜最近是一个关键热词&#xff0c;成为了一系列 Web3 和加密活动的中心&#xff0c;吸引了行业领导者、创新者和爱好者&#xff0c;探索区块链和去中心化技术的最新发展。从 4 月中旬&#xff0c;一系列行业会议和活动陆续举行&#xff0c;吸引了一众与会者。然而暴雨积水又成…

2023平航杯——手机取证复现

手机最近连接的wifi"只有红茶可以吗"的密码是&#xff1f;【标准格式&#xff1a;ABCabc123!#】 手机上安装了某个运动软件&#xff0c;它的包名是&#xff1f;【标准格式&#xff1a;com.baidu.gpt】 com.dizhisoft.changdongli 该运动软件中最近一次运动记录的起点…

NodeJS操作符空格漏洞

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;它使得 JavaScript 可以脱离浏览器在服务器端运行。Node.js 利用事件驱动、非阻塞 I/O 模型等技术提高了性能&#xff0c;从而在开发领域得到广泛应用&#xff0c;比如Web服务应用&#xff08;尤其是非阻塞…

Python+Appium实现自动化测试

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、环境准备 1.脚本语言&#xff1a;Python3.x IDE&#x…

Mac安装flutter环境

好记性不如烂笔头,之前出现文章用的后面再访问就没了,不如自己保存备份一份,哈哈 MAC电脑安装flutter环境 一&#xff0c;获取Flutter SDK 去flutter官网下载其最新可用的安装包 地址&#xff1a;https://flutter.dev/docs/development/tools/sdk/releases?tabmacos#macos …

如何使用Vite创建vue项目中配置别名和扩展名

在vite.config.js中&#xff0c;resolve 用于配置模块解析规则&#xff0c;如设置别名、扩展名等。 import {defineConfig} from vite import vue from vitejs/plugin-vue import path from path;export default defineConfig({resolve: {// 别名配置alias: {// 将 指向根目录…

C++ set、map

文章目录 关联式容器键值对树形结构的关联式容器setset的介绍set的使用 multisetmapmap的介绍map的使用 multimap 关联式容器 CSTL包含了序列式容器和关联式容器&#xff1a; 序列式容器&#xff1a;vector/list/deque关联式容器&#xff1a;set/map等 关联式容器也是用来存…

Java基础:设计模式之抽象工厂模式

一、模式定义与目的 抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;是一种创建型设计模式&#xff0c;它为创建一组相关或相互依赖的对象提供了接口&#xff0c;而无需指定这些对象的具体类。这种模式允许客户端使用抽象接口来创建家族内的产品对象&#xff0…

Yolov5 export.py实现onnx模型的导出

查了很多资料&#xff0c;很多用python代码写的&#xff0c;只需要这个库那个库的&#xff0c;最后都没成功。 不如直接使用Yolov5里面的 export.py实现模型的转换。 一&#xff1a;安装依赖 因为yolov5里面的requirments.txt是将这些转换模型的都注释掉了 所以需要解除注释…

SAP如何批量标记生产订单的TECO状态

声明&#xff1a;本文仅代表作者观点和立场&#xff0c;不代表任何公司&#xff01;仅用于SAP软件应用学习参考。 SAP/ERP系统生产订单完工后&#xff0c;在进行结算之前&#xff0c;需要进行技术性完成操作&#xff0c;即将生产订单批量标记TECO&#xff0c;标记上TECO表示生…

独立站运营教程:站外引流如何做?

在当今全球化的商业环境中&#xff0c;跨境电商已经成为一个蓬勃发展的行业。对于跨境电商独立站来说&#xff0c;站外引流是非常关键的一环&#xff0c;它可以帮助独立站吸引更多潜在客户&#xff0c;提升品牌知名度&#xff0c;促进销售增长。本文将深入探讨如何实现跨境电商…

eNSP学习——静态路由及默认路由基本配置

目录 知识背景 实验目的 实验步骤 实验内容 实验拓扑 实验编址 实验前期准备 实验步骤 1、基本配置&#xff08;按照实验编址设置好对应的IP地址&#xff09; 2、是实现主机之间的通信 3、实现全网全通来增强网络的可靠性 4、使用默认路由实现简单的网络优化 需要各…

【静态分析】静态分析笔记07 - 指针分析基础

参考&#xff1a; 【课程笔记】南大软件分析课程7——指针分析基础&#xff08;课时9/10&#xff09; - 简书 -------------------------------------------------------------- 1. 指针分析规则 规则&#xff1a;采用推导形式&#xff0c;横线上面是条件&#xff0c;横线下…

MySQL--表的操作

目录 创建表 查看表结构 修改表 新增列 修改列类型 修改列名 修改表名&#xff1a; 删除列 删除表 创建表 语法&#xff1a; CREATE TABLE table_name ( field1 datatype, field2 datatype, field3 datatype ) character set 字符集 collate 校验规则 engine 存储引…

【论文阅读】Self-DC:何时检索,何时生成?

对于RAG来说&#xff0c;什么时候利用外部检索&#xff0c;什么时候使用大模型产生已知的知识&#xff0c;以回答当前的问题?这是一个非常有趣的话题。 《Self-DC: When to retrieve and When to generate? Self Divide-and-Conquer for Compositional Unknown Questions》这…

【设计模式】12、observer 观察者模式

文章目录 十二、observer 观察者模式12.1 subscriber12.1.1 broker_test.go12.2.2 broker.go12.2.3 client.go 十二、observer 观察者模式 https://refactoringguru.cn/design-patterns/observer 发布订阅模式, client 都可以向 broker 注册, broker 管理所有 connection, 当…

MySQL尾部空格处理与哪些设置有关? 字符集PAD SPACE与NO PAD属性的区别、MySQL字段尾部有空格为什么也能查询出来?

文章目录 一、问题背景二、字符集PAD_ATTRIBUTE属性&#xff08;补齐属性&#xff09;2.2、PAD SPACE与NO PAD的具体意义 三、CHAR类型尾部空格的处理四、其他问题4.1、在PAD SPACE属性时如何实现精准查询 五、总结 以下内容基于MySQL8.0进行讲解 一、问题背景 一次查询中发现…

Threejs加载字体加载FontLoader与TTFLoader

在 Three.js 中使用自定义字体进行 3D 文本渲染。它最初是以 JSON 格式加载字体&#xff0c;现在Three.js已经有一个 TTFLoader 类&#xff0c;可用于加载 TTF 字体文件并将它们用作 TextGeometry &#xff01; 1、最初使用FontLoader加载json字体方法如下 const loader new…

NVIDIA CUDA Toolkit

NVIDIA CUDA Toolkit CUDA Toolkit 12.4 Update 1 Downloads | NVIDIA Developer CUDA Toolkit是用于CUDA开发的软件包&#xff0c;主要包括CUDA编译器、运行时库、GPU驱动程序和开发工具等。它允许开发者使用通用编程语言&#xff08;如C、C&#xff09;来利用NVIDIA GPU进行…