html css js 编程简单实现 随机抽奖 练习小项目

news/2024/9/17 9:23:26/ 标签: html, css, javascript

我们经常在某些网站上 看到一些 抽奖的活动,比如大转盘 随机抽奖
这种抽奖程序是怎么实现的呢?下面分享一个代码 简单的 实现了一下 随机抽奖的逻辑
对于网页的 美观度 就不分享了 主要是分享 js怎么 随机的 让 奖品滚顶起来 然后 某个节点
停止滚动 从而 实现中奖 奖品

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body><h1>随机抽奖小练习</h1>
<p id="a">奖品</p>
<button onclick="ad()">开始抽奖</button>
<button onclick="a()">停。。。</button>
</body>
<script type="text/javascript">
function add(){var dm=["一等奖:大彩电",'二等奖:小彩电','三等奖:吹风机','四等奖:小电风扇','五等奖:塑料杯','谢谢惠顾'];var dc=parseInt(Math.random()*dm.length);document.getElementById('a').innerHTML=dm[dc];
}
let td=null
function ad(){if(td){a(td)}td=window.setInterval(add,100);
}
function a(){window.clearInterval(td);
}
</script>
</html>

有刚刚学习编程的兄弟们 可以 尝试写一写

更多项目练习例子分享:https://wwwoop.com/?typeParam=2


http://www.ppmy.cn/news/1522871.html

相关文章

JavaWeb后端开发总结(3)

AOP基础 AOP概述 首先我们要知道AOP是什么&#xff1f; 看下图 个人解析&#xff1a; AOP叫做面向切面编程&#xff0c;但是实际上就是面向方法编程 图中下面一部分是一个AOP的案例 AOP快速入门案例代码实现 案例&#xff1a;测出业务中各个业务方法所需的执行时间 如果…

冒泡排序算法介绍

冒泡排序算法介绍 如果真的累了&#xff0c;就拉上窗帘关上手机关掉闹钟深呼吸一口气钻进被窝&#xff0c;好好地睡一觉&#xff0c;难熬的日子总需要一些温暖&#xff0c;而什么都不如被窝的温暖来的踏实。 冒泡排序是一种经典的排序算法&#xff0c;它通过重复遍历待排序的序…

【机器学习-一-基础概念篇】

机器学习 定义分类算法 应用 定义 机器学习最早是被Arthur Samuel 提出的一个概念&#xff0c;指计算机无需明确编程即可学习的研究领域。1950年他发明的跳棋程序&#xff0c;这个人机对弈游戏让他的声名鹊起&#xff0c;机器学习这个概念才进入大众的是视线。 在这个跳棋程序…

智能合约漏洞(四)

前言 在前面的文章中&#xff0c;我们讨论了整数溢出/下溢和时间依赖漏洞。今天&#xff0c;我们将继续探讨智能合约中两种常见的安全问题&#xff1a;拒绝服务&#xff08;Denial of Service, DoS&#xff09;和恶意合约依赖漏洞。这些漏洞可能导致合约功能的中断或意外的恶意…

机器学习引领未来:赋能精准高效的图像识别技术革新

图像识别技术近年来取得了显著进展,深刻地改变了各行各业。机器学习,特别是深度学习的突破,推动了这一领域的技术革新。本文将深入探讨机器学习如何赋能图像识别技术,从基础理论到前沿进展,再到实际应用与挑战展望,为您全面呈现这一领域的最新动态和未来趋势。 1. 引言 …

windows下安装并使用nvm

目录 一.准备工作&#xff1a;卸载node 卸载步骤 二.下载nvm 三.安装nvm 三.配置下载源【重要】 四.使用nvm安装node.js 五.nvm常用命令 六.卸载nvm 一.准备工作&#xff1a;卸载node 如果电脑上已经有node&#xff0c;那么我们需要先完全卸载node&#xff0c;再安装…

ArcGIS Pro SDK (十二)布局 10 布局导出

ArcGIS Pro SDK (十二)布局 10 布局导出 文章目录 ArcGIS Pro SDK (十二)布局 10 布局导出1 布局导出1.1 将布局导出为 PDF1.2 将地图框导出为 JPG1.3 将与地图框关联的地图视图导出到 BMP1.4 将地图系列导出为单个 PDF1.5 将地图系列导出到单个 TIFF 文件2 布局选项2.1 获…

程序的格式框架与缩进

引言 在上一课时中&#xff0c;我们介绍了 Python 的基本概念&#xff0c;并成功运行了第一个 Python 程序。本课时将深入探讨 Python 程序的基本结构、缩进的重要性&#xff0c;以及如何正确使用注释。通过本课时的学习&#xff0c;你将更好地理解 Python 代码的组织方式&…

【重学 MySQL】十八、逻辑运算符的使用

【重学 MySQL】十八、逻辑运算符的使用 AND运算符OR运算符NOT运算符异或运算符使用 XOR 关键字使用 BIT_XOR() 函数注意事项 注意事项 在MySQL中&#xff0c;逻辑运算符是构建复杂查询语句的重要工具&#xff0c;它们用于处理布尔类型的数据&#xff0c;进行逻辑判断和组合条件…

linux中使用rust语言在不同进程之间通信

第一种:使用mmap映射相同文件 fn main() {let pid = std::process::id();println!(

Xilinx FPGA 原语解析(二):IBUFDS差分输入缓冲器(示例源码及仿真)

目录 前言&#xff1a; 一、原语使用说明 二、原语实例化代码模版 三、使用示例 1.设计文件代码 2.仿真文件代码 3.仿真结果 前言&#xff1a; 本文主要参考资料xilinx手册&#xff0c;《Xilinx 7 Series FPGA and Zynq-7000 All Programmable SoC Libraries Guide for…

免费OCR 文字识别工具

免费&#xff1a;本项目所有代码开源&#xff0c;完全免费。 方便&#xff1a;解压即用&#xff0c;离线运行&#xff0c;无需网络。 高效&#xff1a;自带高效率的离线OCR引擎&#xff0c;内置多种语言识别库。 灵活&#xff1a;支持命令行、HTTP接口等外部调用方式。 功能…

Xilinx FFT IP使用

简介 本章节主要介绍FFT原理,以及Xilinx的FFT IP使用说明做详细介绍。 FFT介绍 FFT主要是将时域信号转换成频域信号,转换后的信号更方便分析。首先,FFT是离散傅立叶变换 (DFT) 的快速算法,那么说到FFT,我们自然要先讲清楚傅立叶变换。先来看看傅立叶变换是从哪里来的? 傅…

GitLab安装流程及日常使用流程

GitLab是一种基于Git的代码托管和协作平台&#xff0c;可以帮助开发团队更好地管理代码和协作开发。下面是GitLab的安装流程和使用方法的简要说明。 安装流程&#xff1a; 安装依赖&#xff1a;首先&#xff0c;确保你的服务器上已经安装了Git、Ruby和RubyGems。还需要安装一些…

Python世界:文件自动化备份实践

Python世界&#xff1a;文件自动化备份实践 背景任务实现思路坑点小结 背景任务 问题来自《简明Python教程》中的解决问题一章&#xff0c;提出实现&#xff1a;对指定目录做定期自动化备份。 最重要的改进方向是不使用 os.system 方法来创建归档文件&#xff0c; 而是使用 zip…

第十周:机器学习

目录 摘要 Abstract 一、RNN的进一步探索 1、RNN的困境 2、RNN的应用 二、谱图理论 1、理论基础​编辑 2、计算流程 3、傅里叶变换 4、filtering 5、GCN 总结 摘要 接着上周对RNN的讨论&#xff0c;这周学习了如何训练RNN&#xff0c;对于训练过程中出现的…

【MySQL】MySQL基础

目录 什么是数据库主流数据库基本使用MySQL的安装连接服务器服务器、数据库、表关系使用案例数据逻辑存储 MySQL的架构SQL分类什么是存储引擎 什么是数据库 mysql它是数据库服务的客户端mysqld它是数据库服务的服务器端mysql本质&#xff1a;基于C&#xff08;mysql&#xff09…

IDEA插件推荐-SequenceDiagram,自动生成时序图

SequenceDiagram插件是一种用于绘制时序图的工具。时序图是一种图形化的表示对象之间消息传递顺序的方法。 该插件可以在使用各种编程语言编写代码时&#xff0c;方便地绘制时序图&#xff0c;以帮助开发者更好地理解和描述系统中的交互流程。 SequenceDiagram插件体验&#x…

字符串操作的高效工具—正则表达式

字符串操作的高效工具—正则表达式 一 . 概述1.1 认识正则表达式1.2 正则表达式体验案例 二 . 使用2.1 字符类2.2 逻辑运算符2.3 预定义字符2.4 数量词2.5 分组括号2.6 字符串中常用含有正则表达式的方法 正则表达式&#xff08;Regular Expression&#xff0c;简称 regex 或 r…

《论面向方面的编程技术及其应用》写作框架,软考高级系统架构设计师

论文真题 随着社会信息化进程的加快&#xff0c;计算机及网络已经被各行各业广泛应用&#xff0c;信息安全问题也变得愈来愈重要。它具有机密性、完整性、可用性、可控性和不可抵赖性等特征。信息系统的安全保障是以风险和策略为基础&#xff0c;在信息系统的整个生命周期中提…