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

前端学习之DOM编程案例：抽奖案例

news 2025/8/29 4:48:04

代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>抽奖案例</title><style>*{margin: 0;padding: 0;}</style>
</head>
<body><div id="container"></div><script>let div0 = document.querySelector('#container')//最外边的大盒子div0.style.width = 800 +'px'div0.style.height = 900 +'px'div0.style.border = '1px dashed red'        div0.style.margin = 'auto'div0.style.textAlign = 'center'//抽奖显示的圆let cirle =  document.createElement('div')cirle.style.borderRadius = '50%'// cirle['borderRadius'] = '50%'// cirle['backgroundColor'] = 'red'cirle.style.backgroundColor = 'red'cirle.style.width = 300 + 'px'cirle.style.height = 300 + 'px'cirle.style.margin = 'auto'cirle.textContent = '宝马五元代金卷'cirle.style.fontSize = '30px'cirle.style.color = 'white'cirle.style.marginTop = '80px'cirle.style.lineHeight = '300px'cirle.style.textAlign='center'div0.appendChild(cirle)//抽奖按钮let button1 = document.createElement('button')button1.style.width=300+'px'button1.style.height=40+'px'button1.textContent = '开始抽奖'button1.style.margin='auto'button1.style.marginTop = 40+'px'let btn_status = '开始抽奖'//奖品let arr = ['宝马五元代金卷','兰博基尼五元代金卷','法拉利五元代金卷','iphone五元代金卷']    //抽奖逻辑button1.onclick = function(){if (btn_status == '开始抽奖'){id = setInterval(start,10)}else{btn_status = '开始抽奖'button1.textContent = btn_statusclearInterval(id)} }div0.appendChild(button1)function start(){index = Math.ceil(Math.random()*4)cirle.textContent = arr[index]btn_status = '停止抽奖'button1.textContent = btn_status}</script>
</body>
</html>

结果

不嫌弃的点点关注，点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧

相关文章：

前端学习之DOM编程案例：抽奖案例

代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>抽奖案例</title><style>*{margin: 0;padding: 0;}</style> </head> <body><div id"container"&g…...

编程日记 2024/4/12 1:17:51

解决windows下Qt Creator显示界面过大的问题

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;QT❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 问题描述 解决方法 1、右击此电脑--->属性 2、点击高级系统设置--->点击环境变量 3、 找到系…...

编程日记 2024/4/12 1:15:47

MySQL 通信协议 tcp c/s架构 jdbc java

简介 服务器启动后&#xff0c;会使用 TCP 监听一个本地端口&#xff0c;当客户端的连接请求到达时&#xff0c;就会执行三段握手以及 MySQL 的权限验证&#xff1b;验证成功后&#xff0c;客户端开始发送请求&#xff0c;服务器会以响应的报文格式返回数据&#xff1b;当客户…...

编程日记 2024/4/12 1:13:44

蓝桥杯第十三届电子类单片机组决赛程序设计

前言 一、决赛题目 1.比赛题目 2.题目解读 二、功能实现 1.关于定时器资源 1&#xff09;超声波和NE555需要的定时器资源 2&#xff09;定时器2 2.单位切换 3.数据长度不足时&#xff0c;高位熄灭 4.AD/DA多通道的处理 5.PWM输出 6.长按功能的实现 三、完整代码演…...

编程日记 2024/4/12 1:12:43

【Entity Framework】如何使用EF中的生成值

【Entity Framework】如何使用EF中的生成值 文章目录 【Entity Framework】如何使用EF中的生成值一、概述二、默认值三、计算列四、设置主键五、显示配置值生成六、设置日期/时间值生成6.1 创建时间戳6.2 更新时间戳 七、替代值生成八、无值生成九、总结 一、概述 数据库列的值…...

编程日记 2024/4/12 1:11:42

【MATLAB源码-第185期】基于matlab的16QAM系统相位偏移估计EOS算法仿真，对比补偿前后的星座图误码率。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 1. 引言 M-QAM调制技术的重要性 现代通信系统追求的是更高的数据传输速率和更有效的频谱利用率。M-QAM调制技术&#xff0c;作为一种高效的调制方案&#xff0c;能够通过在相同的带宽条件下传输更多的数据位来满足这一需求…...

编程日记 2024/4/12 1:08:39

C++入门语法（命名空间缺省函数函数重载引用内联函数nullptr）

目录 前言 1. 什么是C 2. C关键字 3. 命名空间 3.1 命名空间的定义 3.2 命名空间的使用 4. C输入和输出 5. 缺省函数 5.1 概念 5.2 缺省参数分类 6. 函数重载 6.1 概念 6.2 为何C支持函数重载 7. 引用 7.1 概念 7.2 特性 7.3 常引用 7.4 引用与指针的区别 7…...

编程日记 2024/4/12 1:05:35

9.vector的使用介绍和模拟实现

1.vector的介绍及使用 1.1 vector的介绍 vector的文档介绍 vector是表示可变大小数组的序列容器。 就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c…...

编程日记 2024/4/12 1:03:34

探索设计模式的魅力：MVVM模式在AI大模型领域的创新应用-打破传统，迎接智能未来

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 MVVM模式在AI大模型领域的创新应用-打破传统迎接智能未来 &#x1f680; “在人工智能的领域里&a…...

编程日记 2024/4/12 0:59:30

Docker使用— Docker部署安装Nginx

Nginx简介 Nginx 是一款高性能的 web 服务器、反向代理服务器以及电子邮件&#xff08;IMAP/POP3/SMTP&#xff09;代理服务器&#xff0c;由俄罗斯开发者伊戈尔塞索耶夫&#xff08;Igor Sysoev&#xff09;编写&#xff0c;并在2004年10月4日发布了首个公开版本0.1.0。Nginx…...

编程日记 2024/4/12 0:58:28

C/C++基础----运算符

算数运算符 运算符 描述 例子 两个数字相加 两个变量a b得到两个变量之和 - 两个数字相减 - * 两个数字相乘 - / 两个数字相除 - % 两个数字相除后取余数 8 % 3 2 -- 一个数字递减 变量a&#xff1a;a-- 、--a 一个数字递增 变量a: a 、 a 其中递…...

编程日记 2024/4/12 0:54:24

YOLOv9：下一代目标检测的革新

目标检测作为计算机视觉领域的一个重要分支&#xff0c;一直是研究的热点。YOLO系列作为目标检测算法的佼佼者&#xff0c;自YOLO1发布以来&#xff0c;就在速度和精度上取得了很好的平衡&#xff0c;深受业界和学术界的喜爱。 YOLOv9作为该系列的最新版本&#xff0c;不仅在性…...

编程日记 2024/4/12 0:50:20

Leetcode算法训练日记 | day20

一、合并二叉树 1.题目 Leetcode&#xff1a;第 617 题 给你两棵二叉树&#xff1a; root1 和 root2 。 想象一下&#xff0c;当你将其中一棵覆盖到另一棵之上时&#xff0c;两棵树上的一些节点将会重叠&#xff08;而另一些不会&#xff09;。你需要将这两棵树合并成一棵新…...

编程日记 2024/4/12 0:48:18

conda创建虚拟环境太慢，Collecting package metadata (current_repodata.json): failed

(省流版&#xff1a;只看加粗红色&#xff0c;末尾也有哦) 平时不怎么用conda&#xff0c;在前公司用服务器的时候用的是公司的conda源&#xff0c;在自己电脑上直接用python创建虚拟环境完事儿&#xff0c;所以对conda的配置并不熟悉~~【狗头】。但是python虚拟环境的最大缺点…...

编程日记 2024/4/12 0:47:15

Tensorflow（GPU版本配置）一步到位！！！

Tensorflow&#xff08;GPU版本配置&#xff09;一步到位&#xff01;&#xff01;&#xff01; CUDA安装CUDA配置Tensorflow配置常见的包 CUDA安装 配置了N次的Tensorflow–Gpu版本&#xff0c;完成了踩坑&#xff0c;这里以配置Tensorflow_gpu 2.6.0为例子进行安装 以下为ten…...

编程日记 2024/4/12 0:45:13

STL之map

CSTL之map 1.介绍 map是映射的意思&#xff0c;即每个x对应一个y&#xff0c;我们这里说成key和value 举例子说明&#xff1a;运动->篮球 &#xff08;运动是key,篮球是value&#xff09;用电脑->写代码 &#xff08;用电脑是key&#xff0c;写代码是value&#xff09;…...

编程日记 2024/4/12 0:44:11

闲谈2024(一)

时光飞逝&#xff0c;一转眼24年的第一个季度已经过去了&#xff0c;回望这3个多月&#xff0c;感触颇多。首先&#xff0c;24年从一个一心只读圣贤书&#xff0c;全身心投入在技术上的研发工程师&#xff0c;转变为一个团队的小leader。从我个人对自己的定位来说&#xff0c;我…...

编程日记 2024/4/12 0:38:03

SQL注入利用 学习- 布尔盲注

布尔盲注适用场景&#xff1a; 1、WAF或者过滤函数完全过滤掉union关键字 2、页面中不再回显具体数据&#xff0c;但是在SQL语句执行成功或失败返回不同的内容 代码分析&#xff1a;过滤关键字 union if(preg_match(/union/i, $id)) { echo "fail"; exit; } 代码…...

编程日记 2024/4/12 0:37:02

前端项目部署教程——有域名有证书

一、拉取nginx镜像 docker pull nginx //先拉取nginx镜像二、打包前端项目 1、将Vue打包项目传输到/usr/local/vue/下blog和admin文件夹下 重点: 每一个子域名都要申请证书&#xff0c;在阿里云每年可以免费申请20个证书&#xff0c; 免费证书申请教程在 免费证书申请教程 …...

编程日记 2024/4/12 0:36:01

《看漫画学C++》第12章 可大可小的“容器”——向量

在C编程的世界里&#xff0c;数组是一种基础且广泛使用的数据结构。然而&#xff0c;传统的静态数组在大小固定、管理不便等方面的局限性&#xff0c;常常让开发者感到束手束脚。幸运的是&#xff0c;C标准库中的vector类为我们提供了一种更加灵活、高效的动态数组解决方案。 …...

编程日记 2024/4/12 0:28:54

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2025/8/27 22:59:00

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/8/22 10:12:19

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/8/27 2:56:26

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/8/26 22:00:33

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/7/7 17:43:40

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2025/7/3 22:17:31

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/8/22 4:24:12

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2025/8/28 14:10:08

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2025/7/31 0:41:59

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

编程新知 2025/8/9 4:55:19